Fluent UI react missing icons in Dropdown and DatePicker

Question

I'm creating an electron-app that uses Microsoft fluent-ui lib. I have added the reference @fluentui/react": "^7.107.1 to the package.json file. When I then create a Dropdown like this

<Dropdown label='Time zone' onChange={(e, option) => this.updateTimeZone(..)} />

The caret with the drop down icon is missing.

When inspecting the element, it seems as the i-tag is empty and does not have the right font applied in the css-class, when compared to examples in the documentation.

Could someone see what I'm doing wrong?

Answer 1

By default, the Fabric icons are not added to your bundle, in order to save bytes for scenarios where you don't care about icons, or you only care about a subset.

To make them available, you may initialize them as such:

import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';

initializeIcons(/* optional base url */);