图标未显示在“角度材料列表”中

Question

我正在尝试显示我的应用程序用户名称的列表。已包含 屏幕上应该是一个图标按钮，它将执行一些操作 当按下。我正在使用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 { }

根据我在互联网上看到的示例，我有以下适用于我的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

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

Answer 2

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

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

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

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