Icons not loading when deployed to Azure

[Voystar Software]

I have a problem with Icons from Syncfusion Blazor in Blazor WASM.

I am trying both with a CDN: https://cdn.syncfusion.com/blazor/29.2.10/styles/bootstrap5.3-dark.css and with loading locally: <link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.3-dark.css" />

When running the app in debug, everything works. But when deployed to Azure there is a 50% chance when loading each page that the icons will not be loaded. Inspecting the Network in DevTools, this is the problematic call that often fails:

data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tTBEAAAEoAAAAVmN... 

It's the font of the icons coming from bootstrap.5.3-dark.css

It's almost always like this: If I press F5, then the page reloads and there are no icons. If I press CTRL+F5, then it reloads and icons appear.

What can be the problem here? 

[Gayathri Marudhai]

Thank you for reaching out. We are currently validating the reported query and will provide an update within two business days. We appreciate your patience in the meantime.

[Athiswaran Veerasekaran]

Hi Voystar,

We have reviewed your query and created a sample Blazor WebAssembly application using Syncfusion components with icons. The project was tested using both CDN-based and local references to the bootstrap5.3-dark.css file and deployed to Azure. However, we were unable to reproduce the issue and the icons consistently loaded as expected across various page loads.

For your reference, we’ve attached a video demonstration. 

To assist you more effectively, we kindly request you to share any additional details such as:

• Specific scenarios or steps that consistently reproduce the issue
• Any error messages or console logs

This information would help us provide a more accurate solution.

 

Please let us know if we’ve misunderstood any part of your query.

 

Best regards,

Athiswaran V

Attachment: SyncfusionIconsRendering_e862b17.zip

[Voystar Software]

Hello,

Here is the specific scenario:

- open Chrome in Incognito mode

- open DevTools and go to Networks tab

- Select Disable Cache option:

- Now open the app and then reload the page a few times with F5, and a few times with CTRL+F5

After that I notice that some of the refreshes make the app load with icons, some without:

There are no issues logged in Console of the browser.

In the networks log there is a failed request of type Font with this Initiator: bootstrap5.3-dark.css

data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tTBEAAAEoAAAAV... (much longer string of random characters)

The stylesheet is attached in index.html:

<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.3-dark.css" />

[Athiswaran Veerasekaran]

Hi Voystar,

We have validated the behavior and confirmed that the observed behavior is not limited to any specific icon library , it can potentially affect all font-based icons used within the application.

This issue becomes more noticeable during rapid or repeated page refreshes (e.g., using F5 or Ctrl+F5) in Incognito mode with the "Disable cache" option enabled in Developer Tools.

Blazor WebAssembly Resource Loading Considerations:

Blazor WebAssembly applications rely heavily on caching and preloading mechanisms to optimize performance. When the browser cache is disabled and forced reloads are performed, it can introduce race conditions, timing conflicts, or resource prioritization issues. These factors may lead to inconsistent loading of font resources, including icons.

It is important to note that this behavior is browser-specific and not a fault in the application itself.

Please feel free to reach out if you have any further questions or need additional clarification.

Regards,

Athiswaran V

[Voystar Software]

Ok, thank you for helping me clear that out. If it is not a specific issue with Syncfusion icons, I will proceed with finding a fix for it myself.

[Athiswaran Veerasekaran]

Hi Voystar,

Thank you for the update. I'm glad the clarification helped. Please don't hesitate to reach out if you need any further assistance.

Best regards,
Athiswaran V