Demonstration and configuration of the Radzen Blazor Icon component.

Material Icons

By default, the RadzenIcon component uses the embedded in Radzen Blazor Components MaterialIcons-Regular.woff font.

facebook accessibility 3d_rotation accessible account_balance account_balance_wallet account_box account_circle add_shopping_cart alarm alarm_add alarm_off alarm_on all_out android announcement aspect_ratio assessment assignment assignment_ind assignment_late assignment_return assignment_returned assignment_turned_in autorenew backup book bookmark bookmark_border bug_report build cached camera_enhance card_giftcard card_membership card_travel change_history check_circle chrome_reader_mode class code compare_arrows copyright credit_card dashboard date_range delete delete_forever description dns done done_all donut_large donut_small eject euro_symbol event event_seat exit_to_app explore extension face favorite favorite_border feedback find_in_page find_replace fingerprint flight_land flight_takeoff flip_to_back flip_to_front g_translate gavel get_app gif grade group_work help help_outline highlight_off history home hourglass_empty hourglass_full http https input invert_colors label label_outline language launch lightbulb_outline line_style line_weight list lock lock_open lock_outline loyalty markunread_mailbox motorcycle note_add offline_pin opacity open_in_browser open_in_new open_with pageview See all Material icons

Syled icons

dashboard open_with
dashboard open_with
dashboard open_with
dashboard open_with
dashboard open_with
dashboard open_with
dashboard open_with
dashboard open_with

Using RadzenIcon with other icon fonts

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.

RadzenIcon with Material Symbols font

Material Symbols is a variable font 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 .

alarm alarm alarm alarm alarm alarm alarm alarm

Source Code licensed under MIT

An error has occurred. This application may no longer respond until reloaded. Reload 🗙