[Tabs] Add support for prefix icons

[ghost]

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.

[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

[bgkoala]

For those still fretting with the styling, here's what I did so it would turn out formatted perfectly with 24x24px icons:

<Tab
  value={'tabValue'}  
  label={  
    <>  
      <Icon  
        style={{ verticalAlign: 'middle', marginBottom: 2, marginRight: 6 }}  
        color={selectedTab === tabValue ? 'blue' : '#555555'}  
      />  
      Tab Label  
    </>  
  }  
/>  

Where Icon is a React component that returns a hardcoded element with 'style' and 'fill' props set via the passed 'style' and 'color' props respectively. Even with 'verticalAlign' set to 'middle' the icon still sits a little too low, hence the 2 pixels of 'marginBottom'. The amount of pixels for 'marginRight' just depends on how close you want the icon to be to the text. The #555555 (dark gray) color for the icon when tab is not selected is slightly darker than the label (which is black with 54% opacity against a white background in my case) but it just seems to blend in better. Good luck folks!

[orxanaliyev]

Here is some example, what I did.

<Tab label={
              <>
                <div style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
                  <FavoriteIcon fontSize="inherit" /> Some title
                </div>
              </>
         }
/>