Cannot change icon color when importing icons from react-icons repository

[Alihumza121]

i am using as it is import * as GrIcons from "react-icons/gr";

<GrIcons.GrAnnounce color="#004aff" size={18} />

[xiata]

Noticed this as well. Some but not all icons have stroke="#000" in the svg markup which prevents the fill="currentColor" on the <svg> tag from working.

[halocline]

I am not super familiar with the react-icons project -- we will need to look into how Grommet Icons are plugging into their setup.

Accessing Grommet Icons directly allows for changing each icon's color as desired:

import * as GrIcons from "grommet-icons";

export default function App() {
  return <GrIcons.Announce color="#004aff" />;
}

CodeSandbox Example

[calebchiam]

I was able to style it by adding a CSS class to the icon, i.e.

import { GrPrevious } from "react-icons/all";

export default function App() {
    <GrPrevious className={"someColor"} />
}

And in the css:

.someColor polyline {
    stroke: rgb(211, 211, 211) !important;
}