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.