Radzen Blazor Components


Demonstration and configuration of the Radzen Blazor Icon component.

Material Icons link

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

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

See all Material icons

Icon color link

Use IconColor property to set custom icon foreground color.

info warning dangerous done smart_button smart_button dialpad

Syled icons link

Use IconStyle property to modify the icons foreground color. It offers the standard styles defined by the theme.

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 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 font.

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.

alarm alarm alarm alarm alarm alarm alarm alarm

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.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