极客笔记Angular Material 7 – 图标
什么是Angular Material？
Angular Material 是一款基于 Angular 的 UI 组件库，提供了许多美观、易用的组件，帮助开发者更快速地构建出高质量的 Web 应用程序。
Angular Material 提供了诸多组件，包括数据表格、按钮、表单等等，其中的一个非常实用的组件是图标组件。
Angular Material 的图标组件
在 Angular Material 中，我们可以通过mat-icon标签来使用 Material Design 的图标。例如，我们可以将一个叉子图标插入到按钮中：
<button mat-icon-button>
<mat-icon>restaurant_menu</mat-icon>
</button>
上面的代码中，我们使用了mat-icon-button这个专门为图标设计的按钮标签，并在其中使用了mat-icon标签来添加图标。在mat-icon标签中，我们可以放置图标的名称，例如restaurant_menu。
在 Material Design 中，每个图标都有一个较长的名称，我们可以在官方文档中查询到每个图标的名称。
由于每种图标都有不同的名称，因此如果想要使用其它的图标，我们需要更换其中的名称。
在 Angular Material 7 中使用图标
在 Angular Material 7 中，引入了更多的图标，并提供了更加友好的 API 来使用这些图标。
可以通过使用MatIconModule模块来导入 Angular Material 的图标组件：
import { MatIconModule } from '@angular/material';
下面是一个示例，展示如何使用已经被引入的图标：
<mat-icon>home</mat-icon>
<mat-icon>list</mat-icon>
<mat-icon>delete</mat-icon>
<mat-icon>alarm</mat-icon>
上面的代码示例中，我们向mat-icon标签中输入了四个图标名称，即“home”、“list”、“delete”和“alarm”。
动态绑定图标
上面我们演示了静态添加图标的方式，但有时候我们需要动态地绑定图标，可以使用mat-icon-button标签来完成这个需求。
<button mat-icon-button (click)="openDialog()">
<mat-icon>{{ icon }}</mat-icon>
</button>
上述代码使用(click)事件绑定了一个打开对话框的函数，并在按钮中动态绑定了一个图标名称。在 TypeScript 代码中，我们可以定义icon变量，如下所示：
icon = 'add';
这样，我们就可以在对话框打开过程中显示添加图标，而在对话框关闭后显示删除图标，具体实现当然需要根据实际情况而定。
自定义图标
在 Angular Material 7 中，我们还可以自定义图标，非常方便。只需在项目中创建一个 SVG 文件，然后将其作为<mat-icon>元素的子元素即可。
下面是一个简单的示例，演示了如何使用自定义图标：
<mat-icon svgIcon="my-icon"></mat-icon>
上述代码中，我们使用了svgIcon属性，并在其中输入了自定义的图标名称“my-icon”。
要使用自定义的图标，我们需要首先声明它们并导入它们。我们可以通过 Angular 的MatIconRegistry模块来做到这一点。
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.matIconRegistry.addSvgIcon('my-icon', this.domSanitizer.bypassSecurityTrustResourceUrl('assets/my-icon.svg'));
}
在上面的代码中，我们首先导入了MatIconRegistry和DomSanitizer对象，然后将它们注入了组件的构造函数中。在构造函数中，我们调用了MatIconRegistry导入函数来声明我们的自定义图标，并执行了跨站点脚本（XSS）攻击的安全化操作。
在导入自定义图标时，我们需要提供自定义图标的名称和路径。在上述代码示例中，我们将自定义图标文件 my-icon.svg 放置在项目的 assets 目录下，并以assets/my-icon.svg的形式指定其路径。
结论
在本文中，我们探讨了 Angular Material 7 中图标组件的使用。我们发现，Angular Material 7 不仅提供了很多常用的图标，而且还具有自定义图标的灵活性。通过学习本文，我们可以更好地使用 Angular Material 7 中的图标组件，并为自己的项目增添更加优美的用户界面。