谷歌素材图标加载缓慢，从文本到图标闪烁答案

【问题标题】：google material icons loading slowly, flicker from text to icon谷歌素材图标加载缓慢，从文本到图标闪烁
【发布时间】：2018-11-27 10:30:18
【问题描述】：

使用Setup Method 2 self hosting 为我们的 React 项目安装 Google Material 图标，与图标关联的连字有时会显示在材料图标之前。

<i class="material-icons">face</i> {/* shows text "face" on site prior to proper material icon load */}

例如，上面的行会在显示人脸之前先显示“人脸”一秒钟。我们如何才能延迟 UI 渲染，直到文件引用完全加载？

/*material icons file references loaded locally */
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
      src: local('Material Icons'), local('MaterialIcons-Regular'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
    }

【问题讨论】：

标签： reactjs material-design

【解决方案1】：

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

您可以使用font-display: block;，只需将此 CSS 添加到您的 HTML 头部：

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

更多信息font-display

【讨论】：