Angular Material Icons Displays Icon Name Before Icon Renders

Question

What supposed to be the problem when the angular material icons renders the icon name first before the icon itself renders. I hosted the angular material icon online and I have a stable internet connection and I think this is not supposed to be the problem. I also already hosted the angular material icons offline, check for the path directories of the material icon css, however, the problem still persist. It renders the icon name then after a moment when the view renders, it then renders the icon itself.

Below is the actual image of my problem. The icon name renders first before the icon itself. Please let me know if there are any solutions like if i can hide the icon name before the icon itself renders because it's really affects the design.

This is how i display the icon.

<mat-icon>home</mat-icon>

Answer 1

have you heard of using rel=preconnect to establish network connections early and increase performance.

Adding rel=preconnect to a <link> informs your browser that your page intends to establish a connection to another domain, and that you like the process to start asap. This wil load more quickly because the setup process has already been completed by the time the browser requests them.

try this one

<link rel="preconnect" href="http://example.com">