如何自定义Material UI图标 为内置图标添加加号元素

不用修改图标源码，用MUI自带的Badge组件做叠层角标是维护成本最低、适配性最好的方案，5个图标可以统一封装复用，不用单独写重复样式。

具体实现 #

• 先引入依赖和需要用到的图标

import { Badge, styled } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
// 引入需要加标识的5个图标
import ApartmentIcon from '@mui/icons-material/Apartment';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import WebIcon from '@mui/icons-material/Web';
import AssessmentIcon from '@mui/icons-material/Assessment';
import DescriptionIcon from '@mui/icons-material/Description';

• 封装统一的带加号角标的图标包装组件，全局统一样式配置

// 统一配置加号角标的位置、尺寸、颜色，所有图标复用这套规则
const IconAddBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    right: 2,
    top: 18,
    padding: 0,
    minWidth: 0,
    width: 14,
    height: 14,
    borderRadius: '50%',
    backgroundColor: theme.palette.primary.main, // 自定义加号背景色
    color: '#ffffff', // 自定义加号本身的颜色
    '& svg': {
      width: 12,
      height: 12
    }
  }
}));

// 通用带加号图标组件，传入原始MUI图标即可
const IconWithPlus = ({ IconComponent, ...iconProps }) => {
  return (
    <IconAddBadge
      badgeContent={<AddIcon />}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
    >
      <IconComponent {...iconProps} />
    </IconAddBadge>
  );
};

• 业务代码中直接调用，所有图标样式自动统一

// 使用示例
export default function Page() {
  return (
    <div style={{ display: 'flex', gap: 20, padding: 20 }}>
      <IconWithPlus IconComponent={ApartmentIcon} fontSize="large" />
      <IconWithPlus IconComponent={CameraAltIcon} fontSize="large" />
      <IconWithPlus IconComponent={WebIcon} fontSize="large" />
      <IconWithPlus IconComponent={AssessmentIcon} fontSize="large" />
      <IconWithPlus IconComponent={DescriptionIcon} fontSize="large" />
    </div>
  );
}

适配调整说明 #

• 如果加号位置和预期截图有偏移，直接修改IconAddBadge样式里的right、top数值即可：数值越大，加号越往图标左下角偏移。
• 如果不需要圆形背景的加号，直接删除borderRadius、backgroundColor配置，把color改成你需要的加号颜色，就能实现无背景的加号叠加效果。
• 不要修改MUI内置图标的path源码，后续MUI版本升级很容易出现兼容问题，叠层方案完全不侵入原始图标组件，维护成本最低。

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