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