Kevin Powell - Community•2y ago

icon size not scaling down and up automatically mui

hey folks as we know that em units are relative to thier parent font-size so in this case the size of calendarMonth icon should scale up and down according to the parent font size which in case is the typography element but the size of the icon always remains the same

<Typography display={'inline-flex'} fontSize={isMobile ? '0.75rem' : 'initial'}><CalendarMonth /> {formatDate({date: todo.date, formatString:'yyyy, MMM dd'})}</Typography>

<Typography display={'inline-flex'} fontSize={isMobile ? '0.75rem' : 'initial'}><CalendarMonth /> {formatDate({date: todo.date, formatString:'yyyy, MMM dd'})}</Typography>

I'm using mui by default in mui icon size are 1em which is 24px as parent initial font-size is 1rem but if I set my parent font-size to .75rem shoudn't the icon size scale down

2 Replies

Zoë•2y ago

The icon definitely has height: 1em? It does need to be told to use font-size as a reference, and it's not default

Aditya KiradOP•2y ago

it default I checked you can look at the mui docs

Gaming

Programming

icon size not scaling down and up automatically mui