Material UI - Tab icon Styles

Question

I'm using this tabs dynamically:

        <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 getIcon function:

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 is looking this way:

And I'm trying to separete with some padding the icon from the label like this:

But I wasn't able to find a way to replace this class MuiTab-labelIcon .MuiTab-wrapper which comes likes this by default:

I wasn't having this issue before updating to Material UI v4

I tried with inline styling on the icons but causes the icon to be really small:

<ShareIcon style={{paddingBottom: '0px', paddingRight: "10px"}}/>

I'll appreciate any help, Thanks in advance !!

Answer 1

Wrap Text and Icon with a parent component and apply

style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', justifyContent: 'center' }}

Answer 2

Use the iconposition prop of the Tab component.

<Tab icon={<PhoneMissedIcon />} iconPosition="start" label="start" />