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

Question

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

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

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

Answer 1

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,[email protected],100..700,0..1,-50..200&display=block" />

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