diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index 20dd25ed775f28..af323bd55ff756 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/packages/mui-material/src/IconButton/IconButton.js
@@ -55,7 +55,7 @@ const IconButtonRoot = styled(ButtonBase, {
     }),
     variants: [
       {
-        props: (props) => !props.disableRipple,
+        props: (props) => !props.color && !props.disableRipple,
         style: {
           '&:hover': {
             backgroundColor: theme.vars
@@ -113,7 +113,7 @@ const IconButtonRoot = styled(ButtonBase, {
       ...Object.entries(theme.palette)
         .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
         .map(([color]) => ({
-          props: { color, disableRipple: false },
+          props: (props) => props.color === color && !props.disableRipple,
           style: {
             '&:hover': {
               backgroundColor: theme.vars