Icons sometimes show as unicode jumble

[Mhbuur]

I'm facing a rather strange problem with fluent ui icons sometimes not showing correctly in my SPA:

If I reload the application, the icons usually show correctly again (though once in a while the unicode jumble sticks for several reloads):

When my app starts, I'm calling
initializeIcons(undefined, { disableWarnings: true });

I'm not seeing any console or network errors.

I would greatly appreciate any insights, suggestions, or guidance on potential causes and where I should focus my attention to pinpoint and rectify the problem.

[Mhbuur]

This problem is still haunting me.

I tried blocking CDN requests completely to see if the behaviour is related to missing font files etc.
This causes the rendering to look like this:

This is a common "unknown character" placeholder and makes sense because the resources were blocked.
The initial problem with the unicode jumble is unlikely to be related to missing font files.

Rather it seems to be some fundamental unicode parsing problem. Almost as if the document temporary looses its encoding information, which is not the case.

Again, any help or theories is greatly appreciated. No console errors, no network errors, no service worker interference.. just no icons 🤷‍♂️:

[FlowIT-JIT]

I have observed the same behaviour in Teams. It might have been resolved in the most recent "New" version though:

[Mhbuur]

This appears to be the same issue as discussed here:

#27777
and here
#28674

It seems like I have fixed this by adding @charset "UTF-8"; as the very first thing in my App.scss file