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

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>

Answer 2

You can easily use a Grid to achieve the correct alignment without the need for any CSS.

<Grid container alignItems="center" spacing={2}>
   <Grid item>
      <Typography variant="h2">
         Photography
      </Typography>
   </Grid>
   <Grid item>
      <FaCamera />
   </Grid>
</Grid>

Answer 3

I ran into the same issue when importing icons from @mui/icons-material.

Setting fontSize: 'inherit' makes the icon the same size as the font. There was still a slight vertical alignment issue which I was able to resolve by using verticalAlign: 'text-top'.

Code that worked for me was:

<Icon sx={{ fontSize: 'inherit', verticalAlign: 'text-top' }} />

Answer 4

Simply do a fontSize="inherit" on your inline-icon like : <FaCamera fontSize="inherit" />

Answer 5

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

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