导入Material-UI部分图标时出现Module not found错误该如何解决

• 你安装的是v4版本的@material-ui/icons图标包，VolunteerActivism、AdminPanelSettings这类图标是MUI v5版本才新增的，旧版v4包未收录这些图标，因此会触发模块找不到的报错。
• 若你已经安装了v5版本的图标包，依旧使用@material-ui/icons/的旧路径导入，也会出现该报错。
• 少见情况：图标名称拼写、大小写不符合规范，MUI图标导入统一使用大驼峰命名，拼写错误也会触发找不到模块的提示。

方案1：升级到MUI v5（推荐） #

适用于项目可以升级MUI版本的场景：

• 先卸载旧版图标包：

npm uninstall @material-ui/icons
# 用yarn的用户执行
yarn remove @material-ui/icons

• 安装v5版本的相关依赖：

npm install @mui/icons-material @mui/material @emotion/react @emotion/styled
# 用yarn的用户执行
yarn add @mui/icons-material @mui/material @emotion/react @emotion/styled

• 修改导入语句的路径，示例如下：

// 旧写法 弃用
// import VolunteerActivism from '@material-ui/icons/VolunteerActivism'
// 新写法
import VolunteerActivism from '@mui/icons-material/VolunteerActivism'
import AdminPanelSettings from '@mui/icons-material/AdminPanelSettings'

方案2：保留v4版本的兼容处理 #

若当前项目不适合升级到v5，可以用以下方式处理：

• 自行获取对应图标的SVG源码，在项目内封装成本地的图标组件使用
• 选择v4版本已收录的、功能含义相近的图标替代缺失的新图标

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