Local Copy of Fabric Core Styles Not Loading Icons

[donschaefer]

Please provide a reproduction of the bug in a codepen:

https://codepen.io/anon/pen/NOEymG

Bug Report

• Package version(s):

"@uifabric/icons@>=5.8.0 <6.0.0":
  version "5.8.0"
  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons- 
  5.8.0.tgz#fb7e4476a88e5b6ea1d121163f924bbc35a02b28"
  integrity //omitted//
  dependencies:
    "@uifabric/styling" ">=5.30.1 <6.0.0"
    tslib "^1.7.1"

"@uifabric/merge-styles@>=5.17.1 <6.0.0":
  version "5.17.1"
  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz#9325817069011efb5f425e0fd163a975d9a12a3c"
  integrity //omitted//
  dependencies:
    tslib "^1.7.1"

"@uifabric/styling@>=5.30.1 <6.0.0", "@uifabric/styling@>=5.36.0 <6.0.0":
  version "5.36.0"
  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-5.36.0.tgz#46d53b501703346ee85fea39d06705bb25db8d04"
  integrity //omitted//
  dependencies:
    "@microsoft/load-themed-styles" "^1.7.13"
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    "@uifabric/utilities" ">=5.34.1 <6.0.0"
    tslib "^1.7.1"

"@uifabric/utilities@>=5.34.1 <6.0.0", "@uifabric/utilities@>=5.34.2 <6.0.0":
  version "5.34.2"
  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-5.34.2.tgz#78eb1b42cebf361ce3de07f99c99c7c18ea2f555"
  integrity //omitted//
  dependencies:
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    prop-types "^15.5.10"
    tslib "^1.7.1"

• Browser and OS versions:
  (not relevant)

Priorities and help requested:

Are you willing to submit a PR to fix?
No

Requested priority:
Normal

Products/sites affected:
Any

Describe the issue:

Preface:
Ultimately, my goal is to use the CDN-referenced styles via...
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
...as recommended. Unfortunately, my difficulties with doing that are not consistently reproducible (documentation of those issues, as best I can provide, is available at https://stackoverflow.com/questions/52961823/why-arent-office-ui-fabric-core-css-icons-loading-consistently-from-cdn). In the process of troubleshooting those issues however, I came across the following...

Issue:
When using a downloaded copy of the styles found at https://github.com/OfficeDev/office-ui-fabric-core/releases (file directory & name: fabric-core-9.6.1\css\fabric.min.css), I'm unable to get icons to load that (usually) DO work when referencing the CDN copy of the same file.

Actual behavior:

Button with no icon is rendered when when the following code is added:
<a href="https://myapps.microsoft.com/" className="o365-button" target="_blank"><i className="ms-Icon ms-Icon--WaffleOffice365" aria-label="Access Office 365 Applications">&nbsp;</i></a>

Expected behavior:

Button with icon is rendered when when the following code is added:
<a href="https://myapps.microsoft.com/" className="o365-button" target="_blank"><i className="ms-Icon ms-Icon--WaffleOffice365" aria-label="Access Office 365 Applications">&nbsp;</i></a>

[cliffkoh]

Hey, is there a reason you're on Fabric 5? Fabric 5 is not being actively worked on and is only being serviced for high priority bugs.

Does this repro if you're on Fabric 6?

Nevertheless, cc-ing @Jahnp as this is an issue with icons.

[donschaefer]

@cliffkoh - I'm not aware of a specific reason other than to say I'm part of a larger team working on a project that we've been in development on for the larger part of the year & we haven't been in a hurry to introduce potential new variables into the project by switching/upgrading to a new major version. If that ultimately is determined to be the root of the issue though, I'm sure we'll weigh the pros/cons of a switch accordingly & go from there.

[cliffkoh]

Hi @donschaefer, thanks for the info. Just as a general principle, I would encourage trying to see if you can repro the issue if you upgrade to Fabric 6 stack. That is the way for us to be most in a position to help.

Having said that, @Jahnp is the expert here and is best in the position to offer advice, if any, beyond upgrade to Fabric 6.

[donschaefer]

@cliffkoh the bug/codepen that I provided uses Fabric 6, but I just realized this was probably the wrong place to post it since the root of the bug I was trying to address with this was with Fabric Core rather than Fabric React. It wasn't my intention to use this thread to troubleshoot the issue I've outlined on StackOverflow, but rather to just troubleshoot the specific bug I had experienced when downloading/referencing a local copy of the latest Fabric Core stylesheet. To that end (and for anyone who happens to come across this bug first while experiencing a similar issue), I've created a bug over there @ OfficeDev/office-ui-fabric-core#1149. Please feel free to close this or keep it open if you think further discussion might be beneficial.