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

Question

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

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.

Answer 1

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://learn.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!

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:

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://learn.microsoft.com/en-us/typography/fonts/font-faq#document-embedding).