Text where icons should be

Radzen.Blazor Components
1

I'm hoping there's a simple answer to this idiot question. I'm seeing this:

Radzen 2024-02-15 125809
Radzen 2024-02-15 125809699×265 14 KB

Radzen 2024-02-15 125942

I've followed Getting Started to the letter, included everything that needs including in the right places, checked old answers, etc. "Inspect" hasn't helped.

2

Hi @CodeSculptor,

For some reason the Material icons font file is not loading. Looking at the screenshots it is hard to tell where the problem is, but here are the steps to troubleshoot:

  1. Is it available in your app under wwwroot/fonts/MaterialIcons-Regular.woff
  2. If it is available, make sure it is loaded in your browser - Check the Resources tab in the Inspector.
  3. If it is loaded, see if it is properly referenced in your styles - look for the following snippet in the theme css:
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/MaterialIcons-Regular.woff") format("woff")
}

And make sure the custom CSS property for icons is set to the proper font-face in the theme CSS file:

--rz-icon-font-family: Material Icons;
3

OK, so...

  1. No, MaterialIcons-Regular.woff wasn't in that folder. I've tracked down a copy and put it in the folder.
  2. No, it doesn't seem to be loaded even though it's there now
  3. No, I can't find any reference to the font file in any of my project files

Strange...

4

In that case, please review the getting started guide again, especially steps 1 to 3. It looks like the resources are not loaded at all. If the nuget package is properly installed and the path to theme CSS file in step 3 is pointing to the Radzen.Blazor folder everything should be working as expected since all the CSS and font files are embedded in the package.

5

shouldBeWorking != working

I tried uninstalling and reinstalling the nuget package.
I tried going back over Getting Started, making sure of everything.
I tried cloning RadzenBlazorDemos, copying /css, /fonts and /js to my wwwroot.
I tried every combination of cleaning, rebuilding and restarting VS2022.

No change! I'm running out of ideas.

6

This is not needed. Your application probably has a problem with embedded assets for some reason. Check my reply here for further tips: Radzen Blazor Components don't respect "custom" environments - #2 by korchev

7

After a process of elimination, it seems to be caused by the CSS files I've inherited with this project. If I include either one of two of the files, the material icons disappear, and if I remove them then the icons work but the rest of the site doesn't. My problem is that they total 620kb of obfuscated CSS, most of which probably isn't needed, but I don't have the time or patience to work that out, so any keywords or elements to search for that might cause this would be doing me a really big favour!

8

You can inspect the CSS styles that apply to an icon to see where they are inherited from. Right-click the element and choose "Inspect".

9

Well, it took a while, but these were the offending rules:

span {
    font-family: nunito,Arial,Verdana,sans-serif
}
.button > span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%
}

Thanks for your help!

10

note that one way that this can come up is if you're upgrading to v5 and are using icons like "info_outline" ...the name of that has changed to "info", and the "_outline" bit ends up getting rendered.