diff --git a/docs/pages/material-ui/api/tab.json b/docs/pages/material-ui/api/tab.json
index 5f78b6fa4a2e7f..623ae2928d01ca 100644
--- a/docs/pages/material-ui/api/tab.json
+++ b/docs/pages/material-ui/api/tab.json
@@ -42,7 +42,7 @@
{
"key": "iconWrapper",
"className": "MuiTab-iconWrapper",
- "description": "Styles applied to the wrapper element of `icon` if `icon` is provided.",
+ "description": "Styles applied to the `icon` HTML element if both `icon` and `label` are provided.",
"isGlobal": false
},
{
diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
index 3424471260cb84..7a4473a167f03e 100644
--- a/docs/translations/api-docs/tab/tab.json
+++ b/docs/translations/api-docs/tab/tab.json
@@ -38,8 +38,8 @@
},
"iconWrapper": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the wrapper element of icon",
- "conditions": "icon is provided"
+ "nodeName": "the icon HTML element",
+ "conditions": "both icon and label are provided"
},
"labelIcon": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
index 43d53422a76454..2894c511713c75 100644
--- a/packages/mui-material/src/Tab/Tab.js
+++ b/packages/mui-material/src/Tab/Tab.js
@@ -41,6 +41,9 @@ const TabRoot = styled(ButtonBase, {
styles[`textColor${capitalize(ownerState.textColor)}`],
ownerState.fullWidth && styles.fullWidth,
ownerState.wrapped && styles.wrapped,
+ {
+ [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper,
+ },
];
},
})(({ theme, ownerState }) => ({
diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
index fdad02650e0918..1481440199894c 100644
--- a/packages/mui-material/src/Tab/Tab.test.js
+++ b/packages/mui-material/src/Tab/Tab.test.js
@@ -4,6 +4,7 @@ import { spy } from 'sinon';
import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import Tab, { tabClasses as classes } from '@mui/material/Tab';
import ButtonBase from '@mui/material/ButtonBase';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
import describeConformance from '../../test/describeConformance';
describe('', () => {
@@ -167,4 +168,32 @@ describe('', () => {
expect(style).to.have.property('alignText', 'center');
});
});
+
+ it('should apply iconWrapper styles from theme', function test() {
+ if (/jsdom/.test(window.navigator.userAgent)) {
+ this.skip();
+ }
+
+ const theme = createTheme({
+ components: {
+ MuiTab: {
+ styleOverrides: {
+ iconWrapper: {
+ backgroundColor: 'rgb(0, 0, 255)',
+ },
+ },
+ },
+ },
+ });
+
+ const { getByRole } = render(
+
+ hello} label="icon" />
+ ,
+ );
+ const icon = getByRole('tab').querySelector(`.${classes.iconWrapper}`);
+ expect(icon).toHaveComputedStyle({
+ backgroundColor: 'rgb(0, 0, 255)',
+ });
+ });
});
diff --git a/packages/mui-material/src/Tab/tabClasses.ts b/packages/mui-material/src/Tab/tabClasses.ts
index fa937a367a8549..a1cffb8022567d 100644
--- a/packages/mui-material/src/Tab/tabClasses.ts
+++ b/packages/mui-material/src/Tab/tabClasses.ts
@@ -20,7 +20,7 @@ export interface TabClasses {
fullWidth: string;
/** Styles applied to the root element if `wrapped={true}`. */
wrapped: string;
- /** Styles applied to the wrapper element of `icon` if `icon` is provided. */
+ /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
iconWrapper: string;
}