[List] ListItemIcon color is too strict

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

When hovering on a list item containing: ListItemText, ExpandLess and ListItemIcon, we see that the ListItemText and ExpandLess icon receive a hover color. This is fairly simple:

This doesn’t include the ListItemIcon however

Expected Behavior 🤔

We want this

Steps to Reproduce 🕹

The code for the expected behavior is a bit strange:

https://codesandbox.io/s/material-demo-forked-l8nyn?file=/demo.js

->

Your Environment 🌎

System:
    OS: Windows 10 10.0.17763
  Binaries:
    Node: 12.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.93
    Edge: Not Found
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/styles:  4.11.3
    @material-ui/system:  4.11.3
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react:  17.0.3
    react: ^17.0.2 => 17.0.2
    react-dom: 

[oliviertassinari]

I had explored the color part of this issue in #24941. I have tried something but it didn’t work back then. Maybe we could continue from this proposal: https://github.com/mui-org/material-ui/issues/24941#issuecomment-785986913?

diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
index d6c4b03836..aa4c578eee 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -25,10 +25,11 @@ const ListItemIconRoot = styled('div', {

     return [styles.root, styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   },
-})(({ theme, styleProps }) => ({
+})(({ styleProps }) => ({
   /* Styles applied to the root element. */
   minWidth: 56,
-  color: theme.palette.action.active,
+  opacity: 0.65,
+  color: 'inherit',
   flexShrink: 0,
   display: 'inline-flex',
   /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */

output:

with a style={{ color: 'red' }} on the second <ListItem>.

[siriwatknp]

I think ListItemIcon works as expected because of the styling below so the color is needed to be overridden.

// ListItemIcon.js
  root: {
    minWidth: 56,
    color: theme.palette.action.active,
    flexShrink: 0,
    display: 'inline-flex',
  },