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.

[spplante]

Same issue here, even office ui fabric's own controls aren't showing icons in Teams. We have a Panel component that doesn't show the "X" close button when displayed in Teams

[FrankMuraschow]

Same issue here, even office ui fabric's own controls aren't showing icons in Teams. We have a Panel component that doesn't show the "X" close button when displayed in Teams

I can confirm that. It doesn't show any icons.

After analyzing the web interface of the team in question I saw, that

• the icons aren't requested
• the font-family CSS-property doesn't get set to FabricMDL2Icons

It seems there's some initialization missing.

Edit: I found the work around method @AJIXuMuK mentioned and it worked. I needed to import it like that: import { initializeIcons } from 'office-ui-fabric-react';

[nsksaisaravana]

I am using command bar, panel and both don't show the icons.

@AJIXuMuK @Gitkohn You guys saved my time. Thanks, guys, your solution works like charm.

[srideshpande]

Hi @AJIXuMuK ,
Can you try adding the ”loadLegacyFabricCss”: true flag in your web part's manifest and see if that helps?

[jasp402]

I also have the same problem however it is not with all the elements only some.

I have taken the icons from this source:
uifabricicons

I have used "UserWarning", "WebAppBuilderModule"
among others. but they are not displayed.

I have cast

import {initializeIcons} from "office-ui-fabric-react";
initializeIcons ();

but it still doesn't work for me

My version the package.json is:

"office-ui-fabric-react": "^ 6.199.0",
"@ uifabric / fluent-theme": "^ 0.16.20",

and my code is:

 items: [{
            key: 'any',
            name: 'deceased',
            iconProps: {
              iconName: 'UserWarning'
            }
          },

[ideloge]

Hello,
I do have the exact same issue, none of the office ui icons are loaded. The font: FabricMDL2Icons doesn't get set.

[xugao]

microsoft/fluentui#11393 is reported on the Fabric side and it looks related but not exact. could you also help take a look at this?

[KevinTCoughlin]

This is related to a regression with Fabric React 7 and Fabric Core styles filed at microsoft/fluentui#10449. It is currently unresolved.

SPFx introduced a guard for the above for existing and future solutions. See SPFx documentation for safely using Fabric core styles: https://github.com/SharePoint/sp-dev-docs/wiki/Safely-using-legacy-Fabric-Styles.

cc: @patmill @VesaJuvonen

[johnguy0]

After following the updated guidance from @KevinTCoughlin , does anyone still have a repro?

[AJIXuMuK]

Hi @johnguy0!
My solution uses version 1.8.0.
From @KevinTCoughlin's url:

For solutions using SPFx < 1.8.2, no action is required to use legacy Fabric core styles.

But if I don't call initializeIcons the icons are not rendered.
So, at least, something is broken for SPFx < 1.8.2

[waldekmastykarz]

I'm seeing the same issue with SPFx v1.10. Icons show just fine in SharePoint/Workbench but when loading the web part as a personal Teams app or a tab, no icons are displayed. Adding "loadLegacyFabricCss": true to the web part's manifest didn't change anything.

Interestingly enough, I can't repro it in a vanilla SPFx v1.10 project with nothing but an icon. In that project, the icon is displayed just fine.

[AJIXuMuK]

Same for me. I’ve never been able to repro it on a vanilla project.

[johnguy0]

@AJIXuMuK @waldekmastykarz We'll try to reproduce this internally. Can you provide a tenant (site subscription) id? We need to check the status of some code rolling out.

[AJIXuMuK]

@johnguy0 I tested on multiple tenants. One of those: 15d095b1-76f0-493f-8cd4-114a12013570

[waldekmastykarz]

I'm having the issue on d7443bf1-2e8a-4143-855e-b01d029a83dc

[PaoloPia]

So, after further investigation and based on what we can read here (https://github.com/microsoft/fluentui/wiki/Using-icons#font-based-icons) it is mandatory to invoke initializeIcons() in the OnInit() method of the web part, as already suggested by @AJIXuMuK. So, as a recap:

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

and then:

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

In fact, adding that method call fixes the issue and the CommandBar icons are visible both in SPO and Teams. Just leaving this comment here for future reference. I'm also going to close this item, to avoid keeping open issues longer than needed.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues