구글 Material Icons을 웹에서 사용할 때 
이렇게 사용하라고 명시되어 있습니다.
https://fonts.googleapis.com/icon?family=Material+Icons

[code]
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<span class="material-icons">store</span>
[/code]

그런데, 문제점은 웹폰트를 로딩하기 전에는 
아이콘이 나오지 않으므로 
위의 예시에서 store 텍스트가 랜더링된 후 
웹폰트가 로딩되면 아이콘이 랜더링 되죠. 

웹폰트 로딩 전

웹폰트 로딩 후

웹폰트 로딩 전까지 텍스트가 나타나지 않게 하려면
font-display 속성을 이용하면 됩니다만 ( font-display: block; )
구글 웹폰트에서는 font-display에 대한 파라메터를 제공하고 있습니다. (display=block)
(다른 구글 웹폰트에서는 display=swap을 기본으로 안내하고 있습니다.)
https://fonts.googleapis.com/icon?family=Material+Icons&display=block

[code]
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
<span class="material-icons">store</span>
[/code]

웹폰트 로딩 전

웹폰트 로딩 후

----------

참고

# Google Material Icons
https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts

# Google Material Icons Resource
https://fonts.google.com/icons
https://material.io/resources/icons/?icon=settings_input_composite&style=baseline

# CSS font-display
https://developer.mozilla.org/ko/docs/Web/CSS/@font-face/font-display

# NAVER D2 폰트 디스플레이에 대한 자세한 설명 (꼭 읽어보세요)
https://d2.naver.com/helloworld/4969726