Radzen Blazor Components

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 ↗

accessibilityaccessibility
3d_rotation3d_rotation
accessibleaccessible
account_balanceaccount_balance
account_balance_walletaccount_balance_wallet
account_boxaccount_box
account_circleaccount_circle
add_shopping_cartadd_shopping_cart
alarmalarm
alarm_addalarm_add
alarm_offalarm_off
alarm_onalarm_on
all_outall_out
androidandroid
announcementannouncement
aspect_ratioaspect_ratio
assessmentassessment
assignmentassignment
assignment_indassignment_ind
assignment_lateassignment_late
assignment_returnassignment_return
assignment_returnedassignment_returned
assignment_turned_inassignment_turned_in
autorenewautorenew
backupbackup
bookbook
bookmarkbookmark
bookmark_borderbookmark_border
bug_reportbug_report
buildbuild
cachedcached
camera_enhancecamera_enhance
card_giftcardcard_giftcard
card_membershipcard_membership
card_travelcard_travel
change_historychange_history
check_circlecheck_circle
chrome_reader_modechrome_reader_mode
classclass
codecode
compare_arrowscompare_arrows
copyrightcopyright
credit_cardcredit_card
dashboarddashboard
date_rangedate_range
deletedelete
delete_foreverdelete_forever
descriptiondescription
dnsdns
donedone
done_alldone_all
donut_largedonut_large
donut_smalldonut_small
ejecteject
euro_symboleuro_symbol
eventevent
event_seatevent_seat
exit_to_appexit_to_app
exploreexplore
extensionextension
faceface
favoritefavorite
favorite_borderfavorite_border
feedbackfeedback
find_in_pagefind_in_page
find_replacefind_replace
fingerprintfingerprint
flight_landflight_land
flight_takeoffflight_takeoff
flip_to_backflip_to_back
flip_to_frontflip_to_front
g_translateg_translate
gavelgavel
get_appget_app
gifgif
gradegrade
group_workgroup_work
helphelp
highlight_offhighlight_off
historyhistory
homehome
hourglass_emptyhourglass_empty
hourglass_fullhourglass_full
httphttp
httpshttps
inputinput
invert_colorsinvert_colors
labellabel
languagelanguage
launchlaunch
lightbulblightbulb
line_styleline_style
line_weightline_weight
listlist
locklock
lock_openlock_open
loyaltyloyalty
markunread_mailboxmarkunread_mailbox
motorcyclemotorcycle
note_addnote_add
offline_pinoffline_pin
opacityopacity
open_in_browseropen_in_browser
open_in_newopen_in_new
open_withopen_with
pageviewpageview

See all Material Symbols

Icon color link

Use IconColor property to set custom icon foreground color.

info warning dangerous done smart_button smart_button dialpad

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.

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
dashboard
dashboard
dashboard
dashboard
dashboard
dashboard
dashboard
dashboard

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.

Material Symbols (default)
home home home home home home home
Material Symbols Rounded
home home home home home home home

Read more about variable fonts.

Supercharge your Blazor development with Radzen

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

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.

Learn More
New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

>Radzen Blazor Studio

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

Demos Configuration

Premium Themes

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

Free Themes

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