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';
    

  
  Updated 1 hour ago

Demo image: