[Tab] Do not override icon classname

mui · Oct 12, 2021 · f4f5d05 · f4f5d05
1 parent f2fb8f5
commit f4f5d05
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
@@ -145,7 +145,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
   const icon =
     iconProp && label && React.isValidElement(iconProp)
       ? React.cloneElement(iconProp, {
-          className: classes.iconWrapper,
+          className: clsx(classes.iconWrapper, iconProp.props.className),
         })
       : iconProp;
   const handleClick = (event) => {

diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
@@ -122,13 +122,14 @@ describe('<Tab />', () => {
     });
 
     it('should add a classname when passed together with label', () => {
-      const { getByRole } = render(<Tab icon={<div data-testid="icon" />} label="foo" />);
+      const { getByRole } = render(<Tab icon={<div className="test-icon" />} label="foo" />);
       const wrapper = getByRole('tab').children[0];
       expect(wrapper).to.have.class(classes.iconWrapper);
+      expect(wrapper).to.have.class('test-icon');
     });
 
     it('should have bottom margin when passed together with label', () => {
-      const { getByRole } = render(<Tab icon={<div data-testid="icon" />} label="foo" />);
+      const { getByRole } = render(<Tab icon={<div />} label="foo" />);
       const wrapper = getByRole('tab').children[0];
       expect(wrapper).toHaveComputedStyle({ marginBottom: '6px' });
     });