如何在MUI Joy中使用图标？引入@mui/icons-material时遇报错

问题根源 #

@mui/icons-material依赖@mui/material的内部工具模块，但当前项目中两者版本不兼容，或依赖安装不完整，导致工具函数找不到、文件缺失的报错。

可行解决方法 #

1. 统一MUI相关包版本 #

• 先卸载现有冲突依赖：

npm uninstall @mui/icons-material @mui/material

• 查看package.json中@mui/joy-ui的版本号，安装完全匹配版本的@mui/icons-material和@mui/material：
  比如@mui/joy-ui版本为5.0.11，则执行：

npm install @mui/icons-material@5.0.11 @mui/material@5.0.11

2. 直接使用SVG图标替代 #

无需依赖@mui/icons-material，直接引入自定义SVG图标：

import { Box, ListItemDecorator, Tab, TabList, Tabs } from "@mui/joy";
// 引入本地SVG文件（注意替换为你的图标路径）
import PhoneIcon from './assets/phone.svg';

function MyPage() {
  return (
    <Box width="100vw" height="100vh" bgcolor={"red"}>
      <Tabs orientation="vertical">
        <TabList variant="soft" color="neutral">
          <Tab>
            <ListItemDecorator>
              {/* 设置图标尺寸 */}
              <PhoneIcon style={{ width: 24, height: 24 }} />
            </ListItemDecorator>
            Favorite
          </Tab>
          <Tab>test</Tab>
          <Tab>test</Tab>
        </TabList>
      </Tabs>
    </Box>
  );
}

export default MyPage;

注：原代码中width="100wh"是无效值，改为100vw才能正确占满视口宽度。

3. 清理依赖缓存后重装 #

若为缓存或安装异常导致的文件缺失：

# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装所有依赖
npm install

验证方式 #

重启项目后，检查图标是否正常渲染，控制台是否还有报错。

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