React项目中Google Material Icons首次加载问题求助

以下是几个可行的解决方案，按推荐优先级排序：

1. 改用SVG图标组件（最推荐） #

放弃字体图标，直接使用SVG格式的图标组件，从根源上避免字体加载带来的闪烁问题。比如使用@mui/icons-material包按需导入单个图标：

// 只导入需要的图标，减少打包体积
import PieChartIcon from '@mui/icons-material/PieChart';

// 在组件中直接使用
<PieChartIcon />

SVG图标是直接渲染的矢量图形，不存在字体加载延迟的问题，带宽较小时也能更快渲染，还支持自定义颜色、大小等样式，灵活性更高。

2. 监听字体加载状态，控制图标渲染 #

利用浏览器的FontFace API或document.fonts.ready判断字体是否加载完成，在加载完成前不渲染图标或显示占位符：

方法一：使用FontFace API手动加载并监听 #

import { useEffect, useState } from 'react';

const MaterialIcon = ({ name }) => {
  const [fontReady, setFontReady] = useState(false);

  useEffect(() => {
    const loadFont = async () => {
      try {
        // 替换为对应字体的woff2链接（可从Google Fonts获取）
        const font = new FontFace(
          'Material Symbols Rounded',
          'url(https://fonts.gstatic.com/s/materialsymbolsrounded/v132/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2)'
        );
        await font.load();
        document.fonts.add(font);
        setFontReady(true);
      } catch (err) {
        // 加载失败时允许渲染，避免永久阻塞
        setFontReady(true);
      }
    };

    loadFont();
  }, []);

  // 加载完成前返回null或自定义占位符
  if (!fontReady) return null;

  return <span className="material-symbols-rounded">{name}</span>;
};

// 使用示例
<MaterialIcon name="pie_chart" />

方法二：利用document.fonts.ready检查 #

import { useEffect, useState } from 'react';

const MaterialIcon = ({ name }) => {
  const [isFontLoaded, setIsFontLoaded] = useState(false);

  useEffect(() => {
    const verifyFont = async () => {
      await document.fonts.ready;
      // 验证目标字体是否可用
      const fontAvailable = await document.fonts.check('1em "Material Symbols Rounded"');
      setIsFontLoaded(fontAvailable);
    };

    verifyFont();
  }, []);

  return (
    <span 
      className="material-symbols-rounded"
      style={{ visibility: isFontLoaded ? 'visible' : 'hidden' }}
    >
      {name}
    </span>
  );
};

3. 自托管字体并优化加载 #

如果坚持使用字体图标，自托管是解决加载问题的根本方案，配合预加载和font-display: block可以最大程度减少闪烁：

1. 下载字体文件：从Google Fonts下载Material Symbols Rounded的woff2格式字体文件。
2. 配置@font-face：

@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('/fonts/material-symbols-rounded.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block; /* 阻止 fallback 文本显示，直到字体加载完成 */
}

3. 添加预加载：在HTML头部添加预加载标签，让浏览器优先加载字体文件：

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

这种方式可以避免依赖外部CDN的加载延迟，完全掌控字体加载流程。

内容的提问来源于stack exchange，提问作者gerikov