React中通过CDN引入material-icons不显示图标仅显示文本如何解决？

核心原因 #

1. 缺少对应风格的Material Icons字体资源：Material Icons基于字体实现图标渲染，你使用的material-icons-outlined是轮廓风格的类名，没有引入对应字体资源时，浏览器会直接把图标编码识别为普通文本展示。
2. 配置文件格式错误：如果存储LeftbarTop数组的文件后缀为.js/.ts而非.jsx/.tsx，文件内书写的JSX标签不会被React正确编译，会直接输出为文本内容。

修复步骤 #

• 检查项目入口HTML（通常为public/index.html），在<head>标签内添加Material Icons Outlined版本的官方字体引入代码，确保字体资源正常加载。
• 确认存储LeftbarTop配置的文件后缀为.jsx或.tsx，保证内部JSX代码可以被正常编译。

优化建议（可选） #

不建议在配置数组中直接写入JSX元素，可改为存储图标名称字符串，在渲染组件中统一生成图标标签，降低配置与组件的耦合度：

1. 修改配置文件代码：

export const LeftbarTop = [
  {
    id: 1,
    name: "Apps",
    icon: "widgets",
  },
  {
    id: 2,
    name: "Help",
    icon: "help_outline",
  },
];

2. 修改LeftList组件代码：

function LeftList ({arr}){
return (
    <div >
       <div ><span className="material-icons-outlined">{arr.icon}</span></div>
        {arr.name && <label>{arr.name}</label>}
    </div>
)
}

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