[SvgIcon] Apply custom color if defined in the theme

[eps1lon]

Given

export default function SvgIconsColor() {
  const theme = createTheme({
    palette: {
      custom: { main: '#ec407a' },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <FavoriteRounded fontSize="large" />
      <FavoriteRounded fontSize="large" color="secondary" />
      <FavoriteRounded fontSize="large" color="custom" />
    </ThemeProvider>
  );
}

Before:

After:

Closes #27831 see https://codesandbox.io/s/material-ui-v5-icons-custom-color-bug-forked-mzyxm

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 9240056

[mnajdova]

Should we add some instructions for typescript? Or do we already support extending the color prop values?

[mnajdova]

Ah I saw, we already have it. Nevermind looks good :)

[eps1lon]

Will go through #25934 and add tests accordingly. #25934 just changed documentation but there was no verification of the implementation (either manually or automatically).

[mnajdova]

Perfect! Thanks for taking this up 💯

[mnajdova]

👍