How can I show the "outlined" or "circled" form of an material icon?

Radzen.Blazor Components
1

In my Blazor server side app I am using actualy icons, selecting from the material icon list. In some cases I need the "outlined" form of the icon. Sometimes it is working when adding _outline to the icon name, but sometimes not. Is there a standard way to use the outlined form of a material icon?
A similar question for the "circled" form of the icons. Sometimes it is working when adding _circle to the icon name sometimes not.

2

Hi @mdarende,

There is a dedicated icon font for outlined material icons. Have a look at these forum threads on how to properly load the desired icon font:

You can also reference the Icon's demos at https://blazor.radzen.com/icon.

Keep in mind that not all icons have an outlined or a circled counterpart.

3

Hello
I have implemented your solution. But got one problem:
My server has no internet acces, so I have downloaded the css and put it under wwwroot/css. So far everything fine.
But in the css there is a source url like below.

src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');

I have downloaded also the woff2 file and gave a local path in the css file like:

src: url(file:///css/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');

But on the browser's inspect I see the Error: (Mozilla Firefox)

Security Error: Content at https://XXXXXXXXXXX:4444/CNC_Status may not load or link to file:///css/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2.

downloadable font: failed to start download (font-family: "Material Icons Outlined" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: file:///css/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2

4

Hi @mdarende,

Most probably the path to the *.woff2 file is not properly defined. The path should be relative to the CSS file you are loading the *.woff2 from. If they are in the same folder, the url should be something like:

src: url('gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2') format('woff2');

You can also rename the *.woff2 file to a more meaningful and shorter name for convenience and to avoid mistyping it.

Here is a quick cheat sheet on file paths in css - Quick Reminder About File Paths | CSS-Tricks - CSS-Tricks

Hope that helps.

5

OK, that worked. I defined the path always relative to the wwwroot direectory. That was the problem. Thank you so much for your great support. :sunglasses: