Fluent-Ui-React Icon Outline on Hover

Question

I am a beginner in fluent-UI with react (@fluentui/react-northstar 0.47.0)

I tried different solutions but couldn't solve this result. Kindly guide me here.

Currently, when I hover mouse on the icon it turned filled but I want to keep them outline either I hover the mouse or not.

Here is my observation, Fluent-UI render Icon on run-time like

<span> 
 <svg role-"img" data-aa-class="Icon">
 <g>
   <path class="ui-icon__filled" d="M16.707 ..."></path>

   <path class="ui-icon__outline" d="M16.707 ..."></path>
 </g>
 </svg>

</span>

This render on run time, I tried to achieve through CSS but couldn't. Anyone who knows about this

Answer 1

you can work on this by adding iconProps or styles

// can also import from office-ui-fabric-react in Fabric-based apps
import { mergeStyles } from '@uifabric/merge-styles';

const blueBackgroundClassName = mergeStyles({
  backgroundColor: 'green'
});
const className = mergeStyles(blueBackgroundClassName, {
  padding: 50, // px is assumed if no units are given
  selectors: {
    ':hover': {
      backgroundColor: 'red'
    }
  }
});

const myDiv = <div className={className}>I am a green div that turns red on hover!</div>;