介绍

该角材质库报价角分量的一套风格与材料设计。一种这样的组件是<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

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

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

为了使用默认的 Material Icons，你需要先在全局样式表中导入它们。为此，请打开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

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

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

第 3 步 –<mat-icon>与 SVG 一起使用

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

注意：可以在The Noun Project获得独角兽 SVG 图标。免费的基本使用必须根据许可证要求归于图标的创建者。

将图标另存为项目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]
})

现在，我们可以"unicorn"使用MatIconRegistryAngular Material 提供的服务注册我们的自定义图标。

打开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将返回一个安全的资源 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>：

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

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

ng serve

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

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

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

结论

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

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

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