如何在AngularMaterial中使用自定义SVG图标

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

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

先决条件

要完成本教程，您需要：

  • Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

这篇文章假设你对 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 语句：

src/style.css 

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

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

nano src/app.module.ts

然后，为 MatIconModule 添加 import：

src/app/app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";

并将其添加到模块的 imports 数组中：

src/app/app.module.ts 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

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

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

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

打开app.component.html文件： 

nano src/app/app.component.html

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

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

然后，为 HttpClientModule 添加 import：

src/app/app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";

并将其添加到模块的 imports 数组中：

src/app/app.module.ts 

@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：

src/app/app.component.ts 

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

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

src/app/app.component.ts 

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

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

src/app/app.component.ts 

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：

src/app/app.component.ts 

import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

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

src/app/app.component.ts 

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" 标签。 以及带有自定义 "unicorn_icon.svg" 图标的 path_to_custom_icon.svg。

让我们更新 addSvgIcon 中的行：

src/app/app.component.ts 

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

并将图标标签传递给 <mat-icon> 的 svgIcon 输入属性：

src/app/app.component.html 

<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 的知识，请查看 官方文档 。

取自“https://cainiaojiaocheng.com/index.php?title=如何在AngularMaterial中使用自定义SVG图标&oldid=27692”
Powered by MediaWiki