我已经解决了使用 DomSanitizer 和 MatIconRegistry 库将 SVG 图标添加到 app.component.ts 的问题。
app.component.ts
import { Component, OnInit } 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.scss']
})
export class AppComponent implements OnInit {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.matIconRegistry.addSvgIcon(
`icon-1`,
this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/icon-1.svg")
);
this.matIconRegistry.addSvgIcon(
`icon-2`,
this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/icon-2.svg")
);
this.matIconRegistry.addSvgIcon(
`icon-3`,
this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/icon-3.svg")
);
.
.
.
}
ngOnInit() {
}
}
然后在组件的 html 中添加如下图像:
myComponent.component.html
<ul>
<li>
<a href="#">
<mat-icon svgIcon="icon-1"></mat-icon>
<span>Icon 1</span>
</a>
</li>
<li>
<a href="#">
<mat-icon svgIcon="icon-2"></mat-icon>
<span>Icon 2</span>
</a>
</li>
<li>
<a href="#">
<mat-icon svgIcon="icon-3"></mat-icon>
<span>Icon 3</span>
</a>
</li>
</ul>