Material-ui: There should be a way to show the icon on tab to be left of the text on the tab item

[ghost]

In tabs component the icon only display on the top. I prefer the icon on the left like the image show below.

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.1.0 |
| React | 16.4.0 |
| browser | Firefox, Google Chrome |

[jeffvandyke]

I haven't tried this, but could you use one of those icons as just part of the text for a normal tab to get that appearance?

[mbrookes]

@vibolvireak For the moment we are focusing on meeting the spec given all the Material v2 changes to address. You can probably achieve this with some custom styling though. If you manage to come up with an elegant solution, by all means share it here.

Thanks for the suggestion though.

[ghost]

@mbrookes @jeffvandyke The way i achieve this is by inject a code like below

<tab label={<Icon /> Some other label} />

Apply style on <Icon /> for resize the fontSize, margin, color to fit the what you need.

but that's not really a good solution because it's really hard to align the margin.

[Hocdoc]

For better aligning it is possible to decrease the icon size:

<tab label={<><Icon fontSize="inherit" /> Some other label</>} />

Another solution (depending on the icon) is to use the viewBox of the SvgIcon:

<tab label={<><Icon viewBox="0 -5 24 24" /> Some other label</>} />

[ekfrl2815]

<Tab label={<><div>Some other label<Icon/></div></>}/>

[zackeilholz2]

It would be great to see a toggleable implementation of this (leading icon, top, none) as shown in Material.io: https://material.io/components/tabs/

[mbrookes]

Huh, it seems MWC have implemented it, even though it still isn't part of the spec. Not sure whether to reopen this issue or not...

[joshwooding]

@zackeilholz2 I've been taking a little break but I'm currently working on building a generic component we can use across the demos to replicate those showcases.

[nvdunginest]

// Override MuiTab in theme.js
overrides: {
  MuiTab: {
    wrapper: {
      flexDirection:'row',
    },
  },
},

Hope this help!

[raza2022]

is there any default way to achieve it, as if I override the theme js then it will effect the tab in whole application, but I wanna this in only two components?

[mbrookes]

@raza2022 you can apply @nvdunginest's suggestion locally:
https://material-ui.com/customization/components/

[sanjeeviraj]

@raza2022 here is the sample local customization:

const useStyles = makeStyles({    
    wrapper: {
      flexDirection: 'row'
    }
});
//inside render at respective area
<Tabs
    value={value}
    onChange={handleChange}
    indicatorColor="secondary"
    textColor="primary"
    centered
    className={classes.wrapper}
>
    <Tab label="File Upload" />
    <Tab label="Network Upload" />                                
</Tabs>

[adybaby]

I've tried all of these suggestions and cannot for the life of me get any of them to work :( No matter what I do - embed the icon in the label, specify flexDirection: 'row' on tabs or tab or wrapper,, the icon always stays above the label.

[prbagdia]

I tried the following way and it seemed to work for me. Let me know if this helps.

<Tab label={<div><StorageIcon style={{verticalAlign: 'middle'}} /> Data </div>}  />

[adybaby]

That worked!! Thank you so much :)

[prbagdia]

That worked!! Thank you so much :)

Great :)

[adityapatnaik]

I tried the following way and it seemed to work for me. Let me know if this helps.

<Tab label={<div><StorageIcon style={{verticalAlign: 'middle'}} />  Data</div>}  />

Thank you so much, it worked like a charm

[amad3v]

The way I mange this is by using a Button then assign it to the Tab's label

const tabButton = (
  <Button variant="text" startIcon={icon} fullWidth>
    {label}
  </Button>
);

const customTab = <Tab label={btn}></Tab>;

Screenshot