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

styles

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

JSX

    Your Text

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.