Icon
Demonstration and configuration of the Radzen Blazor Icon component.
Material Icons link
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 link
Use IconColor property to set custom icon foreground color.
Filled icons link
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.
Syled icons link
Use IconStyle property to modify the icons foreground color. It offers the standard styles defined by the theme.
Using RadzenIcon with other icon fonts link
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.
Supercharge your Blazor development with Radzen Blazor Studio
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT