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:

My code is:

<div style={{
    display: 'inline-flex',
    VerticalAlign: 'text-bottom',
    BoxSizing: 'inherit',
    textAlign: 'center',
    AlignItems: 'center'
}}>
    <LinkIcon className={classes.linkIcon}  />
    revolve
</div>  

I tried grid and row, but not work. Can anyone help me?

Answer 1

This works perfectly!

<div style={{
    display: 'flex',
    alignItems: 'center',
    flex-wrap: wrap;
}}>
    <LinkIcon />
    <p>revolve</p>
</div>