IconButton misses "contained" variant

[ronnyroeller]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Material Design specifies that IconButtons have a standard and a contained variant (docs):

Yet, the MUI IconButton doesn't have a variant prop to switch between them.

Note: It's NOT possible to just add the variant ourselves as a workaround (#35456)

Examples 🌈

https://m3.material.io/components/icon-buttons/overview

Motivation 🔦

We want to have contained IconButtons to make them stand up from stand IconButtons.

[DiegoAndai]

Hey @ronnyroeller, thanks for the report 😃!

The documentation you provided is for Material Design 3 (MD3). MD3 is not supported at this time, but it's being actively worked on (see #29345 and #34738). MUI's Material UI package currently supports Material Design 2, and that's why this variant is not implemented.

Until MD3's IconButton implementation is done, I can suggest the workaround of implementing the "contained" variants in your codebase, here's a Condsandbox proof of concept of this workaround: https://codesandbox.io/s/icon-button-customization-utpu2p?file=/demo.tsx. This example uses the sx prop, here's the sx prop documentation.

Let me know if I can help with anything else 😊

[ronnyroeller]

Thanks a lot, @DiegoAndai . Very clear!