Angular v10.2.7版本谷歌Material Icons列表查询及图标不显示解决

一、先解决pending_actions图标不显示的问题 #

你当前使用svgIcon="pending_actions"是错误的——pending_actions是Material字体图标的名称，不是预注册的SVG图标ID。正确的字体图标用法应该是：

<mat-icon fontSet="material-icons" fontIcon="pending_actions"></mat-icon>

如果一定要用SVG格式，需要自行将该字体图标转换为SVG文件，再通过MatIconRegistry注册后才能使用svgIcon属性。

二、获取Angular 10.2.7对应的可用图标列表 #

Angular 10.2.7对应的@angular/material版本也是10.2.7，它依赖的material-design-icons版本可以在项目的package-lock.json中找到，以下两种方法可获取完整图标列表：

方法1：查看本地依赖文件 #

• 字体图标列表：打开项目node_modules/material-design-icons/iconfont目录，查看MaterialIcons-Regular.codepoints文件，里面每行的第一个字段就是可用的字体图标名称（比如pending_actions）；material-icons.css文件中也会列出所有带伪类定义的图标名称。
• Angular Material内置SVG图标：打开node_modules/@angular/material/icon/svg-icons目录，每个SVG文件的文件名就是可用的svgIcon ID（比如menu.svg对应svgIcon="menu"）。

方法2：通过npm包版本确认 #

在package-lock.json中搜索material-design-icons，找到对应的版本号，然后直接查看该版本包内的iconfont目录内容（和方法1一致），即可获取该版本下所有可用的图标名称。

三、确保图标正常加载的配置 #

• 字体图标配置：将node_modules/material-design-icons/iconfont下的material-icons.css及相关字体文件（.woff、.woff2等）复制到项目静态资源目录（比如assets/iconfont），然后在index.html中引入本地CSS：

<link href="assets/iconfont/material-icons.css" rel="stylesheet">

• 自定义SVG图标配置：如果需要使用自定义SVG图标，在模块中通过MatIconRegistry注册：

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
  this.iconRegistry.addSvgIcon(
    'custom_pending_actions',
    this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/pending_actions.svg')
  );
}

之后就可以用<mat-icon svgIcon="custom_pending_actions"></mat-icon>调用。

内容的提问来源于stack exchange，提问作者Mohamad Al Asmar