简介
角度材质库提供了一套使用材质设计设置样式的角度零部件。一个这样的组件是``组件。有各种各样的现成材料图标。但是，如果我们想要显示一些自定义图标，同时保持与材质设计样式一致，该怎么办？让我们学习如何在角度材质组件中使用我们自己的SVG图标。
在本教程中，您将使用<mat-icon>组件来使用标准的Material Icons字体。然后，您将使用<mat-icon>组件来支持自定义SVG图标。
完整的工作代码可以在这个GitHub repo上找到。
前提条件
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
这篇文章假设你对ANGLING V4.2+有一些基本的了解。
本教程最初是使用角度v5.2+和角度材质v5.2.4编写的。
本教程使用角度v10.0.5和角度材质v10.1.1进行了验证。
如果您要开始使用角度材质，可以参考此post。
第一步-创建Angular项目并安装扩展
首先，打开您的终端并创建一个新的项目目录：
1mkdir angular-material-custom-svg
接下来，导航到新目录：
1cd angular-material-custom-svg
然后使用npm将角度CLI安装为devDependency：
1npm install @angular/[email protected] --save-dev
现在，您可以使用ANGLE CLI创建新的ANGLE项目，还可以根据本教程的需要设置一些选项：
1ng new angular-material-custom-svg --directory=. --skipTests=true --routing=false --style=css
这为您在当前目录中提供了一个新的角度项目。让我们使用以下命令安装角度材质及其从属关系：
1npm install @angular/[email protected] @angular/[email protected] --save
这就结束了教程项目的设置。现在，我们可以继续在项目中使用材质图标。
Step 2 -使用图标字体的<mat-icon>
为了使用默认的材质图标，您需要首先在全局样式表中导入它们。为此，请打开style es.css文件(由ANGLE CLI生成)：
1nano src/styles.css
将该文件的内容替换为以下port语句：
1[label src/style.css]
2@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
接下来，您需要导入MatIconModule。打开app.mode.ts文件：
1nano src/app.module.ts
然后，为MatIconModule添加port：
1[label src/app/app.module.ts]
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4import { MatIconModule } from "@angular/material/icon";
并将其添加到模块的ports数组中：
1[label src/app/app.module.ts]
2@NgModule({
3 declarations: [
4 AppComponent
5 ],
6 imports: [
7 BrowserModule,
8 MatIconModule
9 ],
10 providers: [],
11 bootstrap: [AppComponent]
12})
现在，您可以将内置的材质图标与<mat-icon>组件一起使用。如果为图标添加文本名称，它将显示关联的图标标志符号。
在我们的教程中，我们将添加`)：
的材质图标标志符号
材料设计网站有一个完整的材料图标列表，您可以直接使用。
打开app.Component.html文件：
1nano src/app/app.component.html
将文件内容替换为以下代码行：
1[label src/app/app.component.html]
2<mat-icon>mood</mat-icon>
让我们来看看我们到目前为止都有些什么！启动应用程序：
1ng serve
在您的Web浏览器(本地主机：4200)中查看应用程序，您将看到心情图标。
这就结束了使用<mat-icon>来显示图标字体。我们可以继续使用<mat-icon>来显示SVG。
第三步-在SVG中使用<mat-icon>
让我们在项目中添加一个自定义的`独角兽‘图标。
<$>[备注] 注： 可以在名词项目.)获取独角兽svg图标根据许可证要求，免费的基本使用必须属于图标的创建者。 <$>
将图标命名为unicorn_icon.svg保存到您的工程的src/assets文件夹中。
要将我们的自定义独角兽图标与<mat-icon>组件标签一起使用，我们需要导入HttpClientModule。
打开app.mode.ts文件：
1nano src/app/app.module.ts
然后，为HttpClientModule添加port：
1[label src/app/app.module.ts]
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4import { MatIconModule } from "@angular/material/icon";
5import { HttpClientModule } from "@angular/common/http";
并将其添加到模块的ports数组中：
1[label src/app/app.module.ts]
2@NgModule({
3 declarations: [
4 AppComponent
5 ],
6 imports: [
7 BrowserModule,
8 MatIconModule,
9 HttpClientModule
10 ],
11 providers: [],
12 bootstrap: [AppComponent]
13})
现在，我们可以使用角度材质提供的MatIconRegistry服务注册我们的自定义独角兽‘图标。
打开app.Component.ts：
1nano src/app/app.component.ts
然后，为MatIconRegistry添加port：
1[label src/app/app.component.ts]
2import { Component } from "@angular/core";
3import { MatIconRegistry } from "@angular/material/icon";
并将服务注入到组件中：
1[label src/app/app.component.ts]
2export class AppComponent{
3 constructor(private matIconRegistry: MatIconRegistry){
4 // ...
5 }
6}
将addSvgIcon方法添加到组件的Construction tor方法中：
1[label src/app/app.component.ts]
2export class AppComponent{
3 constructor(private matIconRegistry: MatIconRegistry){
4 this.matIconRegistry.addSvgIcon(
5 `icon_label`,
6 `path_to_custom_icon.svg`
7 );
8 }
9}
addSvgIcon方法通过接受两个参数来注册我们的图标。
第一个参数是图标标签，它的类型是字符串。
第二个参数是指向图标文件位置的相对URL路径。
此URL路径字符串的类型为SafeResourceUrl。要将URL路径串解析为SafeResourceUrl，可以使用ANGLE提供的DomSanitizer。
接下来，为DomSanitizer添加port：
1[label src/app/app.component.ts]
2import { Component } from "@angular/core";
3import { MatIconRegistry } from "@angular/material/icon";
4import { DomSanitizer } from "@angular/platform-browser";
并将服务注入到组件中：
1[label src/app/app.component.ts]
2export class AppComponent{
3 constructor(
4 private matIconRegistry: MatIconRegistry,
5 private domSanitizer: DomSanitizer
6 ){
7 this.matIconRegistry.addSvgIcon(
8 `icon_label`,
9 `path_to_custom_icon.svg`
10 );
11 }
12}
给定一个相对URL路径字符串，DomSanitizer上的ypassSecurityTrustResourceUrl方法将返回一个安全的资源URL，这是addSvgIcon方法所必需的。
现在，您可以将icon_label替换为自定义的unicorn标签。以及带有自定义unicorn_icon.svg图标的path_to_custom_icon. svg。
让我们更新一下addSvgIcon中的行：
1[label src/app/app.component.ts]
2export class AppComponent{
3 constructor(
4 private matIconRegistry: MatIconRegistry,
5 private domSanitizer: DomSanitizer
6 ){
7 this.matIconRegistry.addSvgIcon(
8 "unicorn",
9 this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/unicorn_icon.svg")
10 );
11 }
12}
现在，自定义 "独角兽 "图标已在 "MatIconRegistry "服务中正确注册。
要显示自定义图标，您需要更新组件的模板。打开 app.component.html：
1nano src/app/app.component.html
并将图标标签传递给 <mat-icon> 的 svgIcon 输入属性：
1[label src/app/app.component.html]
2<mat-icon svgIcon="unicorn"></mat-icon>
让我们来看看你目前所拥有的一切！启动应用程序：
1ng serve
在网络浏览器（"localhost:4200")中查看应用程序，你会看到自定义图标以 Material 风格显示。
现在，你可以在应用中使用 Material 风格显示一整套自定义图标。
为了使代码更简洁、更易维护，我们可以通过将 MatIconRegistry 移入一个服务类来重构代码。
结论
在本教程中，您将初步了解如何使用 Angular Material 的"
如果您想了解有关 Angular 的更多信息，请访问 我们的 Angular 主题页面 了解练习和编程项目。
如果你想了解有关 Material Design 的更多信息，请查看 官方文档。