如何将Material UI的AddIcon替换为Material Design Icons的字母B图标？

问题分析 #

替换AddIcon为mdiAlphaB后出现的旋转问题，是因为Material Design Icons的部分字母图标默认带有transform旋转样式；同时要匹配原AddIcon的白色描边、黑色填充及右下角定位，需要从样式重置、颜色设置、定位调整三个方面处理。

解决方案代码示例 #

import { CameraAltOutlined } from '@mui/icons-material';
import { Icon } from '@mui/material';
import mdiAlphaB from '@mdi/svg/svg/alpha-b.svg';

// 组合图标组件
const CameraWithLetterB = () => (
  <div style={{ position: 'relative', display: 'inline-block' }}>
    {/* 主相机图标 */}
    <CameraAltOutlined fontSize="large" />
    {/* 右下角的字母B图标 */}
    <Icon
      component={mdiAlphaB}
      sx={{
        position: 'absolute',
        bottom: 0,
        right: 0,
        transform: 'none', // 强制重置默认旋转
        fontSize: '16px', // 匹配原AddIcon的尺寸
        fill: '#000', // 设置黑色填充
        stroke: '#ffffff', // 设置白色描边
        strokeWidth: 2, // 描边宽度适配原加号效果
        strokeLinecap: 'round',
        strokeLinejoin: 'round'
      }}
    />
  </div>
);

export default CameraWithLetterB;

关键调整说明 #

• 重置旋转：通过transform: 'none'覆盖mdiAlphaB默认的旋转变换，确保字母B保持正向显示
• 样式匹配：利用SVG的fill和stroke属性复刻原AddIcon的白描黑底效果，调整strokeWidth保证描边粗细一致
• 定位控制：用相对定位容器包裹主图标，字母B设为绝对定位并通过bottom: 0和right: 0固定在右下角，和原AddIcon的位置完全对齐

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