Mat-icon 显示文本 Angular 材料

Question

我正在使用 mat-icon 并且在某些浏览器上，mat-icon 显示文本而不是实际图标，或者它可以在导入图标之前显示文本。 我尝试导入：

@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';

以我的风格。css 但它并没有解决问题。 有没有办法阻止在图标加载之前显示文本，甚至根本不显示文本？

import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDialogModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatOptionModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatStepperModule,
  MatTabsModule,
  MatToolbarModule,
  MatFormFieldModule,
  MatAutocompleteModule
} from '@angular/material';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { UniquePipe } from './pipes/unique/unique.pipe';
import { ConfirmCountryComponent } from './dialogs/confirm-country/confirm-country.component';
import { AutocompleteComponent } from './components/autocomplete/autocomplete.component';
import { ConfirmCountryService } from './dialogs/confirm-country/confirm-country.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatProgressSpinnerModule
  ],
  exports: [
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRippleModule,
    MatIconModule,
    MatSidenavModule,
    MatToolbarModule,
    MatMenuModule,
    MatButtonModule,
    MatListModule,
    MatIconModule,
    MatInputModule,
    MatOptionModule,
    MatSelectModule,
    MatGridListModule,
    MatDialogModule,
    MatStepperModule,
    MatCheckboxModule,
    MatCardModule,
    MatRadioModule,
    MatChipsModule,
    MatTabsModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    ScrollDispatchModule,
    UniquePipe
  ],
  entryComponents: [XXX],
  providers: [XXX],
  declarations: [XXX, XXX, XXX],
  schemas: [XXX]
})
export class AngularMaterialModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AngularMaterialModule,
    };
  }
}```

Answer 1

将以下内容添加到您的 index.html 中：

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

而不是这个：

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

Answer 2

gitHub上有答案，我只是引用最简单的解决方案。

有一个非常简单的解决方法。

如果您自行托管您的素材图标（我建议您使用所有字体） https://google.github.io/material-design-icons # 设置方法 2. 自行托管

你会发现@font-face和.material-icons的2个css片段在@font-face css add font-display: block like this

 @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; ...

这将阻止字体在加载之前显示任何内容。

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Answer 3

我能够通过使用 WebFontLoader 来解决这个问题（基于这个相关问题）。 主要概念是 WebFontLoader 在字体加载或字体加载失败时将各种 css 类应用于 HTML 元素。

这是我设置它的步骤：

1. 使用npm i webfontloader 。 请在此处查看 NPM 中的库。

2. 在我的基础应用程序组件中，我实现了 OnInit 事件处理程序：

  ngOnInit(): void {
    //this applies webfont css classes to material icons while they are loading
    var WebFont = require('webfontloader');
    WebFont.load({
       google: {
          families: [
             'Material Icons',
          ],
       },
    });
  }

注意：WebFontLoader 允许您连接到您在应用程序中加载的任何 fonts。 Material Icon fonts 只是这里的主要关注点。

3. 我将此位添加到我的基本应用程序组件的 css 中：

//this allows us to hide the unstyled text while the icons are loading
::ng-deep .wf-loading, .wf-materialicons-n4-inactive {
  .material-icons {
    display: none
  }
}

注意： ::ng-deep选择器允许我们在应用程序的子组件中应用样式。 对于我的项目，我认为我会在基础组件上完成它，而不必担心使用材质图标的各个组件的样式。

干杯!