MDL2 and FileType Icon CDNs prior to @fluentui/react 8.109.0 are unavailable

[micahgodbolt]

Due to the January 15th shutdown of Edgio, CDNs that were used to host MDL2 and FileType icons prior to 2023 are going to be permanently unavailable after January 15th. We are actively working to see if we can mitigate this issue through Azure Front Door (AFD), but due to the tight deadline we recommend that any product using these old packages use the following mitigation steps.

Update your dependencies to:

"@fluentui/font-icons-mdl2": "^8.5.11";
// or
"@fluentui/react-file-type-icons": "^ 8.8.11";

// and
"@fluentui/react": "^8.109.0";

Or manually set your CDN urls by updating your icon initialize functions

initializeIcons("https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/"); 
// or
initializeFileTypeIcons("https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/item-types/");

[micahgodbolt]

Note that this CDN was taking offline for a period this week and recently restored. After January 15th, it will be gone permanently. Follow this issue for updates.

[RK0004-git]

@micahgodbolt , we are seeing the old CDN URL references in below packages:

@uifabric/icons & @uifabric/react-hooks

Could you confirm if these packages are handled by your team? If yes, then is there any plan to update the versions?

[micahgodbolt]

@RK0004-git @uifabric packages were renamed to @FluentUI in 2020, which means you are probably using our 7.x release?

[cwatson-sidub]

This is also affecting Power Pages sites - i.e., forms added to a Power Pages site lack icons. The proposed workaround in #33596 does not seem possible as the implementation seems out of our control.

initializeIcons('https://res.cdn.office.net/files/fabric-cdn-prod_20240129.001/assets/icons/');

[opteon-sdc]

This is also affecting Power Pages sites - i.e., forms added to a Power Pages site lack icons. The proposed workaround in #33596 does not seem possible as the implementation seems out of our control.

initializeIcons('https://res.cdn.office.net/files/fabric-cdn-prod_20240129.001/assets/icons/');

@cwatson-sidub Have you found a solution?

[mmckenziedev]

@cwatson-sidub @opteon-sdc Tools like patch-package can be used to modify the contents of the code after a package has been installed. You could modify the code in your node_modules folder, create a patch, and apply it as a postinstall script in your package.json.

[opteon-sdc]

I think that the problem is that I'm using the icons in PCF components in a PowerApps Canvas App. The way that works is that my components use a "shared" version of FluentUI that is provided by PowerApps itself (seems to be locked on version 8.29.0 (https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries#supported-platform-libraries-list). @micahgodbolt

@mmckenziedev That solution wouldn't work for me. The weird thing is, that I should be able to execute the initializeIcons function but sadly it doesn't seem to do anything?.

[johannschenkl]

We currently see the same issue in a newly created Power Page using a simple (modern) List component. Using

FluentUIReact.initializeIcons

unfortunatelly seems not to work for us.

[opteon-sdc]

@johannschenkl I solved it this way, I hope it helps: microsoft/powercat-creator-kit#514 (comment)

[johannschenkl]

@opteon-sdc Thanks a lot! We'll try that. Honestly, for now we just switched back to "classic" lists in Power Pages.

[mmckenziedev]

@mmckenziedev That solution wouldn't work for me. The weird thing is, that I should be able to execute the initializeIcons function but sadly it doesn't seem to do anything?.

@opteon-sdc From what I understand, if initializeIcons() has already been called earlier in the call stack then subsequent calls will not overwrite the value of the URL or cause it to re-fetch all assets. Some other code in another package may already be calling the function and that might be why you don't see any changes.

[opteon-sdc]

@mmckenziedev That would explain it, the problem is that because PowerApps Canvas Apps loads the FluentUI library themselves, I'm unable to ever overwrite it.

[psmanhas]

@micahgodbolt we are observing similar failure on our internal tool . Is there any permanent fix rolled out or any plan to do in near future?

[opteon-sdc]

@psmanhas See: microsoft/powercat-creator-kit#514 (comment)

[JamesCann007]

@micahgodbolt , we are no longer seeing the issue on 10 Feb. Has this now been fully resolved/mitigated?

Our scenario was React component in Power Page. I also understand there was a Power Pages version update over the weekend, which may be relevant.

[NitinGola]

Hi,

Is there any update on resolving the icon loading issue?

[micahgodbolt]

For now, the best solution for this problem is to upgrade to the latest version of Fluent v7 or v8, as they by default use the latest CDN. Otherwise you can use initializeIcons to specifiy the new CDN.

initializeIcons("https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/"); 

Manual alternative

If you are not able to change the version of Fluent or the initializeIcon call, you can manually load in the missing font files files. See the example below.

https://codepen.io/micahgodbolt/pen/xbxRgLP

Note that icons are broken up into several different chunks. The chunk loaded in the codepen includes all of the default icons used throughout Fluent, but if you are using custom Icons, you'll need to make sure to load the fontface and URL associated with that icon. You can find those icon/font-face associations here:

https://github.com/microsoft/fluentui/tree/master/packages/font-icons-mdl2/src

TimePicker belongs to fontFamily: "FabricMDL2Icons-0", which is pulled in via chunk 0-467ee27f

@font-face {
  font-family: 'FabricMDL2Icons-0';
  src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-0-467ee27f.woff') 
  format('woff2');
}

[v-nmodala]

Hi @micahgodbolt ,
We have "@fluentui/react": "^8.24.0", but still the icons are not loading. Even with the latest version it is getting pointed to old CDN.

[v-nmodala]

Hi @micahgodbolt ,
Is there any ETA available for permanent fix where new CDN will be available as default for initializeIcons() as we need to redeploy all the UI.