Office UI Fabric React Message Bar Icon not displaying

Question

I have written a SPFX Application Customizer.

The purpose of the customizer is to read in the current page list ID and Site Url. It then passes the information through to the React Components.

I have a main React component (MainClosureBar) that loads up two sub components. (SiteClosure and LibraryClosure) Each sub component performs some calls and then renders a MessageBar depending on values from the calls.

• MainClosureBar.tsx
  • SiteClosureBar.tsx
  • LibraryClosureBar.tsx

The HTML for my message bar that is in both SiteClosureBar and LibraryClosureBar is below.

<MessageBar className={this.state.classMessageBar} messageBarType={this.state.messageBarType} ariaLabel={this.state.message} isMultiline={false}>{this.state.message}</MessageBar>

When running in debug mode the Icon for the MessageBar display's correctly.

However, if I deploy the SPFX to the App store and create a custom action to load the App, when it displays the two MessageBars the icon is a square.

I've worked out why this is happening but unsure how to fix. I'm using this code on a Library page and I've noticed that in the network calls, static2.sharepointonline.com/files/fabric/assets/icons/…woff are not loading. These load automatically on Modern pages, but not on modern Library pages. How can I ensure these load?

Answer 1

I was missing an import in my sass file. At the top of my file I added the import

@import '~office-ui-fabric-core/dist/sass/Fabric.scss'