How do you apply a style to icon of type IIconProps in Fluid UI?

Question

I have button like the sample below with an icon (addFriendIcon).

How do I add a style to this icon? For example change the color?

import * as React from 'react'; import { ActionButton, IIconProps } from 'office-ui-fabric-react';

const addFriendIcon: IIconProps = { iconName: 'AddFriend' };

export const ButtonActionExample: React.FunctionComponent = props => {

return ( Create account ); };

Do you have a working example you can provide? If it's a react component, are you able to use `className`? — Dom, Aug 11 '20 at 22:11
Here's a codepen from the official MS fluid site https://codepen.io/evileddie/pen/zYqvjpQ?editable=true%3Dhttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui — EvilEddie, Aug 11 '20 at 22:24

score 4 · Accepted Answer · answered Aug 14 '20 at 06:17

4

If you want to do it the Fluent UI way, just add the according styles to the IIconProps:

const addFriendIcon: IIconProps = {
  iconName: 'AddFriend',
  styles: {
    root: { color: 'red' }
  }
};

answered Aug 14 '20 at 06:17

alex3683

1

can we change the color of the icon to comething onClick? Can you please share that code as well? – etotientz Mar 23 '22 at 18:06
1

I modified the codepen: https://codepen.io/alex3683/pen/RwarOrb – alex3683 Mar 24 '22 at 06:40

1 Answers1