EuiIcon allows coloring icons via any valid color string or by one of our named color strings that match the branding colors. The app style icons have 2 colors. One that is the inherited fill and the other which uses the class .euiIcon__fillSecondary to fill with a different color.
Our docs specify that passing the color prop will override both the basic fill and the secondary fill.
This works properly when the value of color that is passed is one of our named colors like primary or text:
However, it doesn't properly work when passing a custom color string like a hex value or red:
EuiIcon allows coloring icons via any valid color string or by one of our named color strings that match the branding colors. The app style icons have 2 colors. One that is the inherited fill and the other which uses the class
.euiIcon__fillSecondaryto fill with a different color.Our docs specify that passing the
colorprop will override both the basic fill and the secondary fill.This works properly when the value of
colorthat is passed is one of our named colors likeprimaryortext:However, it doesn't properly work when passing a custom color string like a hex value or
red: