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

Question

I am new to React and am using the npm package Material UI icons (https://www.npmjs.com/package/@material-ui/icons) and displaying icons within a React component as such:

Importing:

import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';

and rendering:

readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>}

However, since KeyboardArrowRightIcon is an SVG provided by the npm package, it comes with it's own fill colour:

Eg: <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...

I know I can override this colour by having a style attribute within the element, eg:

<KeyboardArrowRightIcon style={{ fill: '#0072ea' }} />

But is there anyway to make this a SCSS variable (style={{ fill: $link-color }})?

I worry if the link colour changes in the style sheet someone will have to hunt down all these hard coded instances later.

Mesopause

Answer 1

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

Inexpensive

Answer 2

Just add a style fill: "green"

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

Boneset

In the old days of plain CSS, inline styles were frowned upon. I still believe that hammering style down to a single component is a bad practice – Jersey

I am agreeing the inline style is bad. But still this answer doesn't even answer the original question. Let's say in future KeyboardArrowRightIcon changed the fill color to "red" then how will your hardcoded "green" value reflect the new "red" color? – Gunsel

how do you specify a css class though instead of hard coded green? lets say I created a .font-green for example – Oriel

Answer 3

Update: 2022 July MUI5

There are multiple ways to change icon color

  <HomeIcon sx={{color: "#FC0"}} />
  <HomeIcon htmlColor="red" />
  <HomeIcon color="primary" />
  <HomeIcon color="success" />
  <HomeIcon color="action" />
  <HomeIcon color="disabled" />
  <HomeIcon color="error" />
  <HomeIcon sx={{ color: pink[500] }} />

Using sx prop you can specify any hex/rgb color code or colors from your theme palette

Example :

 import { red } from '@mui/material/colors';

 <HomeIcon sx={{ color: red[800] }} />

---

This is what I do

I use MUI v4.5.1. Use the color prop API with value inherit and add a div or span wrapper around and add your color there.

From the API docs

color default value:inherit. The color of the component. It supports those theme colors that make sense for this component.

Add star icon

import React from 'react';
import Star from '@material-ui/icons/StarRounded';
import './styles.css';

export function FavStar() {
  return (
    <div className="star-container">
      <Star size="2em" fontSize="inherit" />
    </div>
  );
}

In style.css

.star-container {
  color: red;
  font-size: 30px;
}

Unprovided

Answer 4

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.

Jersey

Answer 5

You can do like this: <PlusOne htmlColor="#ffaaee" />

Ganny

Answer 6

The simplest way I found is using the following.

import { styled } from '@material-ui/styles';
import { Visibility } from '@material-ui/icons';

const MyVisibility = styled(Visibility)({
    color: 'white',
});

Hoard

Answer 7

You can set a default color for all icons by creating a custom theme with createMuiTheme():

createMuiTheme({
  props: {
    MuiSvgIcon: {
      htmlColor: '#aa0011',
    }
  }
})

This will set the default value of the htmlColor prop for every icon like <KeyboardArrowRightIcon/>. Here's a list of other props you can set.

Gyral

How is the parameter for the icons in the createTheme() function? – Gloriole

Answer 8

Overwriting the material UI Icon color like below

in js

        const [activeStar, setActiveStar] = useState(false);

        <IconButton onClick={() => setActiveStar(!activeStar)}>
          {activeStar ? (
            <StarOutlined className="starBorderOutlined" />
          ) : (
            <StarBorderOutlined />
          )}
        </IconButton>

in Css

      .starBorderOutlined {
        color: #f4b400 !important;
       }

Chile

Answer 9

Surprised that no one has suggested a site-wide solution yet.

You can override the colors that are assigned for the "colors" option here https://material-ui.com/api/icon/#props

by adding an override to your theme (you'll have to define a custom theme if you aren't already) https://material-ui.com/customization/theming/#createmuitheme-options-args-theme

After defining a theme though, it's as simple as

