[SvgIcon] Custom color not supported

[oliviertassinari]

• 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 can't use a custom palette color.

Expected Behavior 🤔

I can use a custom palette color

Steps to Reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/customcolor-material-demo-forked-xog2v?file=/demo.js
2. See that the color is wrong

Context 🔦

Reported by @ahfarmer in #13875 (comment).

It's actually the same for the Icon component.

Your Environment 🌎

v5.0.0-alpha.32

[oliviertassinari]

It seems that we have a couple of possible options. Not sure

1. Drop the color prop. Maybe developers should use the sx prop.

https://github.com/mui-org/material-ui/blob/8ef7d1cbfbbb03e27addf356f0e7d57033b4ef0b/packages/material-ui/src/SvgIcon/SvgIcon.js#L57

2. Have the prop behave like on a Button:

diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index d977b6dce1..f3f9363bf4 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -62,7 +62,7 @@ const SvgIconRoot = experimentalStyled(
     error: theme.palette.error.main,
     disabled: theme.palette.action.disabled,
     inherit: undefined,
-  }[styleProps.color],
+  }[styleProps.color] || theme.palette[styleProps.color].main,
 }));

const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {

3. Have the prop behave like on a Typography

diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js
index 759fa55570..b4f03d5002 100644
--- a/packages/material-ui-system/src/index.js
+++ b/packages/material-ui-system/src/index.js
@@ -17,7 +17,7 @@ export { default as sizing } from './sizing';
 export * from './sizing';
 export { default as spacing } from './spacing';
 export * from './spacing';
-export { default as style } from './style';
+export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export {
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index d977b6dce1..9ff348c82b 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { getPath } from '@material-ui/system';
 import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
@@ -62,7 +63,7 @@ const SvgIconRoot = experimentalStyled(
     error: theme.palette.error.main,
     disabled: theme.palette.action.disabled,
     inherit: undefined,
-  }[styleProps.color],
+  }[styleProps.color] || getPath(theme, `palette.${styleProps.color}`) || styleProps.color,
 }));

 const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {

[CarlosAmaral]

Hi, can this issue be addressed? Otherwise the whole point of using the color palette is lost.

[aimad-majdou]

Are there any updates regarding this matter? It would be beneficial to have the option to select any color from the palette, such as color='success.main'. I noticed this feature was recently added to the Typography component, so why not implement the same functionality for SvgIcon as well?

[rmed1na]

I'm facing this issue as well at this moment...