cssfrontendgoogle-font-api

Icon button show text at initial rendering before loading - google fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<span class="material-symbols-outlined">
delete
</span>

enter image description here

Initial phase its showing raw text and then after some time its display the icon, How can we fix this?

Solution

  • You can set display in the params, which does the same thing as CSS font-display property does.

    Read more here.

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />

<span class="material-symbols-outlined">
delete
</span>