Angular 材质列表中未显示图标答案

【问题标题】：Icons not being displayed in Angular Material ListAngular 材质列表中未显示图标
【发布时间】：2020-04-01 04:28:52
【问题描述】：

我正在尝试显示我的应用程序的用户名列表。包括在显示屏中应该是一个图标按钮，它将执行一些操作按下时。我正在使用 Angular Material 组件。

我相信我拥有该模块的所有重要导入。下面的代码显示我导入的材料设计组件：

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 { }

根据我在 Internet 上看到的示例，我有以下 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>

示例中的显示如下图所示：

不幸的是，我看到的是一个按钮和文本：

显然，我错过了一些东西。示例中未描述的内容让它工作。我确实尝试在我自己的开发设置中重新创建示例代码，基于关于我从网站下载的内容。示例代码未能正确显示我的环境中的图标。

有人可以告诉我我在这里缺少什么吗？如何让我的列表正确显示我列表中的图标？

【问题讨论】：

标签： html angular typescript

【解决方案1】：

您需要将 Material Icons 字体导入到您的项目中。

在index.html中，添加如下代码。

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

由于您使用的是mat-icon-button，因此您还需要将MatButtonModule 导入到您的AppModule 导入中。

【讨论】：

【解决方案2】：

您的 AppModule 的导入中似乎缺少 MatButtonModule。

【讨论】：