question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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:

Screen Shot 2021-04-18 at 8 21 29 AM

https://next.material-ui.com/components/icons/#font-material-icons

Expected Behavior 🤔

Expect same behavior as in v4, displayed in the current docs:

Screen Shot 2021-04-18 at 8 22 26 AM

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.1

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
mnajdovacommented, Jun 29, 2021

@luminaxster thanks for the feedback. It was a mistake at the start that we went with the same name StylesProvider. Regarding the changelog:

On release 5.0.0-alpha.24, a breaking change was listed as non-breaking:

[styled-engine] Rename StylesProvider to StyledEngineProvider ([styled-engine] Rename StylesProvider to StyledEngineProvider #24429) @mnajdova

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

1reaction
luminaxstercommented, May 19, 2021

This is not relevant but related: On release 5.0.0-alpha.24, a breaking change was listed as non-breaking:

  • [styled-engine] Rename StylesProvider to StyledEngineProvider (#24429) @mnajdova

The failure is now observable on v5.0.0-alpha.34:

  • [core] Move StyledEngineProvider to @material-ui/core/styles (#26265) @mnajdova

I confused the two providers:

import {
   ThemeProvider,
   StyledEngineProvider, // StylesProvider rename missing as breaking change in  log
   CssBaseline,
} from '@material-ui/core';
// import { StylesProvider } from '@material-ui/styles'; // I confused it with this change
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found