CODEWITHSUNDEEP
cssreactjsmaterial-uireact-icons
krsna
krsna

Reputation: 4353

Material UI - Align icon to center with the Typography text

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?

Upvotes: 2

Views: 12036

Answers (5)

Jason O
Jason O

Reputation: 11

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' }} />

Upvotes: 1

will
will

Reputation: 245

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

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

Upvotes: 6

Mr.toxicsid
Mr.toxicsid

Reputation: 1

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

Upvotes: 0

Tejogol
Tejogol

Reputation: 720

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>

Upvotes: 1

krsna
krsna

Reputation: 4353

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>

Upvotes: 4

Related Questions