如何为MaterialUI Button的startIcon属性设置自定义图标

你遇到的问题很典型——直接导入SVG文件时，Webpack默认会把它解析成文件路径字符串，而不是React可渲染的组件，所以Button的startIcon显示的是路径而非图标。下面给你几种可行的解决方案：

方法一：使用ReactComponent导入（Create React App 2.0+ 内置支持） #

Create React App从2.0版本开始内置了@svgr/webpack，可以直接把SVG作为React组件导入，只需要修改你的导入语句：

// 注意这里的ReactComponent别名，这是关键
import { ReactComponent as EditIcon } from '../../../assets/icons/edit.svg';

// 然后在Button中正常使用，注意要用<></>包裹组件
<Grid item>
  <Button variant="outlined" startIcon={<EditIcon />}>
    custom
  </Button>
</Grid>

这样导入后，EditIcon就是一个标准的React组件，完全符合startIcon接收React节点的要求。

方法二：手动将SVG封装为React组件 #

如果你的项目没有配置SVG loader，或者想更灵活控制图标的样式（比如动态修改颜色、尺寸），可以把SVG代码直接封装成React组件：

先创建EditIcon.js文件：

import React from 'react';

const EditIcon = (props) => (
  <svg 
    {...props} // 允许外部传递样式、尺寸等属性
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 32 32"
    fill="currentColor" // 继承父元素颜色，适配Material UI主题
  >
    {/* 只保留实际显示的图标路径，去掉原SVG里的辅助参考层，减少冗余代码 */}
    <path d="M26.25,9.66l-3.94-3.87c-0.39-0.38-1.01-0.38-1.4,0L5.75,20.74c-0.19,0.19-0.3,0.44-0.3,0.71v4.04c0,0.55,0.45,1,1,1h3.73c0.26,0,0.51-0.1,0.7-0.29l15.37-15.13c0.19-0.19,0.3-0.45,0.3-0.71C26.55,10.1,26.44,9.85,26.25,9.66z M9.77,24.5H7.45v-2.62l10.41-10.26l2.48,2.48L9.77,24.5z M21.77,12.69l-2.49-2.49l2.33-2.3l2.51,2.47L21.77,12.69z" />
  </svg>
);

export default EditIcon;

然后在你的组件中导入使用：

import EditIcon from '../../../assets/icons/EditIcon';

<Grid item>
  <Button variant="outlined" startIcon={<EditIcon />}>
    custom
  </Button>
</Grid>

这种方式的好处是可以直接通过props控制图标样式，比如传递width="20"或fill="#ff0000"来调整显示效果。

方法三：配置Webpack SVG Loader（自定义项目） #

如果你的项目不是用Create React App，需要手动配置@svgr/webpack来处理SVG：

1. 先安装依赖：

npm install @svgr/webpack --save-dev

2. 在webpack配置文件中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

配置完成后，就可以像方法一那样直接导入SVG作为React组件使用了。

为什么你的原有代码不行？ #

你之前的导入方式import { EditIcon } from '../../../assets/icons';，实际上是把SVG文件通过默认的file-loader解析成了字符串路径，所以Button的startIcon接收到的是纯文本路径，自然显示成了文字。而内联SVG可行是因为你直接传入了React元素，完全符合startIcon的接收要求。

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