Icon component can't receive custom theme colors

[benmneb]

• 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 😯

Icon component can't receive custom theme colors, while Buttons and IconButtons can.

Expected Behavior 🤔

Icon component can receive custom colors from the theme, just like Buttons and IconButtons can.

Steps to Reproduce 🕹

CodeSandbox

Steps:

1. Add custom color to theme
2. Apply it to IconButton and a regular Mui Icon
3. Watch it work on IconButtons
4. And not work on Icons

Context 🔦

Trying to custom style Icons and Button start/endIcons without them being IconButtons.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: macOS 11.4
  Binaries:
    Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    Yarn: 3.0.1 - ~/.nvm/versions/node/v14.17.4/bin/yarn
    npm: 7.20.6 - ~/.nvm/versions/node/v14.17.4/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.1
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: next => 5.0.0-beta.4 
    @material-ui/icons: next => 5.0.0-beta.4 
    @material-ui/private-theming:  5.0.0-beta.4 
    @material-ui/styled-engine:  5.0.0-beta.4 
    @material-ui/system:  5.0.0-beta.4 
    @material-ui/types:  6.0.2 
    @material-ui/unstyled:  5.0.0-alpha.43 
    @material-ui/utils:  5.0.0-beta.4 
    @types/react:  17.0.18 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

This behaves the same on Firefox and Chrome (haven't checked Safari or Edge) and Codesandbox...

🙏🙏🙏

[AlvesJorge]

Hi Ben,
While I wasn't able to find out why this is happening ( and I would love to know why ) I found a workaround that could be an easy fix for you , and a guidance to why this might be happening to someone more experienced in MUI that might see this.
https://codesandbox.io/s/material-ui-v5-icons-custom-color-bug-forked-jswdn?file=/demo.js
By using "warning" which is one of the listed values for the color prop for the SvgIcon , you can now use it as your custom color palette.

Interestingly enough , IconButton api doesn't reference any "custom values" yet it works in that . Go Figure.
Hope this helps!

[benmneb]

Hey Jorge, That was the best work-around I came up with for now as well. And I assumed that “string” in the prop options there meant any custom string? 🤷‍♂️ - Benjamin

…

On Thu, 19 Aug 2021 at 4:40 am, Jorge Alves ***@***.***> wrote: Hi Ben, While I wasn't able to find out why this is happening ( and I would love to know why ) I found a workaround that could be an easy fix for , and a guidance to why this might be happening to someone more experiences in MUI that might see this. https://codesandbox.io/s/material-ui-v5-icons-custom-color-bug-forked-jswdn?file=/demo.js By using "warning" which is one of the listed values for the color prop for the SvgIcon , you can now use it as your custom color palette. [image: image] <https://user-images.githubusercontent.com/60895482/129969106-3c16790c-5ef1-4b64-ad80-10302e8b9771.png> Interestingly enough , IconButton api doesn't reference any "custom values" yet it works in that . Go Figure. Hope this helps! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#27831 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO7XHSE3K2RO2E6YNXVBTNLT5QLE7ANCNFSM5CMDPTEQ> .