Icon missing and access to XMLHttpRequest at officeapps url got CORS error

Question

I am developing a SPFX extension. While I am debug it at my SP online site using debug script, I found the icons are not showing up. Those icon are <i className="ms-Icon ms-Icon--PageEdit "

Also, in the F12 console I got following error:

Access to XMLHttpRequest at 'https://waconafd.officeapps.live.com/apc/trans.gif?4063a8778ee9a63a6f5f1234567890123' from origin 'https://mydomain.sharepoint.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I didn't intend to call waconafd.officeapps.live.com. I searched on my code files to verify this URL is not within my code. I guess one of the module or SP online is calling it. Is it normal? Is it the cause of icon missing?

Answer 1

There's a lot of noise in the console from Microsoft's own crap. It's super frustrating and definitely can cause confusion while developing your own stuff. Not sure what they're calling there. Looks like it might be a transparent gif used for tracking, but that is just a guess. Regardless, I don't think it's related to the issue you're seeing.

For the icon issue, I've had mixed success using the ms-Icon classes. Based on your tags it looks like you are already using the UI Fabric (Fluent UI) React Controls. If so, an easy solution is to use the Icon component. So if this was your code:

return (
  <div>
    <i className="ms-Icon ms-Icon--PageEdit"/>
  </div>
);

You can use this instead:

return (
  <div>
    <Icon iconName="PageEdit"/>
  </div>
);