如何在Next.js v13.2项目中添加Material Symbols图标？

方法一：使用App Router的Metadata API（推荐） #

在app/layout.tsx中通过Metadata对象管理资源链接，这是Next.js 13 App Router的标准做法：

import type { Metadata } from 'next';

// 定义站点元数据
export const metadata: Metadata = {
  title: 'Project Name',
  links: [
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=optional',
    },
  ],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

方法二：修正head.tsx的写法 #

如果你仍想使用head.tsx，需要移除重复的precedence属性并确保标签正确闭合：

// app/head.tsx
export default function Head() {
  return (
    <>
      <title>Project Name</title>
      <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=optional"
        rel="stylesheet"
      />
    </>
  );
}

问题原因说明 #

你之前的代码中重复声明了precedence属性，这会导致Next.js处理样式链接时出现异常，无法正确加载Material Symbols的样式表，从而刷新页面时只显示图标名称而非图标本身。

验证使用 #

完成配置后，即可按预期方式使用图标：

<span className="material-symbols-rounded">face</span>

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