CODEWITHSUNDEEP
reactjsoffice-ui-fabricoffice-ui-fabric-reactoffice-fabricfluent-ui
EvilEddie
EvilEddie

Reputation: 1035

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

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

https://developer.microsoft.com/en-us/fluentui#/controls/web/button

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 ); };

Upvotes: 2

Views: 6680

Answers (1)

alex3683
alex3683

Reputation: 1565

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' }
  }
};

Here is the adjusted codepen: https://codepen.io/alex3683/pen/RwarOrb

Upvotes: 4

Related Questions