MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
There really aren't any steps to reproduce the issue.
The main difference is that the filter button supports a badge, which injects an extra span. It appears that all buttons seem to apply a font size to their first grandchild, which for all non-filter buttons ends up being the svg, but for the filter button it is the extra span.
Current behavior
The filter button/icon is 24x24 while the other icons are 18x18.
When using a custom toolbar that adds in other icons, those icons are 24x24. This leads to an inconsistent looking set of toolbar icons by default. The difference stands out even more when the toolbar labels are removed.
Expected behavior
The default toolbar buttons should all be the same size by default, which looks to be 24x24 since that is what new icons are added as with zero modifications (as shown in the second codesandbox link).
It feels like perhaps the font size "reduction" should be applied to the badge rather than the svg?
Context
The toolbar buttons, default and custom, should all have a consistent size by default.
Your environment
The environment is listed in the codesandbox links. This was tested with the latest versions of Chrome, Firefox and Edge.
Steps to reproduce
The issue is visible here (your own demo): https://codesandbox.io/s/wzl32v?file=/src/Demo.tsx
As well as here (your own custom toolbar demo with an extra MUI icon added): https://codesandbox.io/s/nostalgic-pascal-hqjd47?file=/src/Demo.tsx
There really aren't any steps to reproduce the issue.
The main difference is that the filter button supports a badge, which injects an extra span. It appears that all buttons seem to apply a font size to their first grandchild, which for all non-filter buttons ends up being the svg, but for the filter button it is the extra span.
Current behavior
The filter button/icon is 24x24 while the other icons are 18x18.
When using a custom toolbar that adds in other icons, those icons are 24x24. This leads to an inconsistent looking set of toolbar icons by default. The difference stands out even more when the toolbar labels are removed.
Expected behavior
The default toolbar buttons should all be the same size by default, which looks to be 24x24 since that is what new icons are added as with zero modifications (as shown in the second codesandbox link).
It feels like perhaps the font size "reduction" should be applied to the badge rather than the svg?
Context
The toolbar buttons, default and custom, should all have a consistent size by default.
Your environment
The environment is listed in the codesandbox links. This was tested with the latest versions of Chrome, Firefox and Edge.
Search keywords: toolbar icon size