How to create custom scroll icon inside the Material-UI scrolling Tabs - reactjs

Question

I am using Scrollable tabs from Material-UI. How do I change the svg icon of the scroll arrows?
I see there is TabScrollButton component you can use. So do I have to create one for the left and right arrow?
And in Tabs component you can pass a prop ScrollButtonComponent. But how do I have to use it?
I tried below but it isn't working yet:
import Tab from '#material-ui/core/Tab';
import Tabs from '#material-ui/core/Tabs';
import TabScrollButton from '#material-ui/core/TabScrollButton';
import { CloseIcon } from 'app/components/atoms/icons';
const MyCarousel = ({ value }: Props) => {
const selectedItem = value;
const scrollButton = () => {
return (
<div>
<TabScrollButton orientation="horizontal" direction="right">
{CloseIcon}
</TabScrollButton>
</div>
);
};
return (
<div css={styles.root}>
<Tabs
value={value}
indicatorColor="primary"
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
ScrollButtonComponent={scrollButton}
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
<Tab label="Item 4" />
<Tab label="Item 5" />
<Tab label="Item 6" />
<Tab label="Item 7" />
<Tab label="Item 8" />
<Tab label="Item 9" />
</Tabs>
</div>
);
};
export default MyCarousel;

Answer 1

You're close. TabScrollButton is the default props of ScrollButtonComponent. Unfortunately, TabScrollButton doesn't provide any props to override the back/forward icons. So you have to create one yourself.
This is the definition of TabScrollButton. What you want to do is to copy the definition, remove unnecessary parts and add your own icons instead. Below is an example:
import ButtonBase from "#material-ui/core/ButtonBase";
import ArrowBackIcon from "#material-ui/icons/ArrowBack";
import ArrowForwardIcon from "#material-ui/icons/ArrowForward";
const MyTabScrollButton = forwardRef((props, ref) => {
const { direction, ...other } = props;
return (
<ButtonBase
component="div"
ref={ref}
style={{ opacity: other.disabled ? 0 : 1 }}
{...other}
>
{direction === "left" ? (
<ArrowBackIcon fontSize="small" />
) : (
<ArrowForwardIcon fontSize="small" />
)}
</ButtonBase>
);
});
<Tabs
{...tabsProps}
variant="scrollable"
scrollButtons="auto"
ScrollButtonComponent={MyTabScrollButton}
>
{...}
</Tabs>
Live Demo