Mui Tabs - How to use custom icons - reactjs

Question

I'm new to mui and react in general, and I have 2 questions.
I'm trying to use my own SVG files as custom icons in a mui tab, but can't figure out how exactly to do that (with all the effects as using mui icon).
my code:
import { ReactComponent as SecondIcon } from "../../images/tabs/secondTab.svg";
import { ReactComponent as ThirdIcon } from "../../images/tabs/thirdTab.svg";
import { ReactComponent as FourthIcon } from "../../images/tabs/fourthTab.svg";
import FirstTabSvg from "../../images/svg/FirstTabSvg";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
maxWidth: 500,
width: 80,
alignItems: "center",
display: "flex",
flexDirection: "column",
},
margin: {
padding: theme.spacing(2),
},
tab: {
width: 80,
},
imageIcon: {
height: '100%'
},
iconRoot: {
textAlign: 'center'
}
}));
export default function IconTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Paper square className={classes.root}>
<IconButton color="primary" size="small" className={classes.margin}>
<LogoIcon />
</IconButton>
<Divider variant="middle" style={{ alignSelf: "stretch" }} />
<Tabs
value={value}
onChange={handleChange}
// variant="fullWidth"
width="auto"
indicatorColor="primary"
textColor="primary"
aria-label="icon tabs example"
orientation="vertical"
>
<Tab icon={<FirstTabSvg />} aria-label="first" />
<Tab icon={<SecondIcon />} aria-label="second" />
<Tab icon={<ThirdIcon />} aria-label="third" />
<Tab icon={<FourthIcon />} aria-label="fourth" />
</Tabs>
</Paper>
);
}
I've tried 2 options (import as ReactComponent & SvgIcon with src)
FirstTabSvg.js (saw this as an answer in another question):
import React from 'react';
import pure from 'recompose/pure';
import { SvgIcon } from '#material-ui/core';
let FirstTabSvg = (props) => (
<SvgIcon {...props}>
<img src="../tabs/firstTab.svg" />
</SvgIcon>
);
FirstTabSvg = pure(FirstTabSvg);
FirstTabSvg.displayName = 'FirstTabSvg';
FirstTabSvg.muiName = 'SvgIcon';
export default FirstTabSvg;
result:
Tabs
as you can see, the FirstTabSvg does not render, and the ReactComponent does render but I don't know how to change the color for an active tab.
how can I change the tabs width? as you can see in the picture, the indicator is not in the same line as the tabs