如何将MUI填充图标替换为轮廓版本？

核心原理 #

MUI图标组件中，细轮廓版本的命名规则是在填充版图标名称后加上Outlined后缀，比如填充版Group对应轮廓版GroupOutlined，Article对应ArticleOutlined。

具体修改方案 #

方案一：修改icon字符串属性（适配现有DrawerItem逻辑） #

如果你的DrawerItem组件通过字符串名称映射图标组件，只需修改icon属性值为带Outlined后缀的驼峰名称：

const drawer = (
  <div>
    <div className="drawer-container">
      <div className="menu-container mt-8">
        <List>
          <div>
            <DrawerItem name="Users" link="/view-users" icon="groupOutlined" subItems={userChildren} />
          </div>
          <div>
            <DrawerItem name="Forms" icon="articleOutlined" link="/home" />
          </div>
          <div>
            <DrawerItem name="Organisations" icon="groupsOutlined" link="/organisations" />
          </div>
        </List>
      </div>
    </div>
  </div>
);

同时需要在DrawerItem组件中更新图标映射，确保导入并关联对应的轮廓图标：

// 在DrawerItem组件文件中
import { GroupOutlined, ArticleOutlined, GroupsOutlined } from '@mui/icons-material';

const iconMap = {
  // 保留原有填充版映射（如果需要）
  group: Group,
  article: Article,
  groups: Groups,
  // 添加轮廓版映射
  groupOutlined: GroupOutlined,
  articleOutlined: ArticleOutlined,
  groupsOutlined: GroupsOutlined,
};

// 渲染图标时使用映射后的组件
const IconComponent = iconMap[props.icon];
return <IconComponent />;

方案二：直接传入图标组件（更直观灵活） #

跳过字符串映射，直接将MUI轮廓图标组件作为icon属性传入，无需修改DrawerItem内部逻辑：

首先导入需要的轮廓图标：

import { GroupOutlined, ArticleOutlined, GroupsOutlined } from '@mui/icons-material';

然后修改drawer中的DrawerItem：

const drawer = (
  <div>
    <div className="drawer-container">
      <div className="menu-container mt-8">
        <List>
          <div>
            <DrawerItem name="Users" link="/view-users" icon={<GroupOutlined />} subItems={userChildren} />
          </div>
          <div>
            <DrawerItem name="Forms" icon={<ArticleOutlined />} link="/home" />
          </div>
          <div>
            <DrawerItem name="Organisations" icon={<GroupsOutlined />} link="/organisations" />
          </div>
        </List>
      </div>
    </div>
  </div>
);

通用规则 #

后续替换其他图标时，只需遵循：填充版图标名称 + Outlined = 轮廓版图标名称，比如：

• Home → HomeOutlined
• Settings → SettingsOutlined
• Mail → MailOutlined

内容的提问来源于stack exchange，提问作者Jennifer De Goede