Office UI Fabric Icons are gone SPFx in Teams

[AJIXuMuK]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

Office UI Fabric Icons are rendered correctly

Observed Behavior

Office UI Fabric Icons are rendered correctly. Everything worked fine last week. But now no icons at all...

Steps to Reproduce

1. Create a web part with any Office UI Fabric React component inside (button, details list, whatever) that can be used with icons
2. Add some icon to the component (for example, 'Edit' icon for Edit button)
3. deploy web part to MS Teams
4. Observe the issue

My current configuration of the web part:

"dependencies": {
    "@microsoft/sp-core-library": "1.8.0",
    "@microsoft/sp-lodash-subset": "1.8.0",
    "@microsoft/sp-office-ui-fabric-core": "1.8.0",
    "@microsoft/sp-webpart-base": "1.8.0",
    "@pnp/common": "^1.2.8",
    "@pnp/logging": "^1.2.8",
    "@pnp/odata": "^1.2.8",
    "@pnp/polyfill-ie11": "^1.0.1",
    "@pnp/sp": "^1.2.8",
    "@pnp/spfx-controls-react": "1.11.0",
    "@pnp/spfx-property-controls": "1.14.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.5",
    "@types/webpack-env": "1.13.1",
    "escape-html": "^1.0.3",
    "moment": "^2.24.0",
    "react": "16.3.2",
    "react-dom": "16.3.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.8.0",
    "@microsoft/sp-module-interfaces": "1.8.0",
    "@microsoft/sp-tslint-rules": "1.8.0",
    "@microsoft/sp-webpart-workbench": "1.8.0",
    "@microsoft/rush-stack-compiler-3.3": "0.1.7",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1"
  }

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[VesaJuvonen]

Thx @AJIXuMuK - it seems that your package.json is missing the explict definition of the fabric package, which then means that you might be using either 5.x or 6.x which can cause challenges... technically as you are using pnp controls you'd need to have an entry for 5.x and then retest...

Adding that there explicitly would obviously mean the following:
npm install office-ui-fabric-react@5.132.0 --save

This is required starting from 1.8 release as we technically support multiple versions, which is why we have updated tutorials to include also this, like in here - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

[srideshpande]

In addition to what @VesaJuvonen said, could you also please share your sample code, to know how are you using icons in your code.

Thanks!

[AJIXuMuK]

Hi @VesaJuvonen,
I've installed 5.x version of OUIFR. But the problem is still there.

@srideshpande here is an example of icons usage, related to Command Bar:

farItems.push({
        key: 'configuration',
        iconProps: {
          iconName: 'Settings'
        },
        subMenuProps: {
          items: [{
            key: 'settings',
            name: strings.TeamPapersSettings,
            iconProps: {
              iconName: 'BulletedList2'
            },
            onClick: this._onSettingsMenuItemClick.bind(this)
          }, {
            key: 'setup',
            name: strings.TeamPapersSetup,
            iconProps: {
              iconName: 'DeveloperTools'
            },
            onClick: this._onSettingsMenuItemClick.bind(this)
          }]
        }
      });
// ...
return (
      <div className={styles.meetingsList}>
        <CommandBar
          items={commandBarItems}
          farItems={farItems} />
     </div>);

[AJIXuMuK]

Hmmm...
If I create a simple example from scratch - it works...
Will investigate further.

[AJIXuMuK]

Ok, so it looks like that for some reason initializeIcons function from OUIFR is not called for my web part.
I called it by myself in onInit and now the icons are there:

protected onInit(): Promise<any> {
    initializeIcons();
    ...
}

If you have any ideas on why it could happen - I'd be happy to hear...

[srideshpande]

@AJIXuMuK - Thanks for getting back to us.

When you say, from scratch, can you please outline what exactly did you do? Which version of SPFx did you install?

I am surprised that you had to make the call for initializing the icons. You should not be doing that.

I will look into it further, as to why is it the case.

Thanks,
Sri

[AJIXuMuK]

Hi @srideshpande,
If I create SPFx project using v1.8.1 or v1.8.0 of generator, and add OUIFR with command bar in there - everything works fine.
But in my actual project for some reason it stopped working last week.
I was trying to figure out what could lead to that but unable to find something special... That's why I've added initializeIcons() to onInit.
Here are some configurations that are not too common for web parts but are used in my solution (maybe it will give you some ideas):

1. The web part doesn't have properties (properties interface is empty).
2. As a result of 1 Property Pane doesn't have any controls to render:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: []
    };
  }

3. The web part is configured to be used in Teams only, and with disabled configuration update:

"supportedHosts": ["TeamsTab"],
"canUpdateConfiguration": false,

It's really unfortunate that I can't provide some simple example to you that showcases the issue. That's why I'm asking if you guys, as developers, could have any top of head ideas why such behavior could appear.

[srideshpande]

Ah I see. # 3 is helpful. I will dig more into it, in that context. # 1 and # 2 should not have any side-effects at all.

Thanks for the information, I will get back to you with my findings? Also, do you know if anyone else is also seeing this issue?

[AJIXuMuK]

Thank you for spending your time on that!
I'm not aware of anyone else seeing such an issue.