[BUG]: Icons on Fluent Button and Details Grid not being reflected correctly in play mode of a Canvas app in Google Chrome
When we open a Canvas app in Edit mode and then press Play and open the Play mode, the icons on Fluent Details list and Fluent Button seem to be working fine (Screenshot 1).
However, if we skip the Edit mode and proceed to Play straight away from the solution, the same icons don't seem to be showing up correctly (Screenshot 2).
We are using Google Chrome and the same behavior replicated for several users.
I have the same error! Do you have a solution?
I have the same error. I have tested it on both Edge and Chrome and I am using authoring version 3.24091.13. Do you have an answer?
Same issue for me too. seeing it on Edge Version 128.0.2739.79
Same error here, customers are complaining. Editing the app shows all icons OK but at published version fails. Is there any workaround?
The issue is present even at the details list sorting arrows
I am also encountering the same issue where the Fluent Button and Details List components are not being rendered correctly.
In the code, specifically in the js CreatorKitCore/SolutionPackage/src/Controls/cat_PowerCAT.CommandBar/platformlibs/fluent_8_29_0.js, there is a reference to https://spoprod-a.akamaihd.net/files/fabric/assets/icons/, and that page is not available.
Thank you for reporting this issue. Our team is currently reviewing the issue and will provide updates as soon as possible.
Thank you for reporting this issue. Our team is currently reviewing the issue and will provide updates as soon as possible.
In the code, specifically in the js CreatorKitCore/SolutionPackage/src/Controls/cat_PowerCAT.CommandBar/platformlibs/fluent_8_29_0.js, there is a reference to https://spoprod-a.akamaihd.net/files/fabric/assets/icons/, and that page is not available.
Hi @Darina1010,
Can you please check if this is happening
- By connecting to any other network if it is allowed and possible, sometimes firewall settings might be causing these kind of issues.
- Also pls check if any errors in the Network tab / console of the browser when loading this screen.
Hello @MaheshSripada.
These are the errors shown in the network panel and console.
For these tests I disabled the firewall locally and connected to another network.
Unfortunately, we are unable to reproduce this issue in our environments.
To troubleshoot further, can you please check if
-
If you are able to access and download the file. https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-0-467ee27f.woff.
-
If the endpoint https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-0-467ee27f.woff is whitelisted.
I get the same error on https://spoprod-a.akamaihd.net/files/fabric/assets/icons/ but am able to download the https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-0-467ee27f.woff file
Unfortunately, we are unable to reproduce this issue in our environments.
To troubleshoot further, can you please check if
- If you are able to access and download the file. https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-0-467ee27f.woff.
- If the endpoint https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-0-467ee27f.woff is whitelisted.
I can download the file as well but still get the same CORS issue when playing the app in apps.powerapps.com.
Weirdly enough, some of my apps are showing some icons but not all when playing the app in apps.powerapps.com (everything still shows fine in make.powerapps.com). I can't exactly pinpoint what the difference between an icon showing up or not though:
- this one shows up:
<i data-icon-name="ScheduleEventAction" aria-hidden="true" class="ms-Icon root-32 css-140 css-139" style="font-family: FabricMDL2Icons-9;"></i> - this one doesn't:
<i data-icon-name="Warning" aria-hidden="true" class="ms-Icon root-32 css-136 css-135" style="font-family: FabricMDL2Icons-1;"></i>(and I do see that CORS issue for https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-1-4d521695.woff)
Is the team currently working on a solution and that's why there are now some icons showing up?
Hello, we are currently investigating the issue internally with the engineering team.
It would really help the investigation if anyone experiencing this issue could submit a response to this form with:
- session ID in the player where they're seeing this, and
- Organization ID of the Power Apps environment Dataverse instance (can be found in maker portal > Settings > Session details)
Form link: https://forms.microsoft.com/r/XErgLKUZrY
Sent the requested information.
Thank you for those of you who helped provide session details.
Unfortunately, this issue does not have a clear diagnosis without a repro. Please try some of the following steps to address this issue:
-
Review endpoint restrictions: It appears that due to the larger audience that can use the Player team’s services, your environments/tenants may have locked down endpoints more strictly. Please ensure that your tenant or environment is following the advice provided in required services. If you have other endpoints blocked, this could be causing the issue.
-
Short-term mitigation: As a potential short-term solution, you can try allowing the akamihd endpoint. This may help alleviate the blocking issue temporarily.
-
Future plans: Microsoft is currently working on creating a new platform library that will not use the akamihd endpoint. However, please note that this update will take a few months to roll out and will require a control update on the Creator Kit to be consumed.
We hope these suggestions help resolve the issue. If you are able to try both mitigation steps above and continue to experience the issue, please validate which steps you took and the endpoints you chose to whitelist and let us know what you're still seeing.
Thank you for those of you who helped provide session details.
Unfortunately, this issue does not have a clear diagnosis without a repro. Please try some of the following steps to address this issue:
- Review endpoint restrictions: It appears that due to the larger audience that can use the Player team’s services, your environments/tenants may have locked down endpoints more strictly. Please ensure that your tenant or environment is following the advice provided in required services. If you have other endpoints blocked, this could be causing the issue.
- Short-term mitigation: As a potential short-term solution, you can try allowing the akamihd endpoint. This may help alleviate the blocking issue temporarily.
- Future plans: Microsoft is currently working on creating a new platform library that will not use the akamihd endpoint. However, please note that this update will take a few months to roll out and will require a control update on the Creator Kit to be consumed.
We hope these suggestions help resolve the issue. If you are able to try both mitigation steps above and continue to experience the issue, please validate which steps you took and the endpoints you chose to whitelist and let us know what you're still seeing.
It seems this might have been an issue with akamihd (which, according to one of the sys admins on my team, were having an issue last week). All seems resolved on my end an icons are showing up normally again as of Friday 10/4✅!
Thank you for looking into this!
We are seeing this same issue now with our Power Apps. running both inside our company firewall and outside and also in browser and power app player (desktop and mobile). It is the same as what others reported before getting the error in the network panel but able to download the files fine if you put the path into the browser.
We are currently running v1.0.20240529.1 of the creator kit. which I know is a version old and I see that in a previous comment that they are moving stuff and that would require an update to the creator kit. does the new version of the kit resolved this.
I installed the newest version of the kit (November) a couple weeks ago and still got a similar glitch this week. Republishing my apps resolved the icons not showing up. I can't tell you if the republishing was what solved it or it's because I now have the latest version of the CreatorKit... but not an issue for me anymore today.
Just updated our creator kit to v1.0.20241119.01 in our dev environment and republished one of the apps having issues. It still has issues when outside the studio playing. I did notice that the URL it is failing is not the same as the other comments of akamihd but instead going to azureedge.net
We started seeing these error yesterday 1/09 in all of our apps that are using the creator kit icons (icon, details list, command bar, etc.)
The issue looks to be resolved by itself. late 1/10 the icons started loading again. My guess is there was some Microsoft server issues that got resolved.
Hi There,
Has there been any update to this bug? Or an eta of a fix?
As of this morning it seems the Icons are still not appearing correctly
Creator Kit Version: 1.0.20241119.3
The problem with Creator Kit and Fluent UI icons (hosted on CDNs as fonts - *.woff files) exists because of wrong CORS setup between powerapps domain apps.powerapps.com and one of the possible CDNs (not all CDNs!!)
Sample woff file that is blocked by CORS => https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20210407.001/assets/icons/fabric-icons-2-63c99abf.woff
This is working for some people and do not work for others as CDN assignment depends on geographical location (and most probably some of those CDNs are working fine).
Can you please make sure there is CORS trust between all MS official CDNs and apps.powerapps.com domain ?
The issue looks to have come back for me too. it is just a few of the icons so far but just started again this morning
@PRusakPL, I am not a network guy so is this something I need to have done on our side or is that Microsoft's side?
It is random issue as some CDNs (administered by MS) are either not functioning well or not CORS trusted with Power Apps. This will look like sometimes this works sometimes not - as CDNs are picked in random (geo - related) way.
Few icons ? - open developer toolbar (CTRL + SHIFT + I) - Network tab - check "Disable cache" - with this refresh your app in a browser (CTRL + R) - I guess few icons were just cached (after this refresh all should be gone)
Are they working an a solution?
I am also facing similar issue with Fluent Command bar, Icons are showing up properly in Preview mode, but when app is published and the opened the icons are breaking / not coming properly
For the published app -
But in Preview its showing up properly -
I am using the latest version of Creator Kit CreatorKitCore_1.0.20241119.3_managed.
I have tried to remove the component and then add it back again , republish the app , but nothing worked
We are having the same issue. Icons load correctly in the Studio and for many show up correctly until their cache is manually emptied or ages out, then it just shows the squares of doom.
We have poked our Microsoft rep and they are going to poke people they know in Power Cat to take a look at this. Hopefully they give a better answer than just replace with another control as some of the controls are not fully available outside the creator kit yet (command bar and detail list).
@MaheshSripada @denise-msft I do have a nearly consistent repro I can show you