Radzen Blazor Components

API Reference About Radzen GitHub

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 ↗

Example
Edit Source

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.

Example
Edit Source

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.

Example
Edit Source

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.

Example
Edit Source

Material Symbols (default)

home home home home home home home

Material Symbols Rounded

home home home home home home home

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