Material Icons のフォントを、Google Fonts から利用する際、以下ののようにスタイルシートの参照を書くことがあります。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
しかし場合によっては、以下のように Material Icons を利用する HTML が、ページ初期表示よりあとでユーザー操作によってなど動的に表示される場合、
<span class="material-icons">home</span>
一瞬、Material Icons フォントで表示されずに生の "home" の文字が見えてしまい、
home
それから Material Icons フォントの読み込みが完了して、ようやく🏠の字形として表示されるようになることがあります。
🏠️
王道的には、Material Icons をセルフホストして、かつ、フォントの先読みを組み込んでおくのがよいのだろうと思います。しかし場合によってはそこまでのチューニングまでは求めず、とりあえず急ぎ上記のようなチラツキをなくしたい、とにかく手軽にすませたい、ということがあるかもしれません。
そんな場合は、Google Fonts からのスタイルシート参照の URL に、display=block のクエリ文字を継ぎ足してください。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" />
以上で読み込まれるスタイルシート定義に font-display: block; の CSS プロパティ設定が追加され、フォントが読み込まれるまで描画が発生しなくなり、ひとまずはチラツキの発生は抑止されます。
パフォーマンス的には最善ではありませんが、手軽にチラツキを抑えられるので、簡単なサンプルプログラムの実装中などに便利ですね。