mui / mui/material-ui

[material-ui][Icon] Font size is not applied to Material font icons

Open
#29,689 8 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: Icon scope: all components scope: icons type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯

Set component props as for example fontSize="small" or sx={{ fontSize: 30 }} don't modify size of icon. It doesn't work for Material Icons. Change font size for FontAwesome icons works correctly.

obraz

obraz

Expected behavior 🤔

Icon size should be changed after set fontSize="small" or sx={{ fontSize: 30 }}

Steps to reproduce 🕹

Steps:

  1. Go to https://mui.com/components/icons/#font-material-icons
  2. See that icon size is not changed for the two last icons
Context 🔦

I tried to insert icon and change its size using component

Your environment 🌎
  System:
    OS: Linux 5.13 Linux Mint 20.2 (Uma)
  Binaries:
    Node: 16.13.0 - /usr/bin/node
    Yarn: Not Found
    npm: 8.1.0 - /usr/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 94.0
  npmPackages:
    @emotion/react: ^11.5.0 => 11.6.0 
    @emotion/styled: ^11.3.0 => 11.6.0 
    @mui/core:  5.0.0-alpha.54 
    @mui/icons-material: ^5.0.4 => 5.1.0 
    @mui/lab: ^5.0.0-alpha.54 => 5.0.0-alpha.54 
    @mui/material: ^5.0.4 => 5.1.0 
    @mui/private-theming:  5.1.0 
    @mui/styled-engine:  5.1.0 
    @mui/system:  5.1.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.1.0 
    @mui/x-data-grid: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @types/react: ^17.0.30 => 17.0.34 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: ^4.4.4 => 4.4.4 

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the examples at the font-material-icons documentation page and compare the two final Material Icons examples with the FontAwesome examples. Verify how fontSize="small" and sx={{ fontSize: 30 }} affect each rendered icon; done means both props visibly change Material font icon size as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.