[Button] Start icon font size override

[andra-sava]

When passing a startIcon to a Button, it does not apply the given fontSize for that icon.
The issue can be also observed in the demos: https://codesandbox.io/s/iconlabelbuttons-material-demo-forked-m258l?file=/demo.js

• 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 😯

I am passing two different font sizes like "large" or "small", but nothing changes.

 <Button variant="outlined" startIcon={<DeleteIcon fontSize="large" />}>
 <Button variant="outlined" startIcon={<DeleteIcon fontSize="small" />}>

Expected Behavior 🤔

Passing a valid fontSize to startIcon should increase or decrease the size of the icon accordingly.

Steps to Reproduce 🕹

Steps:

1. Create a Button component
2. Pass an icon through startIcon prop
3. Add a valid fontSize
4. See that nothing happens

Your Environment 🌎

Tech	Version
Material-UI	4.12.2
React	17.0.2
Chrome	94.0.4606.71 (Official Build) (64-bit)

PS: If it helps, there was one more similar task for Checkbox. : #21289

[coulgreer]

Ok I've fiddled with your example in CodeSandbox and discovered from the inspector that the Button wraps the provided end- and/or start- Icon in a span with a class of MuiButton-iconSizeMedium by default. I think that overriding that classes' rules toward the font size -- when given the context of its direct container -- could help circumvent the issue of the icon not changing sizes. For example, making a rule like .MuiButton-root > .MuiButton-iconSizeMedium > .MuiSvgIcon-fontSizeSmall would give more specificity and override the .MuiButton-iconSizeMedium styles.

[coulgreer]

I also noticed that your environment in the post and in the CodeSandbox do not match. You have Material-UI v4.12.2 in your post, but you use MUI v5.0.3 in your CodeSandbox.

[eps1lon]

The font size is consistent across the Button. So the fontSize of the icon doesn't know of its context and therefore we have to override it. Otherwise we'd have to require every Icon to be passed with fontSize="inherit": <Button startIcon={<DeleteIcon fontSize="inherit" />} />.

You can instead control the size of the whole button with <Button size />.

Otherwise you'd have to battle specificity due to & > *:nth-of-type(1) selectors. @mnajdova Any thoughts on the customization story here?

[coulgreer]

I wonder if @andra-sava is trying to scale the icon independent of the button's size.

[andra-sava]

Yes, @coulgreer. This is what I want to achieve. Having a small icon in a large button for example.

[mnajdova]

Otherwise you'd have to battle specificity due to & > *:nth-of-type(1) selectors. @mnajdova Any thoughts on the customization story here?

Nothing to add. Here is an example of how you can override it: https://codesandbox.io/s/iconlabelbuttons-material-demo-forked-gtz88?file=/demo.tsx You can parameterize it based on props.

[andra-sava]

Thank you! Meanwhile I have used this workaround:

<Button startIcon={<DeleteIcon style={{width:'15px', height: '15px'}} />}>
Delete
</Button>