Next.js项目中Google Material Icons CDN无法正常使用求助

排查与修复方案 #

• 确认图标使用格式
  Material Icons必须配合指定类名使用，正确写法示例：

  <span class="material-icons">home</span>
  

  注意类名material-icons不能省略，图标名称需用小写字符串形式（而非图标编码）。

• 检查CDN加载状态
  打开浏览器开发者工具（F12）的「网络」面板，刷新页面后搜索fonts.googleapis.com，确认请求状态为200。若请求失败，可尝试更换CDN链接格式，或考虑本地引入图标资源。

• 更新CDN链接格式
  替换_document.js中的link标签为Google推荐的最新格式：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons" />
  

• 尝试页面级Head引入
  部分场景下_document.js的全局Head可能未被正确渲染，可在具体页面通过next/head引入：

  import Head from 'next/head';
  
  export default function Home() {
    return (
      <>
        <Head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons" />
        </Head>
        <span class="material-icons">home</span>
      </>
    );
  }
  

• 清除浏览器缓存
  按Ctrl+Shift+R强制刷新页面，或在开发者工具中勾选「禁用缓存」后重新加载，排除旧缓存导致的资源加载异常。

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