-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cant create variant for SVG icon #34827
Comments
Can you provide a CodeSandbox that reproduces the error? |
As you can see from this code sandbox custom color variants work on other components but not on Icon component. |
Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information. |
@rajithaw The code says that MUI will remove the material-ui/packages/mui-material/src/SvgIcon/SvgIcon.js Lines 52 to 53 in bb84c5a
So instead, this would works: -<Icon color="customColor">home</Icon>
+<Icon sx={{ color: 'customColor.main' }}>home</Icon> https://stackblitz.com/edit/react-zws3or-lndpfm?file=demo.tsx We also have #19466 about being able to add new props, e.g. the color prop with the theme. I assume this is what would apply for @AdamZajler once we remove the color prop. @siriwatknp Would this fly with Joy UI? If not, then I would be in favor of aligning Material UI on Joy UI |
I would not remove the <SvgIcon color="primary" />;
// You can't do this
<SvgIcon color="primary.main" />; However, happy to discuss further to bring consistency to both Material UI and Joy UI. Ref: we had a discussion about the |
@siriwatknp Why does an icon component needs the notion of a theme palette color? I mean, why is the general |
The createTheme({ // or extendTheme
components: {
SvgIcon: {
defaultProps: {
color: 'primary',
}
}
}
}) In some themes, you might want to have the // let's not talk about this case because it won't scale.
createTheme({ // or extendTheme
components: {
SvgIcon: {
defaultProps: {
sx: {
color: '...',
}
}
}
}
}) |
@siriwatknp I was thinking of the sx prop for one-off customizations. For theming, I think that What I fail to understand is why an icon needs special handling for colors, something that justifies that using the normal CSS color customization API is not enough, meaning needing a dedicated I think that the initial idea to add the
I think that removed |
Duplicates
Latest version
Steps to reproduce 🕹
Use WebStorm & try to create custom
color
variant for SvgIcon likedefault
and it is#434A54
Current behavior 😯
Cant add color named
default
to MuiSvgIcon; & I have no tips in component or anything else (only default colors are avilable).Expected behavior 🤔
There should not be any errors in theme & custom color should be visible in tips
Context 🔦
My friend dosent have such issue on VSCODE only I have it in webstorm :|
Your environment 🌎
No response
The text was updated successfully, but these errors were encountered: