How to Align tab-label and tab-icon horizontally in material-UI using Tabs API

Admin 1
Viewed 7307

I am trying to overwrite the Material UI CSS and align the the phone icon and the phone text in the same line and closer to each other. I researched and found Tabs API.

Then I debugged and found the wrapper property was creating a problem. I tried fixing by setting display to block but the phone icon and phone text are still not aligning in same line.

I've provided code and sandbox below. All of my code is in tab-demo.js

https://codesandbox.io/s/7p4ryw691

const styles = theme => ({
  root: {
    // flexGrow: 1,
    width: "100%",
    // flex: 0,
    textTransform: "capitalize"
    // backgroundColor: theme.palette.background.paper
    //  backgroundColor: 'red'
  },
  sportsAdvancedSearch: {
    // backgroundColor: 'green'
    color: "red",
    fontSize: 16,
    fontWeight: "bold"
  },
  sportsTotalNumber: {
    fontWeight: "bold"
  },
  sportsExportContainer: {
    paddingTop: 8,
    paddingBottom: 8
  },

  indicator: {
    backgroundColor: "red"
  },
  tabsIndicator: {
    backgroundColor: "red",
    textTransform: "capitalize"
  },
  tabRoot: {
    textTransform: "initial",
    width: "100%",
    display: "block",

    "&:hover": {
      color: "red",
      opacity: 1,
      textTransform: "initial"
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium,
      textTransform: "capitalize"
    },
    "&:focus": {
      color: "red",
      textTransform: "capitalize"
    }
  },
  tabSelected: {},
  sportsHeading: {
    fontSize: 32,
    fontWeight: "bold",
    padding: 16
  },
  sportsTabHeader: {
    //  border: "1px solid red",
    backgroundColor: "#f5f5f5"
  },
  alignment: {
    display: "block"
    //  color: 'red'
  }
});

  <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            classes={{ indicator: classes.tabsIndicator }}
          >
            <Tab
              label="phone"
              icon={<PhoneIcon style={{ display: "block" }} />}
              classes={{
                root: classes.tabRoot,
                selected: classes.tabSelected,
                wrapper: classes.alignment
              }}
            />
            <Tab
              favorites={favorites}
              label="Favorites"
              icon={<FavoriteIcon style={{ display: "block" }} />}
              classes={{
                root: classes.tabRoot,
                selected: classes.tabSelected,
                wrapper: classes.alignment
              }}
            />
          </Tabs>
material-ui reactjs css html javascript
6 Answers

This successfully aligns tab-text and tab-icon horizontally without disturbing the Tabs/TabPanel functionality.

The "Put Everything inside label" Way

<Tab label= {<div><HomeIcon style = { {verticalAlign : 'middle'} } /> Home </div>}/>

Source

CSS Way

Just add this to the CSS attached to your tabs component.

.MuiTab-wrapper {
  flex-direction: row !important;
}

Don't forget to add '!important', as we are overriding a predefined class .MuiTab-wrapper provided by mat-UI, so may not work after a reload without '!important'.

As a side note,

If you enclose Icons and tabs within a div and add some CSS to align both, it works however, you lose the Tabs/TabPanel functionality that material-UI gives out of the box.

If you are not bothered about the functionality, you can try this.

<div style={{display:'flex',alignItems:'center'}}>
       <HomeIcon/>
       <Tab label="Home" />
</div>

Hope this helps!

user_110452790

Change the line 331 to:

icon={<PhoneIcon style={{ display: "inline-block", marginBottom:"-10px" }} />}

It's because the svg has a display of block, and it's pushing the text underneath. You can play with margins there and position it wherever you like.

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

Try inline-block

display: inline-block;
user_97933100

Change :

alignment: {
    display: "block"
    //  color: 'red'
  }

to : 

alignment: {
    display: "flex",
    flexDirection: "row"
    //  color: 'red'
  }

Just tried. It works.

Flex layout handles it without much pain across all browsers!!

EDIT:

Updated Fiddle with width of tabs: https://codesandbox.io/s/82ynv5qwy9

Changes:

1.

classes={{
              indicator: classes.tabsIndicator,
              scrollButtons: { display: "flex", flex: 1 }
            }}

2.

  tabRoot: {
    textTransform: "initial",
    width: "stretch",
    display: "flex",
    flex: 1,
user_87788040

If anyone is searching for the solution to this, the easiest/cleanest way for MUI v5+ is to use the iconPosition attribute of Tab. See https://mui.com/material-ui/react-tabs/#icon-position

Sample code from the link posted here for convenience:

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="icon position tabs example"
>
  <Tab icon={<PhoneIcon />} label="top" />
  <Tab icon={<PhoneMissedIcon />} iconPosition="start" label="start" />
  <Tab icon={<FavoriteIcon />} iconPosition="end" label="end" />
  <Tab icon={<PersonPinIcon />} iconPosition="bottom" label="bottom" />
</Tabs>

Both "start" and "end" options puts the icon on the same line as the text in the label.

This is the change that made it possible: https://github.com/mui/material-ui/pull/28764

user_14427440
Related