[SvgIcon] Stroke color not inherited correctly

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When setting the color prop on an instance of SvgIcon, the fill property is properly overridden, but the stroke property is not, resulting in strokes being invisible (or whatever the default in the SVG markup is).

Expected behavior 🤔

stroke should inherit value from the color prop, same as fill does. FIx should be as simple as adding stroke: 'currentColor' to the component CSS, same as there already is for fill. I'm happy to put up a PR to fix this if that indeed is the desired behavior (and there are no concerns about unintended side effects).

Steps to reproduce 🕹

Steps:

Sandbox: https://codesandbox.io/s/reverent-golick-hifz71

1. Notice the circle is visible, but the line is not
2. Add stroke="currentColor" to the SvgIcon
3. Notice the circle and line are both visible now

Context 🔦

Creating a custom SVG icon that uses a mix of circles and lines.

Your environment 🌎

I couldn't get @mui/envinfo to run, but I'm on Firefox 100.0, @mui/material 5.8.0 and @mui/icons-material 5.8.0