[Tabs][material-ui] Scroll buttons in RTL mode not using slots component

[matthewroach]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/https-git.832008.xyz-mui-material-ui-issues-39296-grwzpm

Steps:

1. Using the codesandbox above
2. Depending on your screen size you may need to adjust it to see the icons appear when tabs overflow
3. Verify the custom Icon's show
4. Update the dir const on line 44 of App.js to be rtl
5. Icons used for start and end are not as provided

Current behavior 😯

Custom Icons displayed in ltr mode that are set in TabList slots

        slots={{
          EndScrollButtonIcon: RightArrowIcon,
          StartScrollButtonIcon: LeftArrowIcon
        }}

When theme is set to rtl default icons are used, not the custom icons

Expected behavior 🤔

Icons provided via slots are used in both ltr and rtl display modes

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[akshayw1]

Could you pls assign it to me?

[mj12albert]

@matthewroach Thanks for reporting this ~ I can reproduce the issue (I updated the repro btw, for some reason I couldn't get the arrows to show at all until I added the allowScrollButtonsMobile prop to TabsList)

[mj12albert]

@akshayw1 Are you still interested in working on this issue?

[akshayw1]

Yes, Pls assign

[mj12albert]

@akshayw1 Thanks for your interest ~ be sure to read the contributing guide!