The Essential Guide to Material-UI Icon Color

Material-UI does a good job of keeping Icon color and SVGIcon color simple to customize. A common approach is setting the color prop with a MUI theme color, like primary or secondary. However, if you want to use rgba or hex colors on MUI Icons, change background color, or change Icon color on hover, you need a different approach.

Fortunately, MUI v5 has made color customization easy for Icons. The sx prop provides access to the CSS color attribute, which is capable of accepting RGBA and hex.

We can also use nested selectors in sx to control hover behavior. In fact, depending on what we target with our selector we can choose to change color on hover of the Icon SVG path element or to change color when the svg wrapper element is hovered.

MUI Icon Color
MUI Icon Color

A Code Sandbox with full a live React demo is in the Resources section. Here are additional useful reads:

What are Material-UI Icons?

MUI Icons are a wrapper that allows for styling props to be passed to an svg.

In my example I am using DeleteOutlinedIcon which is imported from @mui/icons-material/DeleteOutlined. We can see in the below DOM screenshot that it renders as an svg and path.

MUI Icon DOM
MUI Icon DOM

MUI Icons can use the sx prop and thus can be styled with ease. They also have access to the ‘MUI system’ and theme, which provides the styling opportunities described below.

Material-UI Icon Color Prop

The color prop is interesting because it only accepts string values that are representations of colors from the theme palette. For example, the below are valid values for the color prop:

  • color=”primary”
  • color=”secondary”
  • color=”warning”

The following are not valid:

  • color=”blue”
  • color=”rgba(250, 250, 250, 0.5)”
  • color=”#FFBF00″

These values can only be passed via the sx prop.

Material-UI Icon RGBA and Hex Colors

Here are several examples of styling MUI Icon color using the sx prop:

<HomeIcon sx={{ color: blue[100] }} />
<HomeIcon sx={{ color: "rgba(230, 255, 110, 0.9)" }} />
<HomeIcon sx={{ color: "#FFBF00" }} />
<DeleteOutlinedIcon
  sx={{ 
    color: "white", 
    backgroundColor: "blue", 
    borderRadius: "50%" 
  }}
/>

The HomeIcon is is an SVGIcon component, while the DeleteOutlinedIcon is simply from the Icon class. However, they are both made using svg and render with an svg element and a path.

Take a look at the syntax for rgba, hex, and even simpler color styling such as "white". With the sx prop, these values are applied to the Icon like traditional CSS values.

Background color is also easy to apply to MUI Icons via the sx prop. I passed backgroundColor: "blue" in the example, but it could have taken a hex code like "#0000FF" or rgba color like "rgba(45, 85, 255, 1)".

Material-UI Icon Hover Color

Hover color is not as simple to apply to MUI Icons as regular color styling.

Hover color can be applied using the sx prop and a nested selector. There are two choices for how to construct the nested selected, and they have a subtle difference:

  • sx={{ “&:hover”: { color: “blue” } }}
  • sx={{ “& :hover”: { color: “blue” } }}

Notice that there is no space between the &: in the first method, and there is a space between & : in the second. The difference is that the first will select and fire when the svg element is hovered over (see DOM screenshot below), while the second selects the path element. Remember that a space in CSS means that a child will be selected.

Hover color on Material-UI Icons

The visual difference is that the first method will apply the hover color as soon as the svg width or inner padding is hovered over. The second method will apply the hover color only when the actual path is hovered over.

The results of this difference are striking. The delete icon above (the trash can) will only change color when the actual lines of the image are hovered when using the second method. Even if a user hovers inside the area of the delete icon, the hover color will not apply.

Most likely the first method is preferred. Users are going to want to have hover color applied whether they mouse over the path or the internal parts of the svg.

Resources

Here’s an example of applying hover styling to the Material-UI Button component.

This MUI Alert component overrides the default icon and applies a custom color.

I built a dynamic MUI Icon loader here.

Here’s how to customize the MUI Rating component’s icons.

Here’s how to customize the MUI Autocomplete’s Clear button.

Code Sandbox Link

MUI Icon Docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.