How to align horizontal icon and text in MUI

Solution 1:

This works perfectly!

<div style={{
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
}}>
    <LinkIcon />
    <span>revolve</span>
</div>

Solution 2:

You need to use Grid. Something like that should works:

<Grid container direction="row" alignItems="center">
  <Grid item>
    <LinkIcon className={classes.linkIcon} />
  </Grid>
  <Grid item>
    revolve
  </Grid>
</Grid>

Solution 3:

Try the below code. You can use variant as per your requirement.

const useStyles = makeStyles(theme => ({
  wrapIcon: {
    verticalAlign: 'middle',
    display: 'inline-flex'
   }
}));

<Typography variant="subtitle1" className={classes.wrapIcon}>
    <LinkIcon className={classes.linkIcon}  /> revolve
</Typography>

Solution 4:

alternative simple solution

<Grid container direction="row" alignItems="center">
     <SearchIcon /> example
</Grid>

Solution 5:

styles

const styles = theme => ({
    icon: {
        position: "relative",
        top: theme.spacing.unit,
        width: theme.typography.display1.fontSize,
        height: theme.typography.display1.fontSize
    }
});

JSX

<Typography variant="display1">
    <Icon className={this.props.classes.icon}/>Your&nbsp;Text
</Typography>

you could replace display1 with display3 or another typography variant in all 3 places to choose your text size. The   ensures that your text doesn't break between words when it wraps.

For me this can render to look like this

enter image description here

with display3 and a few other styles added for color.