В настоящее время я запускаю новый проект, используя Angular и Material.
Обновлено: Вот stackblitz: https://stackblitz.com/edit/angular-ivy-tzxfxr?file=src/app/app.component.html
Я пытаюсь сделать пример панели инструментов, но вот результаты:
https://i.imgur.com/LG57QZI.png
Я пытаюсь поместить код примера в app.component.html
:
<mat-toolbar>
<button mat-icon-button class = "example-icon" aria-label = "Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class = "example-spacer"></span>
<button mat-icon-button class = "example-icon favorite-icon" aria-label = "Example icon-button with heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class = "example-icon" aria-label = "Example icon-button with share icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
<router-outlet></router-outlet>
И app.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'OpenCaptureForInvoices';
}
Чтобы импортировать модуль материалов, у меня есть файл app-material.module.ts
import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
imports: [
MatToolbarModule,
MatButtonModule,
MatIconModule
],
exports: [
MatToolbarModule,
MatButtonModule,
MatIconModule
]
})
export class AppMaterialModule { }
Этот последний файл включен в app.module.ts
Я сделал что-то не так ?
редактирую пост :)
Проблема в том, что иконки не загружаются. Это связано с тем, что вы не включили шрифт значка Material в свой проект.
Добавьте это в свой index.html
:
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet">
См. также документацию Angular Material, как правильно настроить проект.
Не за что, рад, что смог вам помочь :)
@JSON, у меня есть один вопрос относительно таблицы угловых материалов, не могли бы вы помочь здесь. stackoverflow.com/questions/65347251/…
Можете ли вы настроить stackblitz? Иначе трудно воспроизвести ошибку...