Currently, I am utilizing the Scrollable tabs feature from Material-UI. How can I go about changing the icon of the scroll arrows in SVG format?
I came across the TabScrollButton component that is available for use. Would I need to create separate ones for the left and right arrow functionalities?
Furthermore, within the Tabs component, there is a prop called ScrollButtonComponent. How should I properly implement this feature?
Despite my attempts below, the desired outcome has not been achieved 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;