Angular 6 - mat-icon-rtl-mirror не отображает значок

Question

Я реализую древовидную навигацию, используя документацию с официального сайта угловых материалов При использовании CSS-класса «mat-icon-rtl-mirror» для отображения значка браузер отображает имя значка, а не фактическое изображение.

<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">