Two-color warning icon

[huayunh]

Describe the desired behavior

Would love to see an icon like this that takes theme.palette.warning.main as its background color, and theme.palette.warning.dark as its foreground color, by default under both light and dark themes.

Describe the current behavior

Not offered by default. The default yellow gives a light yellow that is inaccessible (contrast less than 2)

Is this request related to a current issue?

Part of the A11y initiative

Additional Context

• Only this icon is in urgent need as it is used extensively across Eaton to convey the idea of "warning". But I can see in the future how we might want to support additional icons like this outlined format
• The icon shape come directly from Material Design's warning icon.

[bkarambe]

@huayunh All of our icons share a contrast colors, we haven't added any specific contrast color override for a single icon.

[huayunh]

I don't understand. This is a feature request to write a new component.