如何在React项目中正确添加多个Google Material Icons图标名称？

你遇到的问题是因为多图标名称的分隔符用错了——Google Material Symbols的icon_names参数不能用逗号分隔，正确的分隔符是竖线|。

正确的导入写法 #

把你的link标签改成这样：

<!-- Google Material Symbols & Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=translate|account_circle" />

为什么逗号不行？ #

URL参数里的逗号虽然是合法字符，但Google的字体API对icon_names参数的解析规则是用竖线来区分多个图标，直接写逗号会被当成图标名称的一部分，导致API无法识别正确的图标，自然加载不出来。

验证用法 #

在React组件里可以这样使用图标：

function App() {
  return (
    <div>
      <span className="material-symbols-outlined">translate</span>
      <span className="material-symbols-outlined">account_circle</span>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Emma Lövgren