Some of icons are not displaying in SPFx solution

[siddharth-vaghasia]

Some of the office UI fabric icons not displaying in SPFx webpart

Environment Information

• Package version(s):
  "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
  office-ui-fabric-react@5.21.0

• Browser and OS versions: Chrome 78.0.3904.108 on Windows 10

Actual behavior:

Some of icons are not getting displayed when used with office ui fabric react in SPFx webpart. Below is my code.

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

<Icon iconName={"AccountManagement"} />
<Icon iconName={"BuildDefinition"} />
<Icon iconName={"ExternalBuild"} />

Below are some of icon name which are working fine and many others....

<Icon iconName={"BuildQueueNew"} />
<Icon iconName={"WebAppBuilderFragmentCreate"} />

I also tried to call method intializeIcons() but still same behavior.

import { initializeIcons } from '@uifabric/icons';
// Below method was called in render method of react component.
initializeIcons();

Expected behavior:

All the icons should display correctly.

Observation and Analysis

When we remove one css property from tag, missing icons are getting displayed correctly.

Priorities and help requested:

Are you willing to submit a PR to fix? - No

Requested priority: Normal

Products/sites affected: (if applicable)

[xugao]

@siddharth-vaghasia - if I am not mistaken, this css is added by your app, not by fabric, and this is what's breaking you:

If so, can we investigate in your app code why this style is being dropped?

[siddharth-vaghasia]

Thanks... this css is not added by app but default rendered as part of office UI fabric.we have not added any css in icon. Hope this helps.. Thanks

On Fri, 6 Dec 2019 at 10:29 PM, Xu Gao ***@***.***> wrote: @siddharth-vaghasia <https://github.com/siddharth-vaghasia> - if I am not mistaken, this css is added by your app, not by fabric, and this is what's breaking you: [image: image] <https://user-images.githubusercontent.com/1207059/70340956-b001cd80-1806-11ea-9595-4f513619cb5c.png> If so, can we investigate in your app code why this style is being dropped? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11393>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACI5MNJYN65XYIRSGOUUMNLQXKAIRANCNFSM4JWQEE4Q> .

-- Siddharth Vaghasia

[xugao]

@siddharth-vaghasia - to clarify - i don't meant the font-family or any icons of your own. i meant by this entire block:

.ms-SPLegacyFabricBlock .ms-Icon { ... }

This looks like CSS from your app

[siddharth-vaghasia]

@siddharth-vaghasia ...this entire block is not from my app, it is being added automatically.

[xugao]

@siddharth-vaghasia - ok i see. .ms-SPLegacyFabricBlock is not something Fabric would add. It must be from SPFx. I will need to ask around my team and get back to you.

[khmakoto]

@siddharth-vaghasia do you use the Fabric provided icons or do you provide your own icons in your SPFx solution?

[siddharth-vaghasia]

@khmakoto ....I am using Fabric provided icons...

[xugao]

@siddharth-vaghasia - we will need help from SPFx to understand/resolve this issue. a related issue from SPFx side is mentioned above

[KevinTCoughlin]

This is related to a regression with Fabric React 7 and Fabric Core styles filed at #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

[xugao]

resolving this issue as fixed by #11524