[IconButton] Custom non-palette color causes TypeError

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I augment IconButton with new colors that don’t exist in the palette:

declare module "@mui/material/IconButton" {
  interface IconButtonPropsColorOverrides {
    textPrimary: true;
    textSecondary: true;
  }
}

and then try to use these colors:

<IconButton color="textPrimary">
  <CloseIcon />
</IconButton>

My app crashes with:

TypeError: Cannot read properties of undefined (reading 'main') 

at the following location:

https://github.com/mui/material-ui/blob/dec32b361714bed9c73ee1360c4b6390769bf9f5/packages/mui-material/src/IconButton/IconButton.js#L78

Expected behavior 🤔

IconButton doesn’t throw TypeError when using custom color. Instead it handles it safely, like SvgIcon:

https://github.com/mui/material-ui/blob/dec32b361714bed9c73ee1360c4b6390769bf9f5/packages/mui-material/src/SvgIcon/SvgIcon.js#L54

Steps to reproduce 🕹

No response

Context 🔦

We intend for color="textPrimary" (or color="text.primary", both are fine) to use the text.primary palette color.

Workaround: pass the color to the icon component instead and augment SvgIconPropsColorOverrides typings:

<IconButton>
  <CloseIcon color="textPrimary" />
</IconButton>

Your environment 🌎

No response

[hilalsidhic]

Hi is anyone working one this .I’d like to take it. @emlai

[siriwatknp]

The PR to fix this issue should:

• custom color works with TypeScript
• make sure that the custom color does not crash
• add a demo to show that the color prop can be augmented

@ZeeshanTamboli if you are available, this could be one to pick up.