当前位置：首页 > news >正文

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

news 来源：原创 2024/5/10 10:48:41

简介

Angular Material 库提供了一套使用 Material Design 样式的 Angular 组件。其中之一是 <mat-icon> 组件。有许多现成的 Material 图标。但如果我们想在保持 Material Design 样式一致的同时显示一些自定义图标怎么办？让我们学习如何在 Angular Material 组件中使用自定义 SVG 图标。

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

完整的可工作代码可以在这个 GitHub 仓库中找到。

先决条件

要完成本教程，您需要：

本地安装了 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 图标，您首先需要在全局样式表中导入它们。为此，请打开由 Angular CLI 生成的 styles.css 文件：

nano src/styles.css

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

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

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

nano src/app.module.ts

然后，添加 MatIconModule 的 import：

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> 组件显示内置的 Material 图标。如果您添加图标的文本名称，它将显示关联的图标字形。

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

!Material 图标字形的 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" 图标。

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

要使用我们的自定义 unicorn 图标与 <mat-icon> 组件标签一起，我们需要导入 HttpClientModule。

打开 app.module.ts 文件：

nano src/app/app.module.ts

然后，添加 HttpClientModule 的 import：

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

打开 app.component.ts：

nano src/app/app.component.ts

然后，添加 MatIconRegistry 的 import：

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

并将该服务注入到组件中：

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

在组件的 constructor 方法中添加 addSvgIcon 方法：

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：

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 路径字符串，DomSanitizer 上的 bypassSecurityTrustResourceUrl 方法将返回一个安全的资源 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"));}
}