React中MUI图标动态加载失效，如何实现动态渲染？

前两种方式失效的核心原因 #

你用<span className="material-symbols-outlined">menu</span>和<Icon>terminal</Icon>显示纯文本，本质是没有正确加载Material Icons字体资源，浏览器无法将文本映射为图标字形。

可行解决方案 #

方案1：基于Material Symbols字体的动态渲染（轻量） #

1. 安装字体依赖（替代外链，避免跨域问题）：

npm install @fontsource/material-symbols-outlined

2. 在项目入口文件（如index.js/App.js）引入字体：

import '@fontsource/material-symbols-outlined';

3. 动态渲染图标：
   从JSON文件获取图标名称后，直接渲染：

// 假设从JSON读取的图标名称存在iconName变量中
<span className="material-symbols-outlined">{iconName}</span>

可根据需求调整类名（比如material-symbols-rounded对应圆角风格，material-symbols-sharp对应尖锐风格）。

方案2：基于MUI Icon组件的动态渲染 #

1. 确保已安装@mui/material和字体依赖（同方案1的字体引入步骤）。
2. 导入Icon组件并动态使用：

import Icon from '@mui/material/Icon';

// 动态渲染
<Icon className="material-symbols-outlined">{iconNameFromJSON}</Icon>

这种方式可复用MUI Icon组件的样式属性（如fontSize、color）。

方案3：动态导入独立MUI图标组件（适合需要完整MUI图标特性的场景） #

如果必须使用@material-ui/icons下的独立组件，可通过映射表+动态导入实现：

1. 创建图标映射文件iconMap.js：

export const iconMap = {
  menu: () => import('@material-ui/icons/Menu'),
  terminal: () => import('@material-ui/icons/Terminal'),
  // 按需添加需要动态加载的图标
};

2. 封装动态图标组件：

import React, { lazy, Suspense } from 'react';
import { iconMap } from './iconMap';

const DynamicMuiIcon = ({ name, ...props }) => {
  const IconComponent = lazy(iconMap[name]);
  return (
    <Suspense fallback={<span>加载中...</span>}>
      <IconComponent {...props} />
    </Suspense>
  );
};

export default DynamicMuiIcon;

3. 使用组件：

// 从JSON读取图标名称后传入
<DynamicMuiIcon name={iconNameFromJSON} fontSize="large" color="primary" />

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