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

Answer 1

在您的

src 文件夹中创建一个名为 preload.js 的文件。

document.fonts.load('10pt "Material Icons"').then(function () {
  console.log('Material Icons font has been preloaded.');
});

在

index.html 中的 head 部分末尾添加以下脚本标签

<script defer src="%PUBLIC_URL%/preload.js"></script> React 组件中的用户像这样

import Icon from '@material-ui/core/Icon';

 function MyComponent() {
   return <Icon>home</Icon>;
 }

希望它有效

Answer 2

只需使用带有链接标记的“预加载”：

<link rel="preload" href="./material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin>

Answer 3

来自

Google JS 转换失败时如何防止素材图标文本显示？:

你可以使用

font-display: block;

，只需将此CSS添加到你的HTML头中：

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

了解更多信息

字体显示