Fluent UI React how to change nav link icon color?

Question

I want to change the nav link icon color. If I set the primary color by creating a custom theme it won't effect.

<ThemeProvider
  theme={{
    palette: {
      themePrimary: getTheme().palette.teal,
    }
  }}
>

Actually it worked on hover but not on normal view. I tried setting the iconProps but it didn't work either.

links: [
  {
    name: "Overview",
    icon: "WebAppBuilderFragment",
    iconProps: { color: "white" },
  },
],

How can I change these icons color?

Answer 1

IconProps is an object with following props. Use styles to set icon color:

links: [
  {
    name: "Overview",
    iconProps: {
      iconName: 'WebAppBuilderFragment',
      styles: {
        root: { color: '#f00' },
      },
    },
  },
],

Codepen working example.