[material-ui][Button] `startIcon` size is different when icon is wrapped with `Badge`

[cherniavskii]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/loving-booth-8zq3q7?file=/src/Demo.js

Current behavior 😯

The startIcon wrapped into Badge is larger than the one that is not wrapped with Badge

Expected behavior 🤔

Both icons should be of the same size.

Context 🔦

This is coming from the DataGrid's toolbar issue, where the "Filters" button is wrapped with Badge:

Your environment 🌎

npx @mui/envinfo

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

[arujjval]

@cherniavskii please assign me this issue.

[cherniavskii]

@arujjval no need for assignment, if you're going to work on it - let others know in the comment 🙂

[brownp2k]

The smaller icons should be made the same size (24x24) as other custom toolbar icons that are added. I just wanted to make sure that badge-wrapped icons aren't made smaller to match all non-badge-wrapped icon sizes (18x18).

[mwskwong]

This seems to be caused by the following:

Currently, the smaller start icon is done by applying the following CSS to the button:

.MuiButton-startIcon > *:nth-of-type(1) {
  font-size: 20px
}

This overrides the default font size of SvgIcon, making it smaller. Yet, when the icon is wrapped in any element, this CSS no longer targets the nested icon, so the icon uses the default size, which is 24px.

I guess the key question is, how deeply nested should the "smaller icon" CSS still apply? Or maybe since the prop is called startIcon, once the received component is not an icon, it is all up to the user to implement any logic they see fit?

[brownp2k]

When I tracked this down my gut feeling was that the intent of the size change is actually to have it apply the badge text rather than the icon, but the nth-type is hitting the wrong item. I could be way off base with the intent thought though.