Customize icon color with themes

[igorpreston]

Hi,

Is there a way to customize all FontIcon and IconButton colors using MUI themes? I digged up the code and noticed that FontIcon is bound by textColor property, that's absolutely sad.

Thoughts?

[aahan96]

@igorpreston Yes, I looked into the issue and couldn't find any way to change the color of all FontIcon and IconButton components. The only way I could figure out was to change the styles prop wherever you use the components. If you are going down that path, then I would recommend creating a new styling and importing it, rather than creating an object on every page. What do you say?

[igorpreston]

@aahan96 yes, that's what i've been doing recently as well. I also tried creating HOC to wrap FontIcon and providing custom iconColor variable to the MUi theme, but it is becoming annoying to import decorated FontIcon from local project, rather than from MUI.

MUI themes need definitely to support separate iconColor variable with fallback to textColor, which applies to all FontIcon and IconButton components.

[jakesamz]

This seems to be more of an Enhancement than a Question.

Any updates on this?

[oliviertassinari]

I digged up the code and noticed that FontIcon is bound by textColor property

That's right. We would accept a PR to add a fontIcon and iconButton key into getMuiTheme.js.

It is becoming annoying to import decorated FontIcon from local project, rather than from MUI.

That's a pattern we will most likely encourage for the next branch. It's call composition. That sounds right. Still, I agree doing it for the theme sounds overkill.

[tgiddings]

@oliviertassinari can you clarify the intent of closing this issue? Will a convenient way to set icon colors separately from text color only come when v1 is released? Is v1 close enough that solving these issues in v0.x is no longer a concern?

[oliviertassinari]

@tgiddings The issue was closed by the linked pull request. With the following change, users can override all the styles injected by Material-UI with ease. But even without this change, you should be able to change the color by providing your own CSS.

Is v1 close enough that solving these issues in v0.x is no longer a concern?

Yes.