Blazor Icon
The Blazor Icon component renders Material icons with control over size and color, plus support for custom icon fonts.
Material Icons linkLink to this section
By default, the RadzenIcon component uses the embedded in Radzen Blazor Components MaterialSymbolsOutlined.woff2 font containing more than 2,500 glyphs. See all Material Symbols ↗
Icon color linkLink to this section
Use IconColor property to set custom icon foreground color.
Filled icons linkLink to this section
Use font-variation-settings CSS property for filled icons with the Material Symbols font. Note that some icons cannot be filled because they lack elements that allow for filling.
Styled icons linkLink to this section
Use IconStyle property to modify the icons foreground color. It offers the standard styles defined by the theme.
Using RadzenIcon with other icon fonts linkLink to this section
You can use any icon font supporting ligatures with the RadzenIcon component. To do so, you need to load the font file using the CSS @font-face at-rule and set the corresponding font-family name to the --rz-icon-font-family CSS variable. The example below uses Material Symbols Rounded font.
RadzenIcon with Material Symbols Rounded font
Material Symbols and Material Symbols Rounded are variable fonts containing multiple stylistic variations e.g. you can control the boldness of the icon using the font-weight: CSS property.
Read more about variable fonts.
RadzenIcon with Material Symbols font loaded from Google Fonts.
For full control over the icon font content and styles, you can load the Material Symbols font from Google Fonts and set the --rz-icon-font-family CSS variable accordingly.
RadzenIcon with FontAwesome font
How to Use RadzenIcon in Radzen Blazor Studio linkLink to this section
This video shows how to select icons visually, adjust colors and styles.
Frequently asked questions
How do I add an icon in Blazor?
Use the RadzenIcon component and set its Icon property to a Material icon name; the icon renders inline wherever you place it.
How do I change an icon's size or color?
Control the color with IconStyle or a Style/class, and set the font size (for example via Style) to change the icon size.
Can I use custom icons?
Yes. In addition to the built-in Material icons, you can use a custom icon font or image-based icons.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT