Office UI Fabric React Message Bar Icon not displaying
-
07-01-2021 - |
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?
Solution
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'