Angular 6-mat-icon-rtl-mirror没有渲染图标

Question

我正在使用官方角度材料站点上的文档来实现树导航。使用“ mat-icon-rtl-mirror” CSS类渲染图标时，浏览器将显示图标的名称，而不是实际的图像。

<mat-icon class="mat-icon-rtl-mirror">
      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>

我得到的结果就是这样

实际上应该是这样

我还附加了我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { MatButtonModule, MatCheckboxModule, MatIconModule} from '@angular/material';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DemoMaterialModule} from '../material-module';
import { MatTreeModule } from '@angular/material/tree';

import {TreeChecklistExample} from './asset-navigation/asset-navigation';

@NgModule({
  declarations: [
    AppComponent,
    TreeChecklistExample
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    ReactiveFormsModule,
    MatButtonModule, 
    MatCheckboxModule, 
    MatTreeModule, 
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我该如何解决？

Answer 1

将此添加到您的index.html文件

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">