[IconButton] Custom non-palette color causes TypeError

[emillaine]

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:

material-ui/packages/mui-material/src/IconButton/IconButton.js

Line 78 in dec32b3

color: (theme.vars || theme).palette[ownerState.color].main,

Expected behavior 🤔

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

material-ui/packages/mui-material/src/SvgIcon/SvgIcon.js

Line 54 in dec32b3

(theme.vars || theme).palette?.[ownerState.color]?.main ??

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

[siriwatknp]

The customization capability is not complete. I marked this as an enhancement.

The fix can use optional chaining like in SvgIcon. However, please note that when you customize the color prop, you are opting out of the theme palette so you have to style by:

createTheme({
  components: {
    MuiIconButton: {
      root:  ({ ownerState, theme }) => ({
        ...ownerState.color === 'textPrimary' && {
          // your style
        }
      })
    }
  }
})

[emillaine]

The customization capability is not complete.

Ah that explains it.

I worked around it by passing the color to the icon component instead, and augmenting SvgIconPropsColorOverrides:

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

[Shubhamchinda]

Is this issue open to working on?
I'd like to take it. @emlai

[emillaine]

@Shubhamchinda I don't think it's being worked on, so feel free to take it. Thank you!

[Shubhamchinda]

@Shubhamchinda I don't think it's being worked on, so feel free to take it. Thank you!

Great, thanks. I'll take this.

[geraldaddey]

@Shubhamchinda @emlai

Any progress? Would love to implement this PR

[Shubhamchinda]

@Shubhamchinda @emlai

Any progress? Would love to implement this PR

@geraldaddey Give me a day, and I'll submit a PR.

[shachargiladi]

Is this issue still open to work on? Would like to work on it

[emillaine]

@shachargiladi 4 weeks since the last response, so I think it was abandoned. I'd say go ahead!

[hilalsidhic]

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