How to include Material Icons in a MuiTheme property

Question

Probably the title is a bit confusing but I am using Material UI in my page and I want to change the icon in the input to another icon from Material UI Icons.

<input className={classes.fieldDate} type="datetime-local" ... />

I have imported the icon I want but now in the makeStyles I cant make it work.

import EventOutlinedIcon from '@material-ui/icons/EventOutlined';    
const useStyles = makeStyles((theme) => ({
  ...
  fieldDate: {
    color: '#FFF',
    backgroundColor: '#5C5C5C',
    '&::-webkit-calendar-picker-indicator': {
      background: `${EventOutlinedIcon}`,
    },
    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
    fontSize: '16px',
    fontWeight: 500,
    marginLeft: 'auto',
    border: 'none',
    borderRadius: '5px',
    padding: '7px 5px',
  },
  ...
}));

How should I do it? I have tried the following:

• background: `url(${EventOutlinedIcon})`
• background: EventOutlinedIcon
• background: '@material-ui/icons/EventOutlined'
• background: 'url("@material-ui/icons/EventOutlined")'

Thank you.

Answer 1

The issue is that you aren't importing an svg file, you are importing an SvgIcon React component and you can't specify a React component as a background image URL.

One approach (shown below) is to grab the path from the EventOutlined icon source and use it to create a data URL as explained here: Inline SVG in CSS.

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
  fieldDate: {
    color: "#FFF",
    backgroundColor: "#5C5C5C",
    "&::-webkit-calendar-picker-indicator": {
      backgroundImage:
        "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z'/></svg>\")"
    },
    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
    fontSize: "16px",
    fontWeight: 500,
    marginLeft: "auto",
    border: "none",
    borderRadius: "5px",
    padding: "7px 5px"
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <input className={classes.fieldDate} type="datetime-local" />
    </div>
  );
}