材料角度组件不加载

Question

我目前正在使用 Angular 和 Material 运行一个新项目

编辑：这是一个堆栈闪电战：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';
}

要导入 Material 模块，我有一个 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中

我是不是做错了什么？

Answer 1

问题是图标没有加载。这是因为您没有在项目中包含 Material 图标字体。

将此添加到您的index.html：

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

另请参阅Angular Material documentation 如何正确设置项目。