Office-ui-fabric-core some icons are not showing

user_6639020 0
Viewed 8364

I am building office addins for Project. It is really weird that even though I am using proper icon names some icons are not showing

Followed everything from the official documentation

https://developer.microsoft.com/en-us/fabric#/get-started#fabric-core

and the CSS CDN 

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css" />

In Project Taskpane: Side loading State

enter image description here

Using the correct format in HTML:

   <li class="ms-ListItem">
    <i class="ms-Icon ms-Icon--MapLayers"></i>
    <span class="ms-font-m ms-fontColor-neutralPrimary">Export *****"

Note: Here MapLayers is the icon which is failed to load.

Any help is appreciated.

office-ui-fabric office365 office-addins office-js ms-project
2 Answers

I noticed that the CSS you're importing doesn't actually have the "--MapLayers" class. Though some of the Office UI documentation (like this one: https://uifabricicons.azurewebsites.net/) shows MapLayers exists as an icon in the "FabricMDL2Icons" font family, I don't think it does, or at least not in whatever version of the font family this other documentation uses: https://developer.microsoft.com/en-us/fabric#/styles/web/icons (you can search by MapLayers and notice that it won't be found on this 2nd site). You'll also notice that the "MayLayers" icon is '\uE81E', but I think that's only in the "Segoe MDL2 Assets" font-family (which is native to Windows 10: https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font).

If you open Windows 10's character map, change the font family, and navigate to U+E81E, you'll find it!

MapLayers unicode character in Segoe MDL2 Assets

Basically, if you want to use the MapLayers icon, you'll need to make your own CSS MapLayers class that uses "Segoe MDL2 Assets" as the font-family and has content of "\E81E". Here is a hacky demo where I overloaded the AADLogo class in the codepen to make it show the MapLayers icon: MapLayers icon with custom CSS

However, I think this would only work on Windows 10 PCs (unless your website includes the Segoe MDL2 Assets font-family as a resource?). Perhaps someone from the Office UI team can comment on the discrepancies between the various documentations or if MapLayers is coming soon with a font-family version upgrade or something...

But if you're just interested in getting a MapLayers icon to show up, I think you'd need to do the following:
1. Making your own CSS class for it with "Segoe MDL2 Assets" as the font-family
2. Use "\E81E" as the CSS content
2b. Directly include the "Segoe MDL2 Assets" font-family in your site (which may or may not be against Microsoft's terms of service: https://docs.microsoft.com/en-us/typography/fonts/font-faq#document-embedding).

user_87088170

I have tried few more available icons from the link

https://developer.microsoft.com/en-us/fabric#/styles/web/icons

Example: BackgroundColor

enter image description here

Surprisingly some are loading some are not loading again.

Then I added the following class for my parent div. Then the icons were displaying.

<body class="ms-Fabric" dir="ltr">
  <span class="ms-font-su ms-fontColor-BackgroundColor">Big blue text</span>
</body>

Here class is "ms-Fabric"

Note: I am loading fabric core from cdn via index.html.

May be this will help some one facing same problem..

user_66390200
Related