css - 如何为 Material UI 按钮 'startIcon' 分配自定义图标？

Question

我目前的代码如下:

import {
  Button,
  Grid,
  Typography,
  } from '@material-ui/core';

import EditOutlinedIcon from '@material-ui/icons/EditOutlined';

<Grid item>
     <Button
        variant="outlined"
        className={classes.button}
        onClick={toggleState('showEdit')}
        startIcon={<EditOutlinedIcon />}
     >
     Edit
     </Button>
</Grid>

如何将自定义图标分配给 startIcon 而不是使用 material-ui 附带的 EditOutlinedIcon？

更新:

当尝试使用下面@Peter Ambruzs 的答案(使用内联 svg)时，它可以工作，但是当我通过将代码链接到存储在 src/assets 文件夹中的图标来尝试相同时，只有文件路径显示在按钮上，如下所示:

我的代码:

import {
  EditIcon,
} from '../../../assets/icons';

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

我的图标在这里:

index.js 文件:

export { default as EditIcon } from './edit.svg';

编辑.svg文件:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
    .st0{display:none;}
    .st1{display:inline;}
    .st2{opacity:0.5;}
    .st3{fill:#DEEACE;}
    .st4{fill:#71C6D8;}
    .st5{fill:none;stroke:#71C6D8;stroke-width:0.05;stroke-miterlimit:10;}
    .st6{display:inline;fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st7{display:inline;fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
    .st8{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
    .st9{fill:#1E1E1C;}
    .st10{fill:#020203;}
    .st11{fill:#B2115B;}
</style>
<g id="Layer_1" class="st0">
    <g class="st1">
        <g>
            <g class="st2">
                <path class="st3" d="M0,0v32h32V0H0z M30,30H2V2h28V30z"/>
            </g>
            <g>
                <path class="st4" d="M29.8,6.2v19.6H2.2V6.2H29.8 M30,6H2v20h28V6L30,6z"/>
            </g>
            <g>
                <g>
                    <path class="st4" d="M21.8,10.21v11.6H10.2v-11.6H21.8 M22,10.01H10v12h12V10.01L22,10.01z"/>
                </g>
            </g>
            <g>
                <path class="st4" d="M27.8,4.2v23.6H4.2V4.2H27.8 M28,4H4v24h24V4L28,4z"/>
            </g>
            <g>
                <path class="st4" d="M25.8,2.2v27.6H6.2V2.2H25.8 M26,2H6v28h20V2L26,2z"/>
            </g>
            <g>
                <g>
                    <path class="st4" d="M16,2.2c7.61,0,13.8,6.19,13.8,13.8S23.61,29.8,16,29.8S2.2,23.61,2.2,16S8.39,2.2,16,2.2 M16,2
                        C8.27,2,2,8.27,2,16c0,7.73,6.27,14,14,14s14-6.27,14-14C30,8.27,23.73,2,16,2L16,2z"/>
                </g>
            </g>
            <g>
                <path class="st4" d="M31.8,0.2v31.6H0.2V0.2H31.8 M32,0H0v32h32V0L32,0z"/>
            </g>
        </g>
        <g>
            <line class="st5" x1="16" y1="16" x2="16" y2="0"/>
            <line class="st5" x1="16" y1="16" x2="20.29" y2="0"/>
            <line class="st5" x1="16" y1="16" x2="25.24" y2="0"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="0"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="6.76"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="11.71"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="16"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="20.29"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="25.24"/>
            <line class="st5" x1="16" y1="16" x2="32" y2="32"/>
            <line class="st5" x1="16" y1="16" x2="25.24" y2="32"/>
            <line class="st5" x1="16" y1="16" x2="20.29" y2="32"/>
            <line class="st5" x1="16" y1="16" x2="16" y2="32"/>
            <line class="st5" x1="16" y1="16" x2="11.71" y2="32"/>
            <line class="st5" x1="16" y1="16" x2="6.76" y2="32"/>
            <line class="st5" x1="0" y1="32" x2="16" y2="16"/>
            <line class="st5" x1="0" y1="25.24" x2="16" y2="16"/>
            <line class="st5" x1="0" y1="20.29" x2="16" y2="16"/>
            <line class="st5" x1="0" y1="16" x2="16" y2="16"/>
            <line class="st5" x1="0" y1="11.71" x2="16" y2="16"/>
            <line class="st5" x1="16" y1="16" x2="0" y2="6.76"/>
            <line class="st5" x1="16" y1="16" x2="0" y2="0"/>
            <line class="st5" x1="16" y1="16" x2="6.76" y2="0"/>
            <line class="st5" x1="16" y1="16" x2="11.71" y2="0"/>
        </g>
        <g>
            <circle class="st5" cx="16" cy="16" r="12"/>
            <circle class="st5" cx="16" cy="16" r="10"/>
            <circle class="st5" cx="16" cy="16" r="8"/>
            <circle class="st5" cx="16" cy="16" r="6"/>
            <circle class="st5" cx="16" cy="16" r="4"/>
            <circle class="st5" cx="16" cy="16" r="2"/>
        </g>
    </g>
</g>
<g id="earlier" class="st0">
</g>
<g id="Layer_2">
    <path class="st9" 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.040.71v4.04
        c0,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"/>
</g>
</svg>

Answer 1

您可以使用 svg 作为源创建图像。像这样:

import React from "react";
import { Button, Grid } from "@material-ui/core";
import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
import Icon from "@material-ui/core/Icon";

export default function App() {
  const svgIcon = (
    <Icon>
      <img alt="edit" src="edit.svg" />
    </Icon>
  );

  return (
    <div className="App">
      <Grid item>
        <Button variant="outlined" startIcon={svgIcon}>
          custom
        </Button>
        <Button variant="outlined" startIcon={<EditOutlinedIcon />}>
          Edit
        </Button>
      </Grid>
    </div>
  );
}

https://codesandbox.io/s/peaceful-jepsen-eo3td