Class RadzenIcon
An icon component that displays icons from the Material Symbols font (2,500+ icons included). RadzenIcon provides a simple way to add scalable vector icons to your Blazor application without external dependencies. Uses the embedded Material Symbols Outlined variable font to render icons as text glyphs, providing benefits including no HTTP requests for icon files (icons are part of the font), vector-based icons that scale perfectly at any size, text color inheritance with coloring via IconColor or CSS, access to 2,500+ Material Symbols icons, and support for Outlined (default), Filled, Rounded, and Sharp variants via IconStyle. Icon names use underscores (e.g., "home", "account_circle", "check_circle"). See Material Symbols documentation for the full icon list.
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenIcon : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableExamples
Basic icon:
<RadzenIcon Icon="home" />Colored icon with custom style:
<RadzenIcon Icon="favorite" IconColor="#FF0000" IconStyle="IconStyle.Filled" Style="font-size: 2rem;" />Icons in buttons:
<RadzenButton Icon="save" Text="Save" />
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" />Constructors
RadzenIcon()
An icon component that displays icons from the Material Symbols font (2,500+ icons included). RadzenIcon provides a simple way to add scalable vector icons to your Blazor application without external dependencies. Uses the embedded Material Symbols Outlined variable font to render icons as text glyphs, providing benefits including no HTTP requests for icon files (icons are part of the font), vector-based icons that scale perfectly at any size, text color inheritance with coloring via IconColor or CSS, access to 2,500+ Material Symbols icons, and support for Outlined (default), Filled, Rounded, and Sharp variants via IconStyle. Icon names use underscores (e.g., "home", "account_circle", "check_circle"). See Material Symbols documentation for the full icon list.
Declaration
public RadzenIcon()Examples
Basic icon:
<RadzenIcon Icon="home" />Colored icon with custom style:
<RadzenIcon Icon="favorite" IconColor="#FF0000" IconStyle="IconStyle.Filled" Style="font-size: 2rem;" />Icons in buttons:
<RadzenButton Icon="save" Text="Save" />
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" />Properties
Icon
Gets or sets the Material Symbols icon name to display. Use icon names with underscores (e.g., "home", "settings", "account_circle", "check_circle"). See the Material Symbols icon library for available names.
Declaration
[Parameter]
public string Icon { get; set; }Property Value
| Type | Description |
|---|---|
| string | The Material icon name. |
IconColor
Gets or sets a custom color for the icon. Supports any valid CSS color value (e.g., "#FF0000", "rgb(255, 0, 0)", "var(--primary-color)"). If not set, the icon inherits the current text color from its parent.
Declaration
[Parameter]
public string IconColor { get; set; }Property Value
| Type | Description |
|---|---|
| string | The icon color as a CSS color value. |
IconStyle
Gets or sets the visual style variant of the icon. Material Symbols supports different styles: Outlined (default), Filled, Rounded, and Sharp. The style affects the icon's visual appearance (e.g., Filled icons have solid shapes vs. outlined strokes).
Declaration
[Parameter]
public IconStyle? IconStyle { get; set; }Property Value
| Type | Description |
|---|---|
| IconStyle? | The icon style variant, or null to use the default Outlined style. |
Methods
BuildRenderTree(RenderTreeBuilder)
An icon component that displays icons from the Material Symbols font (2,500+ icons included). RadzenIcon provides a simple way to add scalable vector icons to your Blazor application without external dependencies. Uses the embedded Material Symbols Outlined variable font to render icons as text glyphs, providing benefits including no HTTP requests for icon files (icons are part of the font), vector-based icons that scale perfectly at any size, text color inheritance with coloring via IconColor or CSS, access to 2,500+ Material Symbols icons, and support for Outlined (default), Filled, Rounded, and Sharp variants via IconStyle. Icon names use underscores (e.g., "home", "account_circle", "check_circle"). See Material Symbols documentation for the full icon list.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
GetComponentCssClass()
Gets the component CSS class.
Declaration
protected override string GetComponentCssClass()Returns
| Type | Description |
|---|---|
| string |