Material UI - Align icon to center with the Typography text

Question

How do I align icon to the same level as the text. As of now, I see the icon is at little top to the text. I tried to use padding-top: 5px and also margin-top: 5px but that does not seem to work as expected.

  <Box>
    <Typography variant="h2">
      Photography <FaCamera />
    </Typography>
  </Box>

I created a working example using Stackblitz. Could anyone please help?

Answer 1

<Typography variant="h2">
  Photography <FaCamera  style={{verticalAlign:"middle"}}/>
</Typography>

you can try inline style 'verticalAlign', it is works for me .

Answer 2

I was able to align it correctly using position and top properties of CSS.

<Box>
  <Typography variant="h2">
    Photography <FaCamera style={{position: 'relative', top: '8px'}} />
  </Typography>
</Box>