介绍

Angular Material库提供了一套带有 Material Design 风格的 Angular 组件。一种这样的组件是<mat-icon>组件。有大量现成的 Material 图标。但是，如果我们想要显示一些自定义图标同时保持与 Material Design 样式一致怎么办？让我们学习如何在 Angular Material 组件中使用我们自己的 SVG 图标。

在本教程中，您将使用该<mat-icon>组件来使用标准的 Material Icons 字体。然后，您将使用该<mat-icon>组件来支持自定义 SVG 图标。

完整的工作代码可以在这个 GitHub repo 上找到。

先决条件

要完成本教程，您需要：

• 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

教程项目的设置到此结束。我们现在可以继续在我们的项目中使用材质图标。

第 2 步 — 使用<mat-icon>图标字体

为了使用默认的材质图标，您需要首先将它们导入全局样式表中。为此，请打开styles.css文件（由 Angular CLI 生成）：

nano src/styles.css

用以下import语句替换文件的内容：

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

接下来，您将需要导入MatIconModule. 打开app.module.ts文件：

nano src/app.module.ts

然后，添加importfor MatIconModule：

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]
})

现在，您可以将内置的材质图标与<mat-icon>组件一起使用。如果为图标添加文本名称，它将显示关联的图标字形。

在我们的教程中，我们将添加"mood"图标（这类似于笑脸的符号）：

Material Design 网站上有一个完整的 Material 图标列表，您可以直接使用这些图标。

打开app.component.html文件：

nano src/app/app.component.html

将文件的内容替换为以下代码行：

<mat-icon>mood</mat-icon>

让我们看看到目前为止我们有什么！启动应用程序：

ng serve

在您的网络浏览器 ( localhost:4200) 中查看应用程序，您将看到"mood"图标。

到此结束<mat-icon>用于显示图标字体。我们可以继续使用<mat-icon>来显示 SVG。

第 3 步 — 使用<mat-icon>SVG

让我们为我们的项目添加一个自定义"unicorn"图标。

将图标保存unicorn_icon.svg到src/assets项目的文件夹中。

要将我们的自定义独角兽图标与<mat-icon>组件标签一起使用，我们需要导入HttpClientModule.

打开app.module.ts文件：

nano src/app/app.module.ts

然后，添加importfor HttpClientModule：

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 提供"unicorn"的服务注册我们的自定义图标。MatIconRegistry

打开app.component.ts：

nano src/app/app.component.ts

然后，添加importfor MatIconRegistry：

import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";

并将服务的注入添加到组件中：

export class AppComponent{
  constructor(private matIconRegistry: MatIconRegistry){
    // ...
  }
}

将方法添加addSvgIcon到组件的constructor方法中：

export class AppComponent{
  constructor(private matIconRegistry: MatIconRegistry){
    this.matIconRegistry.addSvgIcon(`icon_label`,
      `path_to_custom_icon.svg`
    );}
}

该addSvgIcon方法通过接收两个参数来注册我们的图标。

第一个参数是图标标签，它的类型是string。

第二个参数是指向图标文件位置的相对 URL 路径。

此 URL 路径字符串的类型为SafeResourceUrl。要将 URL 路径字符串解析为SafeResourceUrl，我们可以使用DomSanitizerAngular 提供的。

接下来，添加importfor DomSanitizer：

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 路径字符串，bypassSecurityTrustResourceUrl方法 onDomSanitizer将返回该addSvgIcon方法所需的安全资源 URL。

现在，您可以替换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>：

<mat-icon svgIcon="unicorn"></mat-icon>

让我们来看看你到目前为止有什么！启动应用程序：

ng serve

在您的 Web 浏览器 ( localhost:4200) 中查看应用程序，您将看到自定义图标与 Material 样式一起显示。

现在，您可以使用 Material 样式在您的应用程序中显示一整套自定义图标。

为了使代码更简洁、更易于维护，我们可以通过将 移动MatIconRegistry到服务类来重构代码。

结论

在本教程中，您已经完成了使用 Angular Material<mat-icon>组件与 Material Icons 字体和自定义 SVG 的初步探索。这提供了一种在整个应用程序中保持对 Material Design 样式的一致遵守的方法。

如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。

如果您想了解更多有关 Material Design 的信息，请查看官方文档。