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

[yordanov]

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:

New icons from google material icons not showing

You can use the outlined version of the icons by loading the outlined Material Icons font and setting the respective font-family via CSS: Link the font. The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts: <!-- https://material.io/resources/icons/?style=outline --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet"> Set the font-family. To change the icons' font-family, add the following …

Material Icons not centered

Hi @ggrewe, Such misalignment happens when there are no icons with such names in the icon font file. "inbox_customize" and "wifi_calling_1" are not part of the official Material Icons font. Reference -> Material Symbols and Icons - Google Fonts. Instead you can use "indox" and "wifi_calling" respectively. Where did you get these icon names from? Perhaps you need to reference another font file e.g. Material Symbols instead of Material Icons. To do so, you need to load the font file using the CS…

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.