Компоненты Material Angular не загружаются

В настоящее время я запускаю новый проект, используя 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

Я сделал что-то не так ?

Можете ли вы настроить stackblitz? Иначе трудно воспроизвести ошибку...

JSON Derulo 11.12.2020 16:54

редактирую пост :)

Nathan Cheval 11.12.2020 17:03
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
426
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что иконки не загружаются. Это связано с тем, что вы не включили шрифт значка Material в свой проект.

Добавьте это в свой index.html:

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons"
      rel = "stylesheet">

См. также документацию Angular Material, как правильно настроить проект.

Не за что, рад, что смог вам помочь :)

JSON Derulo 11.12.2020 17:15

@JSON, у меня есть один вопрос относительно таблицы угловых материалов, не могли бы вы помочь здесь. stackoverflow.com/questions/65347251/…

app 18.12.2020 14:20

Другие вопросы по теме