ListItemButton passes style to ListItemText but not ListItemIcon

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I can apply color styles to <ListItemButton> and they pass to the child <ListItemText> but they don't pass to <ListItemIcon>. I want my hover to apply the text color to everything under the button and I don't see a way to do that. The background color works as expected, but not the 'color' property

<ListItemButton
        sx={{
          "&.Mui-selected": {
            backgroundColor: "red",
            color: "white",
            ":hover": {
              backgroundColor: "yellow",
              color: "gray"
            }
          },
          ":hover": {
            backgroundColor: "blue",
            color: "yellow"
          }
        }}
        selected={selected}
        onClick={() => setSelected((prev) => !prev)}
      >
    <ListItemIcon>
          <AcUnitIcon />
    </ListItemIcon>
    <ListItemText primary="Some Text" />
 </ListItemButton>

Here is a CodeSandbox: [](https://codesandbox.io/s/mui-listitemicon-not-taking-style-from-parent-listitembutton-y9qj9k?file=/src/App.js:560-1144)

### Expected behavior 🤔

I would expect both the text and the icon to get the button's style.  I can hover the text or the icon, but not both.

### Steps to reproduce 🕹

Steps:


[](https://codesandbox.io/s/mui-listitemicon-not-taking-style-from-parent-listitembutton-y9qj9k?file=/src/App.js:560-1144)
https://codesandbox.io/s/mui-listitemicon-not-taking-style-from-parent-listitembutton-y9qj9k?file=/src/App.js:560-1144

### Context 🔦

I want to hover and select the List item parent and have the style apply to both the text and icon

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

Browser: Chrome Version 103.0.5060.114 (Official Build) (32-bit)

System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
npm: 8.2.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 103.0.5060.114
Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.44)
npmPackages:
@emotion/react: ^11.9.3 => 11.9.3
@emotion/styled: ^11.9.3 => 11.9.3
@mui/base: 5.0.0-alpha.87
@mui/icons-material: ^5.8.4 => 5.8.4
@mui/material: ^5.8.6 => 5.8.6
@mui/private-theming: 5.8.6
@mui/styled-engine: 5.8.0
@mui/system: 5.8.6
@mui/types: 7.1.4
@mui/utils: 5.8.6
@types/react: ^18.0.14 => 18.0.14
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.7.4 => 4.7.4

</details>

Start with the linked CodeSandbox reproduction and inspect how ListItemButton styles are inherited by ListItemText and ListItemIcon. Compare the selected and hover states, then verify that the icon follows the button's color in both states without breaking the existing background behavior.