material图标集允许把多个图标分组到一个单一的 SVG 文件中。它可以通过创建一个单根 <svg>
标记来完成,该标记在其 <defs>
部分包含多个内嵌的 <svg>
标记。 每个内嵌标记都带有一个 id
属性,该属性就会用作图标的名字。
图标集使用 MatIconRegistry
的 addSvgIconSet
、addSvgIconSetInNamespace
、addSvgIconSetLiteral
或 addSvgIconSetLiteralInNamespace
方法进行注册。 当注册了图标集之后,每个内嵌的图标都可以通过它们的 id
属性进行访问。要显示图标集中的某个图标, 只要像单独注册的图标那样使用输入属性 svgIcon
就可以了。
多个图标集可以注册进同一个命名空间。如果一个图标的 id 出现在多个图标集中,就会使用最近注册的图标集中的图标
DomSanitizer是用来标记信任路径的(angular默认开启XSS过滤)
import {MatIconRegistry} from '@angular/material; import {DomSanitizer} from "@angular/platform-browser"; export class AppModule { constructor(private iconRegistry: MatIconRegistry,private domSanitizer:DomSanitizer){ iconRegistry.addSvgIconSetInNamespace(namespace名,domSanitizer.bypassSecurityTrustResourceUrl(图标库路径)) } }
使用时
<mat-icon svgIcon="namespace:iconName"></mat-icon>