Radzen Blazor Components

Documentation 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 MaterialIcons-Regular.woff font.

Example
Edit Source

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.

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

Primary

dashboard open_with

Secondary

dashboard open_with

Light

dashboard open_with

Dark

dashboard open_with

Success

dashboard open_with

Danger

dashboard open_with

Warning

dashboard open_with

Info

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.

Example
Edit Source

alarm alarm alarm alarm alarm alarm alarm alarm

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

Demos Configuration

Use WCAG compliant colors

Premium Themes

Material 3
Fluent
Material 3 Dark
Material Dark
Fluent Dark

Free Themes

Material
Standard
Default
Humanistic
Software
Dark