diff --git a/docs/pages/experiments/material-ui/icon-button.tsx b/docs/pages/experiments/material-ui/icon-button.tsx
new file mode 100644
index 00000000000000..dc010f388cfaa0
--- /dev/null
+++ b/docs/pages/experiments/material-ui/icon-button.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  useColorScheme,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+import IconButton from '@mui/material/IconButton';
+import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon';
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import AlarmIcon from '@mui/icons-material/Alarm';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+
+const ColorSchemePicker = () => {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={() => {
+        if (mode === 'light') {
+          setMode('dark');
+        } else {
+          setMode('light');
+        }
+      }}
+    >
+      {mode === 'light' ? <Moon /> : <Sun />}
+    </Button>
+  );
+};
+
+export default function CssVarsTemplate() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
+            gridAutoRows: 'minmax(160px, auto)',
+            gap: 2,
+            '& > div': {
+              placeSelf: 'center',
+            },
+          }}
+        >
+          <Box>
+            <IconButton aria-label="insert emoticon" size="small" color="success">
+              <InsertEmoticonIcon fontSize="inherit" />
+            </IconButton>
+          </Box>
+          <Box>
+            <IconButton aria-label="shopping cart" color="primary">
+              <AddShoppingCartIcon />
+            </IconButton>
+          </Box>
+          <Box>
+            <IconButton aria-label="add an alarm">
+              <AlarmIcon />
+            </IconButton>
+          </Box>
+          <Box>
+            <IconButton aria-label="exit" disabled size="large">
+              <ExitToAppIcon fontSize="inherit" />
+            </IconButton>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index eab5a06af6c44e..ee0022d2db05b5 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/packages/mui-material/src/IconButton/IconButton.js
@@ -47,13 +47,15 @@ const IconButtonRoot = styled(ButtonBase, {
     padding: 8,
     borderRadius: '50%',
     overflow: 'visible', // Explicitly set the default value to solve a bug on IE11.
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest,
     }),
     ...(!ownerState.disableRipple && {
       '&:hover': {
-        backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars
+          ? `rgba(${theme.vars.palette.action.active} / ${theme.vars.palette.action.hoverOpacity})`
+          : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent',
@@ -73,13 +75,14 @@ const IconButtonRoot = styled(ButtonBase, {
     }),
     ...(ownerState.color !== 'inherit' &&
       ownerState.color !== 'default' && {
-        color: theme.palette[ownerState.color].main,
+        color: (theme.vars || theme).palette[ownerState.color].main,
         ...(!ownerState.disableRipple && {
           '&:hover': {
-            backgroundColor: alpha(
-              theme.palette[ownerState.color].main,
-              theme.palette.action.hoverOpacity,
-            ),
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
+                  theme.vars.palette.action.hoverOpacity
+                })`
+              : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
             // Reset on touch devices, it doesn't add specificity
             '@media (hover: none)': {
               backgroundColor: 'transparent',
@@ -97,7 +100,7 @@ const IconButtonRoot = styled(ButtonBase, {
     }),
     [`&.${iconButtonClasses.disabled}`]: {
       backgroundColor: 'transparent',
-      color: theme.palette.action.disabled,
+      color: (theme.vars || theme).palette.action.disabled,
     },
   }),
 );