如何正确导入mat-icon到Angular 10

介绍

在Angular项目中使用Material组件库时，mat-icon是非常常用的一个组件。它提供了许多矢量图标，可以轻松地将其添加到您的应用程序中。在本文中，我们将介绍如何正确导入mat-icon到Angular 10项目中。

步骤

步骤1：安装 @angular/material

在使用mat-icon之前，您需要在您的项目中安装 @angular/material 组件库。您可以使用以下命令在您的项目中进行安装：

npm install --save @angular/material

步骤2：导入MatIconModule

MatIconModule 是 @angular/material 组件库中包含 mat-icon 组件的模块。 您需要在您的应用程序模块中导入它。 打开您的应用程序模块（通常是 app.module.ts）并将以下代码添加到顶部：

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatIconModule,
    ...
  ],
  ...
})
export class AppModule { }

步骤3：使用MatIcon

MatIcon 组件现在已准备就绪，您可以在组件模板中使用它了。您可以通过在元素上添加 mat-icon 属性来使用矢量图标。

<mat-icon>home</mat-icon>

步骤4：导入图标

如果要使用的矢量图标尚未包含在 mat-icon 组件中，则可以手动导入所需图标。要执行此操作，请按照以下步骤操作：

1. 打开 Material Icons 官网
2. 在搜索框中找到您要使用的图标
3. 单击图标以选中它，并将其添加到选择列表中
4. 单击“下载”以下载选中图标的 zip 文件

在您下载的 zip 文件中，您将找到多个 SVG 文件，每个文件对应一个图标。将这些文件复制到您的项目中的任何一个文件夹中（例如，您可以将它们放在 src/assets/icons 文件夹中）。

5. 更新您的应用程序模板以导入新图标

<mat-icon svgIcon="my_icon">icon name</mat-icon>

您可以使用 MatIconRegistry 注册您的新图标。打开 app.module.ts 文件并将以下代码添加到 app.module.ts 文件中。import MatIconRegistry 和 DomSanitizer：

import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  imports: [
    MatIconModule
  ]
})
export class AppModule {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    // register new icons here
    this.matIconRegistry.addSvgIcon(
      'my_icon',
      this.domSanitizer.bypassSecurityTrustResourceUrl('path-to-icon/my_icon.svg')
    );
  }
}

这将向 mat-icon 组件注册名为 "my_icon" 的新图标。

结论

通过按照上述步骤，在您的应用程序中正确导入 mat-icon 并使用它是非常容易的。我们希望这篇文章能帮助您在Angular 10应用程序中正确地集成 mat-icon 组件。