简介
Angular Material 库提供了一套使用 Material Design 样式的 Angular 组件。其中之一是 组件。有许多现成的 Material 图标。但如果我们想在保持 Material Design 样式一致的同时显示一些自定义图标怎么办？让我们学习如何在 Angular Material 组件中使用自定义 SVG 图标。
在本教程中，您将使用 组件来使用标准的 Material Icons 字体。然后，您将使用 组件来支持自定义 SVG 图标。
完整的可工作代码可以在这个 GitHub 仓库中找到。
先决条件
要完成本教程，您需要：
- 本地安装了 Node.js，您可以按照《如何安装 Node.js 并创建本地开发环境》进行操作。
本文假设您对 Angular v4.2+ 有一些基本知识。
本教程最初是使用 Angular v5.2+ 和 Angular Material v5.2.4 编写的。
本教程已经验证过可以在 Angular v10.0.5 和 Angular Material v10.1.1 上运行。
如果您刚开始使用 Angular Material，可以参考本文。
步骤 1 —— 创建 Angular 项目并安装依赖项
首先，打开您的终端并创建一个新的项目目录：
mkdir angular-material-custom-svg
接下来，进入新目录：
cd angular-material-custom-svg
然后，使用 npm 安装 Angular CLI 作为 devDependency：
npm install @angular/cli@10.0.4 --save-dev
现在，您可以使用 Angular CLI 创建一个新的 Angular 项目，并为本教程的需要设置一些选项：
ng new angular-material-custom-svg --directory=. --skipTests=true --routing=false --style=css
这样就在当前目录中得到了一个全新的 Angular 项目。让我们使用以下命令安装 Angular Material 及其依赖项：
npm install @angular/material@10.1.1 @angular/cdk@10.1.1 --save
这样就完成了教程项目的设置。现在我们可以继续在项目中使用 Material 图标。
步骤 2 —— 使用
要使用默认的 Material 图标，您首先需要在全局样式表中导入它们。为此，请打开由 Angular CLI 生成的 styles.css 文件：
nano src/styles.css
用以下 import 语句替换文件的内容：
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
接下来，您需要导入 MatIconModule。打开 app.module.ts 文件：
nano src/app.module.ts
然后，添加 MatIconModule 的 import：
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MatIconModule } from "@angular/material/icon";
并将其添加到模块的 imports 数组中：
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MatIconModule ], providers: [], bootstrap: [AppComponent] })
现在，您可以使用 组件显示内置的 Material 图标。如果您添加图标的文本名称，它将显示关联的图标字形。
对于我们的教程，我们将添加 "mood" 图标（这类似于带笑脸的符号）：
!Material 图标字形的 mood
Material Design 网站上有一个完整的 Material 图标列表，您可以直接使用。
打开 app.component.html 文件：
nano src/app/app.component.html
用以下代码替换文件的内容：
<mat-icon>mood</mat-icon>
让我们来看看我们到目前为止做了什么！启动应用程序：
ng serve
在您的 Web 浏览器中查看应用程序（localhost:4200），您将看到 "mood" 图标。
这样就完成了使用 显示图标字体。我们现在可以继续使用 显示 SVG。
步骤 3 —— 使用
让我们向项目中添加一个自定义 "unicorn" 图标。
将图标保存为 unicorn_icon.svg，并放到项目的 src/assets 文件夹中。
要使用我们的自定义 unicorn 图标与 组件标签一起，我们需要导入 HttpClientModule。
打开 app.module.ts 文件：
nano src/app/app.module.ts
然后，添加 HttpClientModule 的 import：
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MatIconModule } from "@angular/material/icon"; import { HttpClientModule } from "@angular/common/http";
并将其添加到模块的 imports 数组中：
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MatIconModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] })
现在，我们可以使用 Angular Material 提供的 MatIconRegistry 服务注册我们的自定义 "unicorn" 图标。
打开 app.component.ts：
nano src/app/app.component.ts
然后，添加 MatIconRegistry 的 import：
import { Component } from "@angular/core"; import { MatIconRegistry } from "@angular/material/icon";
并将该服务注入到组件中：
export class AppComponent{ constructor(private matIconRegistry: MatIconRegistry){ // ... } }
在组件的 constructor 方法中添加 addSvgIcon 方法：
export class AppComponent{ constructor(private matIconRegistry: MatIconRegistry){ this.matIconRegistry.addSvgIcon( `icon_label`, `path_to_custom_icon.svg` ); } }
addSvgIcon 方法通过两个参数注册我们的图标。
第一个参数是图标标签，类型为 string。
第二个参数是指向图标文件位置的相对 URL 路径。
这个 URL 路径字符串的类型是 SafeResourceUrl。为了将 URL 路径字符串解析为 SafeResourceUrl，我们可以使用 Angular 提供的 DomSanitizer。
接下来，添加 DomSanitizer 的 import：
import { Component } from "@angular/core"; import { MatIconRegistry } from "@angular/material/icon"; import { DomSanitizer } from "@angular/platform-browser";
并将该服务注入到组件中：
export class AppComponent{ constructor( private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer ){ this.matIconRegistry.addSvgIcon( `icon_label`, `path_to_custom_icon.svg` ); } }
给定一个相对 URL 路径字符串，DomSanitizer 上的 bypassSecurityTrustResourceUrl 方法将返回一个安全的资源 URL，这是 addSvgIcon 方法所需的。
现在，您可以将icon_label替换为自定义的 "unicorn" 标签。将 path_to_custom_icon.svg 替换为自定义的 "unicorn_icon.svg" 图标。
让我们更新 addSvgIcon 中的行：
export class AppComponent{ constructor( private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer ){ this.matIconRegistry.addSvgIcon( "unicorn", this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/unicorn_icon.svg") ); } }
现在，自定义的 "unicorn" 图标已经正确注册到 MatIconRegistry 服务中。
要显示自定义图标，您需要更新组件的模板。打开 app.component.html：
nano src/app/app.component.html
并将图标标签传递给 的 svgIcon 输入属性：
<mat-icon svgIcon="unicorn"></mat-icon>
让我们来看看您到目前为止做了什么！启动应用程序：
ng serve
在您的 Web 浏览器中查看应用程序（localhost:4200），您将看到自定义图标以 Material 样式显示。
现在，您可以在应用程序中使用 Material 样式显示一整套自定义图标。
为了使代码更清晰、更易维护，我们可以通过将 MatIconRegistry 移入一个服务类来重构代码。
结论
在本教程中，您已经完成了对使用 Angular Material 的 组件与 Material Icons 字体和自定义 SVG 的初步探索。这为您提供了一种在应用程序中保持一致地遵循 Material Design 样式的方法。
