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

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>

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>

• javascript
• html
• css
• reactjs
• material-ui

6 Answers 6

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!

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.

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

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

Try inline-block

display: inline-block;

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,