How to align horizontal icon and text in Material-UI

Question

I am a newbie in material-ui, now my icon and text are not aligned :

My desired results:

Answer 1

Having ListItemIcon and ListItemText wrapped inside a ListItem will keep it in one line and prevent breaking:

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
    
<ListItem >
  <ListItemIcon><AccessAlarmIcon color="secondary" /></ListItemIcon>
  <ListItemText>Updated 1 hour ago</ListItemText>
</ListItem>

Demo image:

Answer 2

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

with display3 and a few other styles added for color.