bundleIcon

You can use the bundleIcon method to bundle a filled and unfilled version of an icon which will combine them into one icon.

❌ let AddIcon = Fui.bundleIcon(Fui.icon.addCircleFilled [], Fui.icon.addCircleRegular [])

✅ let AddIcon = Fui.bundleIcon bundleIcons.addCircle

In the following example, the icons are toggled depending on if the button isChecked. Some components will toggle between the two icons on-hover, on-click, or not at all. Please see Microsoft's documentation for more examples.

[<ReactComponent>]
let ToggleButton () =
    let isChecked, setIsChecked = React.useState true

    let CheckedIcon = Fui.bundleIcon bundleIcons.checkbox1

    Fui.toggleButton [
        toggleButton.icon (CheckedIcon [ icon.style [ style.color.green ] ])
        toggleButton.checked' isChecked
        toggleButton.onClick (fun _ -> setIsChecked (isChecked |> not))
        toggleButton.text "Button Text"
    ]