I am dynamically using these tabs:
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="off"
indicatorColor="primary"
textColor="primary"
aria-label="scrollable"
classes={{
indicator: classes.indicator,
flexContainer: classes.flexContainer,
}}
>
{routes.map((value, index) => (
<Tab
classes={{
root: classes.tabRoot,
wrapper: classes.wrapper,
labelIcon: classes.labelIcon,
selected: classes.selected,
}}
key={index}
label={strings(value)}
icon={getIcon(value)}
{...a11yProps(index)}
/>
))}
{<Grid container>
<Grid item xs>
<PrintButton
type= "widget"
params={queryParams}
style={{
textTransform: "capitalize",
float: "right"
}}
/>
</Grid>
</Grid>}
</Tabs>
This is the function to get the icon:
const getIcon = (value) => {
if (value === eventType.view) return <PageviewIcon />;
if (value === eventType.lead) return <ContactsIcon />;
if (value === eventType.share) return <ShareIcon />;
if (value === eventType.follow) return <GroupAddIcon />;
if (value === eventType.media) return <PermMediaIcon />;
if (value === eventType.print) return <FindInPageIcon />;
return null;
};
Each tab looks like this: https://i.sstatic.net/60Cla.png
I am trying to add padding between the icon and the label like this: https://i.sstatic.net/QTTlE.png
However, I have been unable to modify the default class MuiTab-labelIcon .MuiTab-wrapper which appears like this by default: https://i.sstatic.net/gKh6E.png
This issue only arose after updating to Material UI v4
I attempted using inline styling on the icons but it results in very small icons: https://i.sstatic.net/zPNUi.png
<ShareIcon style={{paddingBottom: '0px', paddingRight: "10px"}}/>
Any assistance would be greatly appreciated. Thank you in advance!