How do I change the color of Fabric icons?

[digitalsadhu]

The design I'm working against uses icons that are colored but the Fabric icons package only provides grey. How can I deal with this?

[digitalsadhu]

Whoa whoa whoa. Hold up there. First. Check that the icon you are using really should be colored. There are some cases where icons can be primary blue rather than grey but outside of that you might want to ask your designer to check in with the other designers about this.

Ok, that said. If you do need an icon to be a color other than grey, here are your options.

1. If you are using Vue or React components, you just need to set the text color you want on the icon.

For React, this will look like:

<LockShield className="text-blue-600" />

Similar in Vue

<lock-shield class="text-blue-600" />

2. If you are using SVGs directly by importing the svg markup and adding it to the page, you can achieve something similar by adding the color to a parent tag. The SVG should then inherit the color.

<div class="text-blue-600">
  ${svg}
</div>