Question

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

以下是我尝试向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>

Answer 1

要正确配置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>

搜索可用的图标here，并将thumb_up文本替换为所需的图标。

Answer 2

我知道让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'));
  }

以上代码取自angular material icon examples。我想我还是更喜欢使用第一个答案中描述的字符串文字。

如何正确配置材料图标组件以显示图标？

2 个答案: