Mat-icon 显示文本 Angular Material答案

【问题标题】：Mat-icon shows text Angular MaterialMat-icon 显示文本 Angular Material
【发布时间】：2020-09-20 13:34:40
【问题描述】：

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

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

到我的 style.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,
    };
  }
}```

【问题讨论】：

什么浏览器？？
根据这个例子：stackblitz.com/angular/aalakaknjdkj?file=src%2Findex.html尝试在@import中使用这个链接：https://fonts.googleapis.com/icon?family=Material+Icons&display=block

标签： css angular angular-material

【解决方案1】：

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

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

而不是这个：

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

【讨论】：

奇怪的是，执行与您建议相反的操作为我解决了问题。我一直在使用该链接，但我需要切换到 @import。

【解决方案2】：

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

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

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

你会发现 @font-face 和 .material-icons 的 2 个 css sn-ps 在 @font-face css 添加字体显示：像这样块
@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

【讨论】：

【解决方案3】：

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

这是我设置它的步骤：

使用npm i webfontloader 安装 WebFontLoader。查看 NPM 中的库here。
在我的基础应用组件中，我实现了 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 允许您连接到您在应用中加载的任何字体。 Material Icon 字体只是这里的主要关注点。

我将此位添加到我的基本应用程序组件的 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 选择器允许我们在应用程序的子组件中应用样式。对于我的项目，我认为我会在基础组件上完成，而不必担心使用材质图标的各个组件的样式。

干杯！

【讨论】：