"fontSize" attribute not working in Icon component

[pradipjs]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. https://stackblitz.com/edit/react-pwpelc?file=Demo.tsx
3. Attribute fontSize has no effect to font size of the icon

Current behavior

Font size stays a same even if we set the value to small, large or medium.

Expected behavior

Fontsize should be as per the attribute value.

Context

It seems styles are not applying to icon component based on the attribute value.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: "fontSize" attribute not working in Icon component

[tneeraja95]

This is happening because the material icons are loaded after the styled-component for icon and material icons have a font-size of 24px which is overriding the styled-component's small/medium/large.

[DiegoAndai]

Hey @pradipjs, thanks for the report. This is (sadly) an old issue: #29689, so I'm closing this one as duplicate. I'll leave a workaround option in the original issue.