使用在Angular Material中

1 年 ago

科, 颖

2 minutes

这篇文章是Hands-On实验室2018年的11日目文章。

概要 – Summary

是Angular Material的组件之一，它可以在应用程序中轻松使用丰富的材料图标。
本文介绍了在安装Angular Material时使用Material Icons的的方法，以及如何在中使用注册的SVG图标。
本文的示例代码假定已经使用Angular CLI生成了项目。

使用来展示Material Icons。

首先，为了使用，需要安装Angular Material。是Angular Material的组件，可以处理矢量格式的图标。它的特点是可以将图标名称与SVG图标的URL关联起来，并将其注册为HTML字符串或CSS类名的别名。此外，不仅可以注册SVG图标，还可以轻松使用Material Icons。

安装Angular Material

使用以下命令安装Angular Material。

跟著我們一起使用 @angular/material 添加模組。

当安装完成后，src/index.html将会加载来自Google APIs的Material Icons样式表。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

为了使用，需要在app.module.ts中导入MatIconModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
+    MatIconModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，您可以在应用程序内使用Material Icons。

显示Material Icons

要显示Material Icons图标，您可以在标签内写入所需的Material Icons图标名称。以下是一个示例：

<mat-icon>thumb_up</mat-icon>

使用合并了多个字符的合字，将文字“thumb_up”表示为一个图标进行显示。

默认颜色由的currentColor属性控制，并继承父元素的color属性。通过更改的font-size和color等属性，也可以调整图标的大小和颜色。

在中查找想要使用的图标。

注册SVG图标

除了 Material Icons 之外，还可以使用 Angular Material 的 MatIconRegistry 服务，在应用程序中使用自己准备的 SVG 图标。
让我们将所需的模块导入到先前的项目中。

存储SVG文件

在Material Icon库中，您可以以SVG或PNG格式下载所有图标文件。本次我们将从Material Icon库中下载双色的favorite图标用于SVG图标的注册，并将其存放在src/assets目录下。SVG文件的名称将被命名为twotone-favorite-24px.svg。

引入HttpClientModule-

为了获取已注册的SVG图标的URL，我们需要使用XmlHttpRequest，在AppModule模块中导入HttpClientModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
+ import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
+    HttpClientModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用组件注册SVG图标

在想要使用SVG图标的组件中，通过注入DomSanitizer和MatIconRegistry服务，可以使用MatIconRegistry.addSvgIcon方法来注册任意SVG图标。
DomSanitizer服务用于防止XSS攻击，它会为传递给MatIconRegistry的SVG图标的URL或字符串添加受信任的标记。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
+  constructor(
+    private domSanitizer: DomSanitizer,
+    private matIconRegistry: MatIconRegistry,
+  ) {
+    this.matIconRegistry.addSvgIcon(
+      'twotone-favorite',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('src/assets/twotone-favorite-24px.svg'));+  }
}

在上述示例中，我们使用addSvgIcon函数的第一个参数来设置用于调用已注册图标的名称，同时将要注册的图标的URL设置为第二个参数。

使用已注册的SVG图标

现在让我们尝试在HTML中调用之前注册的SVG图标。通过给mat-icon标签添加svgIcon属性，将之前设置的图标名称作为值进行赋值。

<mat-icon svgIcon="twotone-favorite"></mat-icon>

当显示 SVG 图标时，它会内联展开的子元素中的 SVG 元素。
使用 MatIconRegistry 服务的好处是，通过将具有复杂路径的 SVG 图标组件化，可以提高代码的可读性，便于重构。

概括一下

在介绍中，我们讲解了使用 Angular Material 的和 Material Icons 进行图标字体的用法，以及如何注册 SVG 图标。通过充分利用这两者，可以帮助使应用程序更加精致。

「ハンズラボ Advent Calendar 2018 の12日目に登場するのは、@thimi0412さんです。」

文献引用

以下是我在撰写时参考的文章和网站。

如何在Angular Material中使用自定义SVG图标
Angular Material
材料设计

材料图标指南 ↩