How to prevent material icon text from showing up when Google's JS fails to convert them?

David picture David · Jan 18, 2017 · Viewed 16.5k times · Source

How do you prevent material icon text from showing up when Google's JS fails to convert them to icons?

Icons are defined in markup as such:

<span class="material-icons">icon_name</span>

Example: https://archive.fo/CKqKG/scr.png (see the top row of buttons).

Material Icons Documentation: https://material.io/icons/

This is also an issue in Google search where Google will actually read and save the div's text instead of ignoring it.

Example: https://i.imgur.com/TixS06y.png

I understand that one solution is to simply switch to .PNGs (supplied by Google). I'd like to do whatever results in less (network) load on the user's system.

Thanks!

Answer

Fareed Alnamrouti picture Fareed Alnamrouti · Nov 14, 2018

you can use font-display: block;, just add this CSS to your HTML head:

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

for more information font-display