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

You can also use Material UI's Flexbox component.

For example:

// ...
import { Box } from '@material-ui/core';
// ...


 
    
 
 
    revolve
 

The alignItems: center attribute will vertically align the inner items.

This will add some additional markup. However, if you look at the component's API there's a lot of additional flexibility. Such as for example a method to use margin or padding that's consistent with the rest of your Material UI implementation. Also it's really easy to align the items differently if the use-case should occur.