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.

let CheckedIcon = Fui.bundleIcon bundleIcons.checkbox1

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

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

Advanced Usage:

If on the off chance you need to mix and match Filled and Regular versions of **different ** icons, you can do something like this:

let customBundleIcons = { Filled = bundleIcons.airplaneTakeOff.Filled; Regular = bundleIcons.airplaneLanding.Regular }
Fui.bundleIcon customBundleIcons

You can also import icons by name in order to use them with bundleIcon. This was created because, as it currently stands, there are roughly 50 icons that don't have Filled or Regular counterparts and therefore were removed from the list of bundleIcons. You can also use this to import an Icon that is in the TS docs but is not yet in FS.FluentUI, so long as you're using the newest version of @fluentui/react-components.

Please see https://react.fluentui.dev/?path=/docs/icons-catalog--docs for all FluentUI icons.
WARNING: Mispelling the iconName or passing an iconName that doesn't exist in the library will cause a runtime error.

let customBundleIcons = { Filled = bundleIcons.import "SomeOtherAirplaceIcon"; Regular = bundleIcons.airplaneLanding.Regular }
Fui.bundleIcon customBundleIcons