Is there a way I can overwrite the colour the Material UI Icons npm package provides in React? Is there a way I can overwrite the colour the Material UI Icons npm package provides in React? reactjs reactjs

Is there a way I can overwrite the colour the Material UI Icons npm package provides in React?


Just add a style fill: "green"

Example: <Star style={{fill: "green"}}/>


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 }} />

Resouces to learn more abo it, Icons


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.