How to Change MUI Icon Color (3 Ways + Hover)

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.

A Code Sandbox with full a live React demo is in the Resources section, plus links to related posts.

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 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)".

MUI Styled Icon

The styled API is another option for changing icon color. Use the styled API and create a Styled Component if you intend to heavily reuse the component.

Here’s the code:

import { styled } from "@mui/system";

const StyledHomeIcon = styled(HomeIcon, {
  name: "StyledHomeIcon",
  slot: "Wrapper"
})({
  color: "goldenrod",
  "&:hover": { color: "blue" }
});

//JSX
<StyledHomeIcon />

This styled icon is goldenrod color but turns blue when hovered.

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.

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.

When to use Background Color with MUI Icons

A good use case for adding background color to icons is when you are using “outlined” icons. See the AttachMoneyOutlinedIcon code below for an example:

<AttachMoneyOutlinedIcon
  sx={{ color: "white", backgroundColor: "green", borderRadius: "50%" }}
/>

Styling with white color and a solid background color makes these icons stand out nicely. Be sure to update border radius to make these circular.

Solid icons can also have background color, and it will fill the svg width and height. Remember, since MUI icons render as SVGs they can be styled with any CSS value.

FAQs

Resources

Here are additional useful reads:

• The Complete Guide to MUI IconButton Background Color, Text Color, Size, and More
• The Essential Guide to MUI IconButton Hover and onClick
• The Ultimate MUI DatePicker Tutorial
• How to Customize MUI Speed Dial: Size, Color, Hover

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