Is there a way I can overwrite the colour the Material UI Icons npm package provides in React?
Change Icon Color
<HomeIcon /><HomeIcon color="primary" /><HomeIcon color="secondary" /><HomeIcon color="action" /><HomeIcon color="disabled" /><HomeIcon style={{ color: green[500] }} /><HomeIcon style={{ color: 'red' }} />
Change Icon Size
<HomeIcon fontSize="small" /><HomeIcon /><HomeIcon fontSize="large" /><HomeIcon style={{ fontSize: 40 }} />
MDI using Icon component
<Icon>add_circle</Icon><Icon color="primary">add_circle</Icon><Icon color="secondary">add_circle</Icon><Icon style={{ color: green[500] }}>add_circle</Icon><Icon fontSize="small">add_circle</Icon><Icon style={{ fontSize: 30 }}>add_circle</Icon>
For the Font
<Icon className="fa fa-plus-circle" /><Icon className="fa fa-plus-circle" color="primary" /><Icon className="fa fa-plus-circle" color="secondary" /><Icon className="fa fa-plus-circle" style={{ color: green[500] }} /><Icon className="fa fa-plus-circle" fontSize="small" /><Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
The simplest way to specify/override the color of an Icon in Material-UI is to use a custom CSS class name.
Suppose that you want to show a green checkbox rather than a red triangle, depending on the outcome of some process.
You create a function somewhere inside your code, for example like this:
function iconStyles() { return { successIcon: { color: 'green', }, errorIcon: { color: 'red', }, }}
You then apply makeStyles to that function, and run the result.
import { makeStyles } from '@material-ui/core/styles';...const classes = makeStyles(iconStyles)();
Inside your render function, you can now use the object classes
:
const chosenIcon = outcome ? <CheckCircleIcon className={classes.successIcon} /> : <ReportProblemIcon className={classes.errorIcon} />;
The function I mentioned first in this answer actually accepts a theme as input and allows you to modify/enrich that theme: this ensures that your custom classes aren't seen as exceptions, but rather as integrations inside a more comprehensive visual solution (for example, icon colors in a theme are best seen as encodings).
Material-UI is very rich and I'd encourage you to explore also other existing customisation mechanisms.