Значки не отображаются в Angular Список материалов

Question

Я пытаюсь отобразить список имен пользователей моего приложения. Предполагается, что на дисплее имеется кнопка со значком, которая при нажатии выполняет некоторое действие. Я использую Angular Компоненты материала.

Я считаю, что у меня есть все важные импорты в модуль. Код ниже показывает компоненты дизайна материала, которые я импортировал:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule,
         MatCardModule,
} from '@angular/material';
import { routeCmp } from './app.router';
import { NewuserModule } from './newuser/newuser.module';
import {MatIconModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
  ],
  imports: [
    BrowserModule,
    MatToolbarModule,
    MatCardModule,
    MatListModule,
    MatIconModule,
    BrowserAnimationsModule
  ],
  // the rest of the code omitted for brevity
})
export class AppModule { }

На основании примеров, которые я видел на Inte rnet, у меня есть следующее HTML для моего дисплея:

<mat-nav-list>
    <mat-list-item *ngFor="let names of userNames">
        <div matLine>{{ names }}</div>
        <button mat-icon-button>
            <mat-icon>info</mat-icon>
        </button>
    </mat-list-item>
</mat-nav-list>

Обратите внимание, что userNames (в настоящее время) - это просто массив строк.

Мой код похож на код, показанный ниже, который взят из примера на https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html

<h5>Complex Nav List</h5>
<mat-nav-list>
    <mat-list-item *ngFor="let link of links">
        <a matLine href="javascript:void(0)">{{ link }}</a>
        <button mat-icon-button>
            <mat-icon>info</mat-icon>
         </button>
    </mat-list-item>
</mat-nav-list>

Изображение из примера показано на рисунке ниже:

К сожалению, вместо этого я вижу кнопка и текст:

Очевидно, что-то мне не хватает. Есть что-то не описанное в примере, которое заставляет его работать. Я попытался воссоздать пример кода в моей собственной разработке, основываясь на том, что я скачал с сайта. В примере кода не удалось правильно отобразить значок в моей среде.

Может кто-нибудь сказать мне, что мне здесь не хватает? Как я могу получить в своем списке правильное отображение значков в моем списке?

Answer 1

Вам необходимо импортировать шрифты Material Icons в ваш проект.

В index.html добавьте следующий код.

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

Поскольку вы используете mat-icon-button, вам также необходимо импортировать MatButtonModule в ваш AppModule импорт.

Answer 2

Похоже, вам не хватает MatButtonModule в импорте вашего AppModule.