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

jeanpeus · 2025-01-28T12:38:21Z

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:

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

Expected behavior
Icons should be resolved

Screenshots

Additional context
microsoft/fluentui#33612

JaiPasUnRond · 2025-01-28T13:42:41Z

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

opteon-sdc · 2025-01-29T08:04:11Z

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 · 2025-01-29T18:47:11Z

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 · 2025-01-30T00:13:44Z

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

ericjulien-github · 2025-01-30T11:35:21Z

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 · 2025-01-30T13:32:47Z

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 · 2025-01-30T15:24:36Z

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

ericjulien-github · 2025-01-30T15:27:19Z

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 · 2025-01-30T15:30:49Z

@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" />

ericjulien-github · 2025-01-31T08:24:01Z

Please find a workaround :
I made a quick solution (to add on all your environment) with a component overriding css as mentionned above, you will need to add component HotFixCDNFluentUI to all your application start screen.
Thanks @opteon-sdc

Solutions.zip

opteon-sdc · 2025-01-31T08:37:23Z

Thanks @ericjulien-github for making this available. This does feel like a very "hacky" way of solving it but it's the best I could come up with.

I sincerely hope that the PowerApps teams update their FluentUI version, so this issue doesn't occur anymore.

flocdr · 2025-01-31T09:11:30Z

Tested and approved, thanks @ericjulien-github and @opteon-sdc for your help !

Thanks @ericjulien-github for making this available. This does feel like a very "hacky" way of solving it but it's the best I could come up with.

I sincerely hope that the PowerApps teams update their FluentUI version, so this issue doesn't occur anymore.

I agree with you, in my experience the Creator Kit is probably what makes PowerApps the most valuable both for the dev workflow and the UX. Hiccups like this one reveal how much we still depend on things we can't entirely manage and leave me anxious for the next one !

natglazersbeer · 2025-02-04T18:37:01Z

Thank you @opteon-sdc and @ericjulien-github for this hot fix!

shammyowens · 2025-02-06T15:48:57Z

Unfortunately we aren't in a position to install extra open source solutions in our environments.

I did some more testing on this and I wonder if there is some legacy or cache as part of the issue. I created a brand new environment, added the creatorkit (and turned on code components) and then added command bar. The icons load correctly and the URLs used are

https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-a13498cf.woff
https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-4-a656cc0a.woff
https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-2-63c99abf.woff

I still have my broken app/environment which has the latest creatorkit and has been republished but still point to

https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20210407.001/assets/icons/fabric-icons-a13498cf.woff
https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20210407.001/assets/icons/fabric-icons-2-63c99abf.woff
https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20210407.001/assets/icons/fabric-icons-4-a656cc0a.woff

Is there another way to refresh this without having to remove/re-add the components?

john-streamflow · 2025-02-06T17:00:21Z

@ericjulien-github I am having an issue after installing the HotFixCDNFluentUI and adding the component to my app. Everything works fine in my Dev environment but when I try to import the application solution to my Test environment I am getting the error below. I need to align the prefix of the custom control (ckfix) to the target solution (sf) but there is no way to edit the prefix. The edit button on the custom control is disabled

Error:
Solution "MyPowerAppSolution" failed to import: ImportAsHolding failed with exception :Import Solution Failed: CustomControls with Name CreatorKit.Hotfix.HotfixCDNFluentUI Import Solution Failed with following error: Publisher prefix ckfix for this control CreatorKit.Hotfix.HotfixCDNFluentUI does not match the prefix sf for the solution with Id xxxxxxxxx.

shammyowens · 2025-02-06T17:22:26Z

CreatorKit.Hotfix.HotfixCDNFluentUI

Have you manually imported solution HotFixCDNFluentUI into your test environment prior to pushing "MyPowerAppSolution"?

john-streamflow · 2025-02-06T17:30:25Z

CreatorKit.Hotfix.HotfixCDNFluentUI

Have you manually imported solution HotFixCDNFluentUI into your test environment prior to pushing "MyPowerAppSolution"?

Yes I have manually imported HotFixCDNFluentUI. I have found a workaround by creating a new solution "MyPowerAppSolution2" and setting the publisher to "Support" which is the same as HotFixCDNFluentUI.

