'Material Icon showing as the name when site first loads

There is an issue with Angular 7 and materials icon where the name of the icon shows when the site is initially loading.

Is there a way to prevent this

enter image description here



Solution 1:[1]

Add your stylesheet reference to <head>

If you stylesheet for Material or for the Material Icons is located lower in the index.html file or is lazy loaded, there will be a brief moment where the text for the icon is displayed rather than the icon itself.

In you index.html add this between the <head></head> tags:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tony Brasunas