Below is the current code I am using:
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>
I am seeking a way to customize the icon assigned to startIcon, rather than using the default EditOutlinedIcon from material-ui.
UPDATE:
After implementing @Peter Ambruzs's suggestion with an inline SVG, it worked successfully. However, when attempting the same approach by linking the code to an icon located in the src/assets folder, only the file path is displayed on the button as shown below:
https://i.sstatic.net/YLvHj.png
The code I used for this scenario:
import {
EditIcon,
} from '../../../assets/icons';
<Grid item>
<Button variant="outlined" startIcon={EditIcon}>
custom
</Button>
</Grid>
The icon in question can be found at this location:
https://i.sstatic.net/gTZiM.png
The index.js file contains the following code:
export { default as EditIcon } from './edit.svg';
The edit.svg file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
... (SVG code content)