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選擇器允許我們在應用程序的子組件中應用樣式。 對於我的項目，我認為我會在基礎組件上完成它，而不必擔心使用材質圖標的各個組件的樣式。

干杯!