[Icon] fontSize prop not applied to Icon component
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
The fontSize prop does not affect the <Icon /> component. Using sx doesn’t affect size either. Tested in Chrome 89.0 and Safari 14.0.
See example in the new docs. The fontSize prop doesn’t impact the size of the icons:
https://next.material-ui.com/components/icons/#font-material-icons
Expected Behavior 🤔
Expect same behavior as in v4, displayed in the current docs:
https://next.material-ui.com/components/icons/#font-material-icons
Your Environment 🌎
`npx @material-ui/envinfo`
System: OS: macOS 10.15.7 Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node Yarn: Not Found npm: 7.6.0 - ~/Software/plynth/Current/plynth/plynth-frontend/node_modules/.bin/npm Browsers: Chrome: 89.0.4389.128 Edge: Not Found Firefox: 81.0.1 Safari: 14.0.3 npmPackages: @emotion/react: ^11.1.5 => 11.1.5 @emotion/styled: ^11.1.5 => 11.1.5 @material-ui/core: ^5.0.0-alpha.27 => 5.0.0-alpha.27 @material-ui/icons: ^5.0.0-alpha.28 => 5.0.0-alpha.28 @material-ui/lab: ^5.0.0-alpha.27 => 5.0.0-alpha.27 @material-ui/styled-engine: 5.0.0-alpha.25 @material-ui/styles: 5.0.0-alpha.27 @material-ui/system: 5.0.0-alpha.27 @material-ui/types: 5.1.7 @material-ui/unstyled: 5.0.0-alpha.27 @material-ui/utils: 5.0.0-alpha.27 @types/react: 17.0.2 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.1 => 17.0.1Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Icon API - Material UI - MUI
The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. sx, Array<func | object | bool>...
Read more >How to enlarge the SVG icon in material-ui iconButtons?
"font-size" works for "<i class="material-icons">&##abc;</i>", but does not solve my problems. I used the <ContentAdd/> from 'material-ui/lib/svg ...
Read more >Styling & Themes - Icons - KendoReact - Telerik
Icon fonts are fonts which contain vector glyphs instead of letters and numbers. You can style them with CSS by using all styling...
Read more >Material Icons Guide | Google Fonts
Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI....
Read more >Iconify for React
Install @iconify/react and import Icon component from it: ... If you do not want to use API, you need to provide icon component...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@luminaxster thanks for the feedback. It was a mistake at the start that we went with the same name
StylesProvider
. Regarding the changelog:Good catch! Seems like the PR description contain the BC description, but the changelog not.
~@siriwatknp may be a good opportunity for fixing this in https://github.com/mui-org/material-ui/pull/26948~ Nevermind, it was added in v5-alpha
This is not relevant but related: On release 5.0.0-alpha.24, a breaking change was listed as non-breaking:
The failure is now observable on v5.0.0-alpha.34:
StyledEngineProvider
to@material-ui/core/styles
(#26265) @mnajdovaI confused the two providers: