When loading the page I get a breaf text displaying the name of each icon

[c0d3x]

What are the best solution using "material-symbols": "^0.27.2" to hide the text until the font is rendered?

[CarlosEGuerraSilva]

This issue isn't related to Material Symbols itself

You'll need to set font-display: swap; in your @font-face block

That will prevent icons be rendered with a default font (like Times New Roman or 'serif') while font is being downloaded, but instead you'll get a "pop" effect because any icon won't appear unless the whole font get downloaded so, additionally you may want to:

• Preload the font
• Cache font and just update it only when needed

Take a look here: https://web.dev/articles/optimize-webfont-loading