Repository: material-ui
Issue: [material-ui][SvgIcon] Can't add a custom color
Labels: support: question,component: SvgIcon,typescript,package: material-ui

### Steps to reproduce

Hi I am not sure what I am doing wrong but when I try to add a new color in palette I can use the instructions in documentation to define new module augmentation for most of the components to make new color available but for some reason for SvgIcon it doesn't  make any difference


https://mui.com/material-ui/customization/palette/#typescript


```
declare module '@mui/material/styles' {
    interface PaletteOptions {
        primaryLight?: PaletteColorOptions;
        secondaryLight?: PaletteColorOptions;
    }

    interface Palette {
        primaryLight: PaletteColor;
        secondaryLight: PaletteColor;
    }
}

// this works fine.
declare module '@mui/material/Button' {
    interface ButtonPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}

// but this doesn't
declare module '@mui/material/SvgIcon' {
    interface SvgIconOwnPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}
// or

declare module '@mui/material/SvgIcon' {
    interface SvgIconPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}

// tried this way but still no luck
declare module '@mui/icons-material/node_modules/@mui/material/SvgIcon' {
    interface SvgIconOwnPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}
// or

declare module '@mui/icons-material/node_modules/@mui/material/SvgIcon' {
    interface SvgIconPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}
```
```
src/views/pages/public/ResetPassword/ResetPasswordForm.tsx:132:69 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any, keyof IntrinsicElements>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses>; ... 6 more ...; viewBox?: string; } & CommonProps & Omit<...>): Element', gave the following error.
    Type '"primaryLight"' is not assignable to type 'OverridableStringUnion<"secondary" | "error" | "success" | "info" | "inherit" | "disabled" | "action" | "warning" | "primary", SvgIconPropsColorOverrides>'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
    Type '"primaryLight"' is not assignable to type 'OverridableStringUnion<"secondary" | "error" | "success" | "info" | "inherit" | "disabled" | "action" | "warning" | "primary", SvgIconPropsColorOverrides>'.

132                                             checkedIcon={<CheckIcon color='primaryLight' />}
                                                                        ~~~~~

  node_modules/@mui/icons-material/node_modules/@mui/material/SvgIcon/SvgIcon.d.ts:27:5
    27     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any, keyof IntrinsicElements>; } & { children?: ReactNode; classes?: Partial<...>; ... 6 more ...; viewBox?: string; } & CommonProps & Omit<...>'
  node_modules/@mui/icons-material/node_modules/@mui/material/SvgIcon/SvgIcon.d.ts:27:5
    27     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses>; color?: OverridableStringUnion<"secondary" | "error" | "success" | ... 5 more ... | "primary", SvgIconPropsColorOverrides>; ... 5 more ...; viewBox?: string; } & CommonProps & Omit<...>'


```


### Current behavior

defining module augmentation for new palette color does not affect on SvgIcon color definitions. 

### Expected behavior

It should work the same way other components as described in documentation. 

### Context

_No response_

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
  Binaries:
    Node: 18.13.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.224
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base: ^5.0.0-beta.30 => 5.0.0-beta.33 
    @mui/core:  5.0.0-alpha.47 
    @mui/core-downloads-tracker:  5.15.6 
    @mui/icons-material:  5.0.0 
    @mui/lab: ^5.0.0-alpha.159 => 5.0.0-alpha.162 
    @mui/material: ^5.15.3 => 5.15.6 
    @mui/private-theming:  5.15.6 
    @mui/styled-engine:  5.15.6 
    @mui/styles: ^5.15.3 => 5.15.6 
    @mui/system:  5.15.6 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.6 
    @mui/x-date-pickers: ^6.18.7 => 6.19.2 
    @types/react: ^18.2.43 => 18.2.48 
    react: ^17.0.0 => 17.0.2 
    react-dom: ^17.0.0 => 17.0.2 
    typescript: ^5.2.2 => 5.3.3 

```
</details>

<details>
  <summary><code>tdconfig.json</code></summary>

```
 {
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "noEmitOnError": false,
    "jsx": "react-jsx",
    "rootDir": "./src",
    "baseUrl": "./src",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "include": [
    "src",
    "./src/types"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

```
</details>


**Search keywords**: SvgIconOwnPropsColorOverrides