Repository: material-ui
Issue: [material-ui][SvgIcon] Unable to set color override for custom SvgIcon
Labels: component: SvgIcon,package: material-ui,regression

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

Link to live example:  https://codesandbox.io/s/silent-wave-qm963x?file=/src/Demo.js

The live example is a minor change to the documentation example that demonstrates using SvgIcon.
https://mui.com/material-ui/icons/

Steps:

1. Using @mui/material@5.13.6 or later
2. Create a custom SVG Icon Component
`const SvgIconChildren = (props) => {
  return (
    <SvgIcon {...props}>
      {/* credit: plus icon from https://heroicons.com/ */}
      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="m2.46,14.35c.01-2.46.76-4.03,2.17-5.42l5.22-5.33,5.22,5.4c1.4,1.38,2.16,2.89,2.17,5.36H2.46Zm14.36-7.39L9.85,0,2.88,6.96c-1.92,1.92-2.88,4.48-2.88,6.95s.96,5.06,2.88,6.98c1.92,1.92,4.45,2.89,6.97,2.89s5.05-.97,6.97-2.89c1.92-1.92,2.88-4.52,2.88-6.98s-.96-5.03-2.88-6.95Z" />
      </svg>
    </SvgIcon>
  );
};
export default SvgIconChildren;`

4. Implement SvgIcon component with a color override
`<SvgIconChildren sx={{ color: pink[500] }} />`



### Current behavior 😯

Color of Icon is not updated to value specified in override.
![image](https://github.com/mui/material-ui/assets/36488484/1931d2ba-834c-4441-b7a9-7a64ae533d39)


### Expected behavior 🤔

Expected color to override 
In the sandbox I was able to confirm that reverting the version of @mui/material to 5.13.5 or earlier provides expected behavior.
![image](https://github.com/mui/material-ui/assets/36488484/8ad3ea24-5ddd-46e6-8973-c503201055cc)

### Context 🔦

We are stylizing our icons to convey status information to our users.  This resulted in a breaking change as we attempted to update to the latest material from 5.11.16 and found that a number of our icons are stuck in a default color (which occasionally is the same color as the background).  Plan to run 5.13.5 until issue is resolved or direction to correctly implement a SvgIcon that works with style overrides is provided.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 119.0.6045.160
    Edge: Spartan (44.19041.3636.0), Chromium (119.0.2151.93)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.1
    @emotion/styled: ^11.10.6 => 11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/core-downloads-tracker:  5.14.18
    @mui/icons-material: ^5.11.11 => 5.14.18
    @mui/lab: ^5.0.0-alpha.123 => 5.0.0-alpha.153
    @mui/material: ^5.13.5 => 5.13.5
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/system:  5.14.18
    @mui/types:  7.2.9
    @mui/utils:  5.14.18
    @types/react:  18.2.39
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  4.9.5
```
</details>