[Bug]: No option for declaring a variant for IconButton in `createTheme()`

[NashJames]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Add a MuiIconButton to createTheme()
2. Attempt to give it a variant prop

It's worth mentioning I'm using TypeScript, but had no trouble setting up a Button variant. It came up as an Intellisense option before I even declared the module.

Current behavior 😯

On IconButton, it does not even appear as a suggested option by VS Code Intellisense. And produces an error.

Expected behavior 🤔

No response

Context 🔦

I'd like to customise multiple IconButton styles to match my custom Button styles. I'm currently unable to.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.10 Ubuntu 18.04.5 LTS (Bionic Beaver)
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: Not Found
    npm: 8.19.3 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/icons-material: ^5.10.16 => 5.10.16 
    @mui/material: ^5.10.17 => 5.10.17 
    @types/react: ^18.0.25 => 18.0.26 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.0 => 4.9.4 

[sai6855]

it looks like IconButton itself doesn't have variant prop. api docs : https://mui.com/material-ui/api/icon-button/#main-content

[NashJames]

Is this intended or am I correct in reporting it? I only ask because I'd be curious to know why if it's deliberate.

[samkevin1]

What would the variants for this component be? The same ones as Avatar?

[hbjORbj]

Yes, you can create a custom variant for Material IconButton component.

e.g.,

const theme = createTheme({
  components: {
    MuiIconButton: {
      variants: [
        {
          props: { variant: "test" },
          style: {
            color: "red"
          }
        }
      ]
    }
  }
});

Here is a working Codesandbox: https://codesandbox.io/s/focused-shadow-cbfqwf?file=/demo.tsx

[NashJames]

@hbjORbj Have you got any explanation for the error then? Just tried it again and got the same.

I've got a variant working perfectly for MuiButton.

A missing interface declaration like below errors differently so I doubt it's that. Also, not sure why your sandbox doesn't throw a TS error for a custom variant name without the override?

declare module '@mui/material/IconButton' {
  interface IconButtonPropsVariantOverrides {
    test: true
  }
}

If it's missing in the API docs, is it possible part of the implementation is unfinished?

[vadimka123]

@samkevin1 , I also have cases for different variants But for my cases need same variants as in Button (text, outlined, contained) with ability to override and add custom variants

@hbjORbj , your example really failed with TypeScript, see last comment from @NashJames

[hbjORbj]

Sorry for confusion. I was incorrect. variant prop is not supported for Material IconButton component. I would suggest you to simply customize the component.

[hbjORbj]

@NashJames I've got a variant working perfectly for MuiButton.

Yes, variant prop is supported for Material Button component. I think some peope expect the two components to support the same API. But they don't. Here is a relevant issue from the past: https://github.com/mui/material-ui/issues/18109

[NashJames]

@hbjORbj Not sure I understand why this was closed? Even if it isn't high priority, it should be open and tracked with possibly a good first issue tag.

Also, the closing comment for the linked issue is exactly what we can't do...

Feel free to customize it 👍

I'm not asking for the default variants Button has, just the actual variant prop existing on IconButton so we can actually customise it.

[vadimka123]

Agreed, just adding variant prop (only one variant - default?) with ability to add custom variants and set all on theme level will working solution

[borstessi]

Agreee need variant prop on MuiIconButton

[JulienMa94]

@NashJames @vadimka123 @borstessi Just came across the same issue today and found a solution for my project. Just in case if its still a relevant problem, maybe my workaround can help you until an official solution is released :)

Codesandbox https://codesandbox.io/p/sandbox/fragrant-dust-7hcs83?file=%2Fdemo.tsx%3A15%2C21