htmlColor does not apply if MuiSvgIcon class is overridden

[Guneetgstar]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have the following code in my theme.overrides:

overrides: {
    MuiSvgIcon: {
      root: {
        color: palette.primary.light,
      }
    }
  }

And below is my SvgIcon:

<CancelIcon fontSize={"large"} htmlColor={"#FF5800"}/>

Now the htmlColor props won't work as it Applies to the color attribute to the SVG element. according to the documentation which doesn't override the css that MuiSvgIcon-root class applies to the svg.

Expected Behavior 🤔

If htmlColor is provided it should override the css color if possible (which I could not find any way yet).

Steps to Reproduce 🕹

Steps:

1. Override MuiSvgIcon.root in your theme and set a color.
2. Apply htmlColor with a different color.
3. Run the app and the svg color won't change (as expected as html attributes doesn't override css properties).

Context 🔦

I wanted all of my icons to be of one same color until I specify one. Currently I have to create a style for every SvgIcon I want to have a different color like this:

const styles=(color)=>makeStyles(theme=>({
  root:{
    color:`${color}`
  }
}))

Tech	Version
Material-UI	^4.2.1
React	16.8.6
Browser	Chrome, Opera

[oliviertassinari]

@Guneetgstar This is a browser feature see: https://codepen.io/oliviertassinari/pen/jOqQKdQ. CSS wins over HTML attributes, that's true for color, height, etc. What you are looking for is #15561.

[Guneetgstar]

@oliviertassinari Sure I know that CSS wins over HTML attributes and that's why I raised this issue. But how's #15561 is related to this? I didn't get what you wanted to convey with it.

[oliviertassinari]

My answer is based on

I wanted all of my icons to be of one same color until I specify one. Currently I have to create a style for every SvgIcon I want to have a different color like this:

You want a color prop, #15561 is about providing one as well many other style utilities. You can use the Box with the clone option, for now