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

  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