const theme = createMuiTheme({
  "overrides": {
    MuiSvgIcon: {
      colorPrimary: {
        color: ["#625b5b", "!important"],
      },
      colorSecondary: {
        color: ["#d5d7d8", "!important"],
      },
    },
    ...
});

Maelstrom

The only thing with this approach is that you must declare the color property as "primary" for this to work rather than overriding the default color. You can override the root color with this approach but parents wont affect the children at this point. Something to keep in mind. – Horaciohorae

Answer 10

To change color of your MUI Icons your have three ways: (Source)

//using a hex value
<BathroomIconOutlined style={{ color: "#ffee66" }} />

//using a standard css colour
<BathroomTwoToneIcon style={{ color: "blue" }} />

//import a material ui colour, and use that
import { purple } from "@mui/material/colors";
<BathroomIcon style={{ color: purple[500] }} />

Or use directly the MUI properties: (Source)

import SearchOutlined from '@mui/icons-material/SearchOutlined';

<SearchOutlined style={{ color: 'primary', fontSize: "small" }} />
<SearchOutlined style={{ color: 'secondary', fontSize: "medium" }} />
<SearchOutlined style={{ color: 'action', fontSize: "large" }} />
<SearchOutlined style={{ color: 'error', fontSize: 16 }} />
<SearchOutlined style={{ color: 'disabled', fontSize: 16 }} />

Mythomania

Answer 11

Only correct solution that covers two tone (TwoTone) icons is to pass it htmColor property:

React.createElement(Icon, {htmlColor: "#00688b"})

Immediately

Answer 12

You can use SvgIcon, from the documentation:

The SvgIcon component takes an SVG path element as its child and converts it to a React component that displays the path, and allows the icon to be styled and respond to mouse events. SVG elements should be scaled for a 24x24px viewport.

You must use the devTools to extract the path of the KeyboardArrowRightIcon icon:

Then use it with your custom color like this:

<SvgIcon
  component={svgProps => {
    return (
      <svg {...svgProps}>
        {React.cloneElement(svgProps.children[0], {
          fill: myColorVariable
        })}
      </svg>
    );
  }}
>
   <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
</SvgIcon>

Sentinel

Answer 13

I had the same problem, me solution was:

import React from 'react';
import pure from 'recompose/pure';
import {SvgIcon} from '@material-ui/core';

let smile = (props) => (
 <SvgIcon {...props}
  component={props => {
    return (
      <svg {...props}>
        {React.cloneElement(props.children[0], {
          fill: "#4caf50"
        })}
      </svg>
    );
  }}
>
   <path d="M256,32C132.281,32,32,132.281,32,256s100.281,224,224,224s224-100.281,224-224S379.719,32,256,32z M256,448
            c-105.875,0-192-86.125-192-192S150.125,64,256,64s192,86.125,192,192S361.875,448,256,448z M160,192c0-26.5,14.313-48,32-48
            s32,21.5,32,48c0,26.531-14.313,48-32,48S160,218.531,160,192z M288,192c0-26.5,14.313-48,32-48s32,21.5,32,48
            c0,26.531-14.313,48-32,48S288,218.531,288,192z M384,288c-16.594,56.875-68.75,96-128,96c-59.266,0-111.406-39.125-128-96"></path>
</SvgIcon>
);
smile = pure(smile);
smile.displayName = 'smile';
smile.muiName = 'SvgIcon';

export default smile;

Casque

Answer 14

Solution that works the best for myself:

const EditableIcon = ({ icon, color, sx }: PropsWithChildren<EditableIconProps>) => {
  const c = useIconStyles()
  return React.cloneElement(icon, {
    ...(color && { color }),
    ...(sx && { sx }),
    classes: {
      colorPrimary: c.colorPrimary,
      colorSecondary: c.colorSecondary,
      colorAction: c.colorAction
    }
  })
}

If color is set, your classes would override default values.

Pesthouse

Answer 15

Use inline styling Instead of

style={{ color: "green" }}

do

sx={{ color: "green"}}

Ariadne