[Tabs] Add support for prefix icons

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

• This is a v1.x issue (v0.x is no longer maintained).
• 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.

@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>