Office UI Fabric Icons are gone SPFx in Teams

AJIXuMuK commented 5 years ago

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

Create a web part with any Office UI Fabric React component inside (button, details list, whatever) that can be used with icons
Add some icon to the component (for example, 'Edit' icon for Edit button)
deploy web part to MS Teams
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 commented 5 years ago

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

VesaJuvonen commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

AJIXuMuK commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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):

The web part doesn't have properties (properties interface is empty).

As a result of 1 Property Pane doesn't have any controls to render:

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

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 commented 5 years ago

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 commented 5 years ago

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

spplante commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

jasp402 commented 5 years ago

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 commented 4 years ago

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

xugao commented 4 years ago

https://github.com/OfficeDev/office-ui-fabric-react/issues/11393 is reported on the Fabric side and it looks related but not exact. could you also help take a look at this?

KevinTCoughlin commented 4 years ago

This is related to a regression with Fabric React 7 and Fabric Core styles filed at https://github.com/OfficeDev/office-ui-fabric-react/issues/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 commented 4 years ago

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

AJIXuMuK commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

johnguy0 commented 4 years ago

@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 commented 4 years ago

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

waldekmastykarz commented 4 years ago

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

PaoloPia commented 3 years ago

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 commented 3 years ago

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

SharePoint / sp-dev-docs