Mat-icon shows text Angular Material

Question

I'm using mat-icon and on some browsers, the mat-icon shows the text instead of the actual icon or it can show the text until the icon is being imported. I tried to import:

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

to my style.css but it didn't solve the issue. Is there a way to prevent showing the text until icon loaded or even not showing text at all?

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,
    };
  }
}```

According to this example:https://stackblitz.com/angular/aalakaknjdkj?file=src%2Findex.html try to use this link in the `@import` :`https://fonts.googleapis.com/icon?family=Material+Icons&display=block` — לבני מלכה, Jun 02 '20 at 06:31

score 7 · Answer 1 · answered Jun 02 '20 at 06:40

7

Add the following to your index.html:

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

instead of this:

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

answered Jun 02 '20 at 06:40

upinder kumar

819
6
8

Oddly enough, doing the opposite of what you suggest fixed the problem for me.I had been using the link, but switching to @import is what I needed. – kshetline May 24 '21 at 17:47

score 2 · Answer 2 · answered Nov 12 '20 at 12:29

There are answers on gitHub, i just cite the simplest solution.

There's a really straightforward fix for this.

If you self-host your material icons (which I recommend doing with all your fonts) https://google.github.io/material-design-icons # Setup Method 2. Self hosting

You'll find 2 css snippets of @font-face and .material-icons In the @font-face css add font-display: block like this
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  ...
This will stop the font from showing anything until it loads.

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

score 0 · Answer 3 · answered Nov 24 '21 at 16:19

I was able to solve this by using WebFontLoader (based on this related question). The main concept is WebFontLoader applies various css classes to the HTML element as the font is loading or if the font fails to load.

Here's the steps I took to get it set up:

Install WebFontLoader using npm i webfontloader. See the library in NPM here.
In my base app component, I implemented the OnInit event handler:

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

Note: WebFontLoader allows you to hook into any of the fonts that you're loading in your app. The Material Icon fonts are just the primary concern here.

I added this bit into my base app component's 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
  }
}

Note: The ::ng-deep selector allows us to apply the styling in the sub components of the app. For my project, I figure I'd do it at the base component and not have to worry about styling the individual components that used material icons.

Cheers!

Mat-icon shows text Angular Material

3 Answers3