[icons] Material Icons do not support Joy UI's "danger" color prop

[NaveenEdala]

Steps to reproduce

Link to live example:

Steps:

1. Import any Icon from "@mui/icons-material"
2. Import Button from "@mui/joy"
3. Set the color prop on any Icon to "danger"

Current behavior

Type '"danger"' is not assignable to type '"primary" | "success" | "warning" | "disabled" | "action" | "inherit" | "secondary" | "error" | "info" | undefined'.

Expected behavior

Expected behavior is for the icon to inherit the red "danger" color, as is the case with all Joy components.

Context

I'm trying to use it to create simple label strings (in )

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Icons, Icons-Material, Joy UI, Danger

[danilo-leal]

Heya @NaveenEdala, thanks for the issue! I see that's an issue, but I'd expect to have some way to map Joy's danger prop to Material's error prop instead of the Material Icons package, also accounting for something that's not Material Design. @siriwatknp any ideas there? I'm not sure we should focus on this too much, too, though.