从单个 svg 文件垫图标注册多个 svg 图标

Question

这是当前用于注册自定义 svg 图标的图标服务

export class IconService {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {}
public registerIcons(): void {
this.loadIcons(Object.values(Icons), '../assets/icons');
}
private loadIcons(iconKeys: string[], iconUrl: string): void {
iconKeys.forEach((key) => {
this.matIconRegistry.addSvgIcon(
key,
this.domSanitizer.bypassSecurityTrustResourceUrl(
`${iconUrl}/${key}.svg`
)
);
});
}
}

我没有为每个文件加载 svg，而是使用这种语法将所有 svg 放入一个文件夹中

my-icons.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon_id">
...
</symbol>
</svg>

我希望能够执行以下操作：

...
this.matIconRegistry.addSvgIcon(
key,
this.domSanitizer.bypassSecurityTrustResourceUrl(
`${iconUrl}/my-icons.svg#${key}`
)
);
...

其中每个key都是指向my-icons.svg文件中<symbol id="icon_id">...的 id

Answer 1

你不能做你想做的事，但你可以这样做：

this.matIconRegistry.addSvgIconSet(
this.domSanitizer.bypassSecurityTrustResourceUrl("icon_url.svg")
);

您将按 id 使用图标，如下所示：

<mat-icon svgIcon="id_of_symbol_in_icon_url_svg_file"></mat-icon>