This-Is-NPC · 2025-02-07T00:43:09Z

Hello everyone,

I'm experiencing an issue where the icon is not appearing, but only in the published app. In edit mode, the icon is displayed correctly. See the examples below:

Using Fluent Icon

Published App:

Edit Mode:

Using Command Bar

Published App:

Edit Mode:

What I've Tried

Reinstalling the Creator Kit by manually removing and importing it again, then removing the components inside the app and adding them back.
Importing in "Update" mode, then removing and importing the components inside the app again.

Unfortunately, none of these solutions fixed the issue, and I’m unable to install the hotfix shared in this discussion.

Do we have an estimated timeline for an official update that will address this problem?

My installed Creator Kit version: 1.0.20241119.3
App version used in the example: Authoring Version 3.25014.14

Thanks in advance for your help!

shammyowens · 2025-02-07T13:10:34Z

We seem to have an odd workaround.

If we add a brand new command bar on our home screen and publish the app, then all of the icons for other controls start working. This new control can have its visibility set to false and it still works.

If I remove this brand new command bar, the icons for other controls go back to the squares of doom

It would be good if someone else could validate this and work out why this works?!

Bejabajo · 2025-02-07T15:41:37Z

We seem to have an odd workaround.

If we add a brand new command bar on our home screen and publish the app, then all of the icons for other controls start working. This new control can have its visibility set to false and it still works.

If I remove this brand new command bar, the icons for other controls go back to the squares of doom

It would be good if someone else could validate this and work out why this works?!

This worked for us. I am now in the process to do this for all our other apps.

Now just hope Microsoft can find an actually fix but at least this gets the apps up and running again for now

jeanpeus added bug Something isn't working ⚠️ needs triage Has not been triaged by the team yet. labels Jan 28, 2025

opteon-sdc mentioned this issue Jan 30, 2025

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

Open

opteon-sdc mentioned this issue Feb 6, 2025

[BUG]: Icons on Fluent Button and Details Grid not being reflected correctly in play mode of a Canvas app in Google Chrome #497

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jeanpeus commented Jan 28, 2025

JaiPasUnRond commented Jan 28, 2025

opteon-sdc commented Jan 29, 2025

flocdr commented Jan 29, 2025

kristian-parsons commented Jan 30, 2025

ericjulien-github commented Jan 30, 2025

opteon-sdc commented Jan 30, 2025 •

edited

Loading

shammyowens commented Jan 30, 2025

ericjulien-github commented Jan 30, 2025

opteon-sdc commented Jan 30, 2025

ericjulien-github commented Jan 31, 2025

opteon-sdc commented Jan 31, 2025

flocdr commented Jan 31, 2025

natglazersbeer commented Feb 4, 2025

shammyowens commented Feb 6, 2025

john-streamflow commented Feb 6, 2025

shammyowens commented Feb 6, 2025

john-streamflow commented Feb 6, 2025

This-Is-NPC commented Feb 7, 2025

shammyowens commented Feb 7, 2025

Bejabajo commented Feb 7, 2025

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

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

Comments

jeanpeus commented Jan 28, 2025

JaiPasUnRond commented Jan 28, 2025

opteon-sdc commented Jan 29, 2025

flocdr commented Jan 29, 2025

kristian-parsons commented Jan 30, 2025

ericjulien-github commented Jan 30, 2025

opteon-sdc commented Jan 30, 2025 • edited Loading

shammyowens commented Jan 30, 2025

ericjulien-github commented Jan 30, 2025

opteon-sdc commented Jan 30, 2025

ericjulien-github commented Jan 31, 2025

opteon-sdc commented Jan 31, 2025

flocdr commented Jan 31, 2025

natglazersbeer commented Feb 4, 2025

shammyowens commented Feb 6, 2025

john-streamflow commented Feb 6, 2025

shammyowens commented Feb 6, 2025

john-streamflow commented Feb 6, 2025

This-Is-NPC commented Feb 7, 2025

Using Fluent Icon

Using Command Bar

What I've Tried

shammyowens commented Feb 7, 2025

Bejabajo commented Feb 7, 2025

opteon-sdc commented Jan 30, 2025 •

edited

Loading