时间戳

首页 > 解决方案 > 如何正确配置材质图标组件以显示图标？

angular - 如何正确配置材质图标组件以显示图标？

问题描述

尽管仔细按照https://www.youtube.com/watch?v=wI6kQAORiVg上的步骤进行操作，但我无法mat-icon在我的 Angular 页面中显示。请帮助我了解我哪里出错了。

以下是我在尝试向我的 Angular 页面添加图标时采取的步骤。

我首先将样式表链接添加到我的角度 index.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>

标签： angularangular-material

解决方案

要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文本替换为您想要的图标。

推荐阅读