尽管仔细按照 https://www.youtube.com/watch?v=wI6kQAORiVg 上看到的步骤进行操作，但我还是无法在我的 Angular 页面中显示mat-icon。请帮助我了解我哪里出错了。
以下是我尝试向我的 Angular 页面添加图标时所采取的步骤。
我首先将样式表链接添加到我的角度索引.html页面
.../src/index.html
<head>
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/logo.png">
<!-- Stylesheet -->
<link rel="stylesheet" href="assets/sax/css/base/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
.../src/app/app.moudule.ts
app.moudule.ts文件中的代码如下所示：
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
MatIconModule,
MatTabsModule
} from '@angular/material';
@Injectable()
export class Http {}
@NgModule({
imports: [
BrowserAnimationsModule,
MatIconModule,
AgmCoreModule.forRoot({
apiKey: 'xxx',
libraries: ["places"]
}),
MatTabsModule,
MatToolbarModule
],
declarations: [ AppComponent, MainComponent],
providers: [RoutingState, AppService {provide: Http, useValue: axios}],
bootstrap: [ AppComponent ]
})
export class AppModule { }
最后，生成的 HTML 应用页面：
.../src/app/main/staff/initiation/initiation.component.html
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
</section>
要正确配置mat-icon，您需要导入MatIconModule并包含字体，这两种字体都已经完成。您的mat-icon无法正常工作的原因是它没有在您的 HTML 中正确使用。
要使其正常工作，您需要在mat-icon标记之间添加字符串。要正确显示thumb_up图标，请尝试此操作。
<mat-icon aria-hidden="false" aria-label="Example thumbs up SVG icon">thumb_up</mat-icon>
在此处搜索可用图标，并将thumb_up文本替换为所需的图标。
我知道让mat-icon工作的方式是像这样使用它;
<mat-icon>alarm</mat-icon>
。这是所需图像的标记之间的字符串标识符。其余设置似乎没问题。
希望这有帮助。
编辑
表面上，您可以在MatIconRegistry服务中注册 svgIcons。您的示例显然基于这种方法;
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
}
上面的代码取自角度材料图标示例。我想我仍然更喜欢使用我的第一个答案中描述的字符串文字。