How to change Fluent UI icon color on mouse hover?

Question

i am using Fluent UI in my project.

I initializing my button with this simple code in javascript:

iconProps: { 
    iconName: 'NewFolder',
        styles: {
           root: { 
              color: 'orange' 
           }, 
    } 
},

and i can override default color to asked one.

My question is, how to set mouse hover color over button?

https://learn.microsoft.com/en-us/javascript/api/react/iiconprops?view=office-ui-fabric-react-latest#@fluentui-react-iiconprops-styles-member

Answer 1

For IconButton, DefaultButton and PrimaryButton you have property root for default button style, rootHovered, rootChecked etc. for different states.

<IconButton
  iconProps={{ iconName: 'NewFolder' }}
  styles={{
    root: { color: 'blue' },
    rootHovered: { color: 'orange' },
  }}
/>

Codepen working example

Button styles also might help.