diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.js
index acadf974feae16..08afed977c2e69 100644
--- a/packages/mui-material/src/TabScrollButton/TabScrollButton.js
+++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.js
@@ -110,7 +110,7 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref)
}),
}}
>
- {direction === 'left' ? (
+ {(direction === 'left') !== isRtl ? (
) : (
diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
index bb73ff3c324b22..b9bc5642c3c911 100644
--- a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
+++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
@@ -1,7 +1,9 @@
+import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, screen } from '@mui/internal-test-utils';
import TabScrollButton, { tabScrollButtonClasses as classes } from '@mui/material/TabScrollButton';
import { createSvgIcon } from '@mui/material/utils';
+import RtlProvider from '@mui/system/RtlProvider';
import describeConformance from '../../test/describeConformance';
const ArrowBackIcon = createSvgIcon(, 'ArrowBack');
@@ -81,4 +83,34 @@ describe('', () => {
expect(screen.getAllByTestId('ArrowForwardIcon')).to.have.lengthOf(1);
});
+
+ describe('RTL', () => {
+ it('should render StartScrollButtonIcon for direction="right" in RTL', () => {
+ render(
+
+
+ ,
+ );
+ expect(screen.getAllByTestId('ArrowBackIcon')).to.have.lengthOf(1);
+ });
+
+ it('should render EndScrollButtonIcon for direction="left" in RTL', () => {
+ render(
+
+
+ ,
+ );
+ expect(screen.getAllByTestId('ArrowForwardIcon')).to.have.lengthOf(1);
+ });
+ });
});