[BUG]: MDL2 and FileType Icon CDNs prior to @fluentui/react 8.109.0 are unavailable

[jeanpeus]

Describe the bug
Due to the January 15th shutdown of Edgio, CDNs that were used to host MDL2 and FileType icons prior to 2023 are permanently unavailable since January 15th. Therefore there are no icons visible now.

To Reproduce
Steps to reproduce the behavior:

1. Open the Creator Kit Reference App
2. Open the Fluent Icon page in the left navigation

Expected behavior
Icons should be resolved

Screenshots

Additional context
microsoft/fluentui#33612

[JaiPasUnRond]

All my apps are affected...
Do we have to wait for an update ?

[opteon-sdc]

My apps are also affected. The issue is that all the code components use a "shared" version of the FluentUI (v8.29.0) that is provided by PowerApps itself.

[flocdr]

I heard about his issue from a co-worker around January 15th, and my apps are starting to experience it today (from France, i don't know if it's region-specific or not)

It's quite hard to reproduce and/or zero in on what action in the workflow get it to occur, my production apps are still not showing anything but I'm quite anxious.

+1 to @JaiPasUnRond on us having just to wait, or if we can do something about it !

[kristian-parsons]

For us this is affecting some published apps, but the same app in the authoring environment correctly shows the icons.

[ericjulien-github]

Same issue for my powerapps, please find also related to same topic :

• MDL2 and FileType Icon CDNs prior to @fluentui/react 8.109.0 are unavailable fluentui#33612
• [Bug]: Icons are not loaded (This site can’t be reached, spoppe-b.azureedge.net) stopped working 09.01.2025 fluentui#33596
• Empty icons sample-app-aoai-chatGPT#1249
• Retrospective UI is broken and icons are missing vsts-extension-retrospectives#984

And I think below workaround to perform on code component (if needed) of creator kit to solve issue

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

[opteon-sdc]

Since I only use the icons in custom components (no creator-kit components), I created a new CSS file that defined a "new" font which loaded it's icons from the res.cdn.office.net domain. InitializeIcons didn't seem to work for me.

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

Then I was able to override the icons with:

.ms-Icon, i[data-icon-name] {
	font-family: 'CustomFabricMDL2Icons' !important;
}

I hope it helps some of you. I assume you could also create a component that just loads this CSS into memory, so that it works for all the other icons of the creator-kit components.

Note: the example only loads a single .woff file, there are a total of 18 I think.

[shammyowens]

We are having the same issue with Canvas Apps in our environment with the CreatorKit (DetailsList and CommandBar)

[ericjulien-github]

Since I only use the icons in custom components (no creator-kit components), I created a new CSS file that defined a "new" font which loaded it's icons from the res.cdn.office.net domain. InitializeIcons didn't seem to work for me.

@font-face {
font-family: 'CustomFabricMDL2Icons';
src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-a13498cf.woff') format('woff');
}
Then I was able to override the icons with:

.ms-Icon, i[data-icon-name] {
font-family: 'CustomFabricMDL2Icons' !important;
}
I hope it helps some of you. I assume you could also create a component that just loads this CSS into memory, so that it works for all the other icons of the creator-kit components.

Note: the example only loads a single .woff file, there are a total of 18 I think.

Thanks for your reply, it's quite difficult to set up within powerapps, we need a component to load all woff files and override all icons, is there a way to know all existing woff files for CustomFabricMDL2Icons font behind ttps://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons?

[opteon-sdc]

@ericjulien-github I got them from the @fluentui/font-icons-mdl2 package. But here is the CSS that I used:

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

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-1-4d521695.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-2-63c99abf.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-3-089e217a.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-4-a656cc0a.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-5-f95ba260.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-6-ef6fd590.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-7-2b97bb99.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-8-6fdf1528.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-9-c6162b42.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-10-c4ded8e4.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-11-2a8393d6.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-12-7e945a1e.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-13-c3989a02.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-14-5cf58db8.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-15-3807251b.woff') format('woff');
}

@font-face {
    font-family: 'CustomFabricMDL2Icons';
    src: url('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/fabric-icons-16-9cf93f3b.woff') format('woff');
}

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

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

.ms-Icon, i[data-icon-name] {
	font-family: 'CustomFabricMDL2Icons' !important;
}

Don't forget to include it in the ControlManifest.Input.xml file as follows:

<css path="../../fonts.css" order="1" />