Hardcoded width in ListItemIcon

[thany]

Steps to reproduce

Steps:

1. Open this demo: https://mui.com/material-ui/react-list/#nested-list
2. Observe the huge amount of space reserved for the icon - 56px for a 24px icon
3. Open the next demo: https://mui.com/material-ui/react-menu/#icon-menu
4. Observe the much more modest amount of space reserved for an icon - 36px for a 24px icon

Current behavior

There is an arbitrary difference in the min-width for the ListItemIcon component, decided based on where it happens to be used - in a menu or in a list.

The min-width is hardcoded into the component:
https://github.com/mui/material-ui/blob/master/packages/mui-material/src/ListItemIcon/ListItemIcon.js#L32

Expected behavior

• ListItemIcon should behave consistently. Making it wider or narrower purely based on where in the component tree this component sits, is arbitrary and leads to confusion.
• This width should not be hardcoded, especially not in pixels. With all due respect, you as MUI developers cannot know with any degree of certainty how big a contained icon is going to be. Or maybe there'll be two.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.4.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 138.0.7204.169
    Edge: Chromium (137.0.3296.83)
  npmPackages:
    @mui/core-downloads-tracker:  7.1.2
    @mui/material: ^7.1.2 => 7.1.2
    @mui/private-theming:  7.1.1
    @mui/styled-engine:  7.1.1
    @mui/system:  7.1.1
    @mui/utils:  7.1.1
    @mui/x-date-pickers: ^8.4.0 => 8.4.0
    @mui/x-internals:  8.4.0

Browser actually used: latest Firefox. (on a sidenote, I'm once again gobsmacked why Firefox isn't listed, as env-tools like this have been around for a little while now, and most still don't "see" Firefox).

Search keywords: listitemicon width

[siriwatknp]

As a workaround, you can customize it through theme like this:

const theme = createTheme({
  components: {
    MuiListItemIcon: {
      styleOverrides: {
        root: ({ theme: t }) => ({
          minWidth: t.spacing(4.5),
        }),
      },
    },
  },
});

https://stackblitz.com/edit/4gajnmiu?file=src%2FDemo.tsx

[thany]

Sure, I got to that point as well. But respectfully, a workaround as always, can act as a disincentive to fixing a problem properly.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@thany Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.