New Icon Names in Telerik UI for Blazor 4.0

Environment

Product	UI for Blazor
Product Version	4.x

Description

Telerik UI for Blazor version 4.0 renamed some of the built-in icons. Using the old icon names won't work and may produce errors, depending on the exact component configuration.

Solution

While the below listed names will render the proper icons, the recommended approach for declaring icons is to use FontIcon or SvgIcon followed by PascalCase for the icon name. See details in Icons List.

Here is a list of the renamed icons:

Icon name in 3.x	Icon name in 4.x
arrow-45-up-right, collapse-ne, resize-ne	caret-tr
arrow-45-down-left, collapse-sw, resize-sw	caret-bl
arrow-45-up-left, collapse-nw, resize-nw	caret-tl
arrow-60-up, arrow-n, kpi-trend-increase, expand-n, sarrow-n	caret-alt-up
arrow-60-right, arrow-e, expand, expand-e, sarrow-e	caret-alt-right
arrow-60-down, arrow-s, kpi-trend-decrease, expand-s, collapse, sarrow-s	caret-alt-down
arrow-60-left, arrow-w, expand-w, sarrow-w	caret-alt-left
arrow-end-up, seek-n	caret-alt-to-top
arrow-end-right, seek-e	caret-alt-to-right
arrow-end-down, seek-s	caret-alt-to-bottom
arrow-end-left, seek-w	caret-alt-to-left
arrow-double-60-up, arrow-seek-up	caret-double-alt-up
arrow-double-60-right, arrow-seek-right, forward-sm	caret-double-alt-right
arrow-double-60-down, arrow-seek-down	caret-double-alt-down
arrow-double-60-left, arrow-seek-left, rewind-sm	caret-double-alt-left
arrows-kpi, kpi, caret-alt-sort	caret-alt-expand
arrow-chevron-up, arrowhead-n	chevron-up
arrow-chevron-right, arrowhead-e	chevron-right
arrow-chevron-down, arrowhead-s	chevron-down
arrow-chevron-left, arrowhead-w	chevron-left
arrow-drill	level-down
arrow-parent	level-up
arrow-root, level-root	level-to-top
arrows-resizing	col-resize
arrows-dimensions, dimension	arrows-axes
page-layout	layout-2-by-2
hamburger	menu
more-v, vbars	more-vertical
more-h, hbars	more-horizontal
root	home
undo-large	undo
redo-large	redo
reset	arrow-rotate-ccw
reload, refresh, recurrence, arrows-repeat	arrow-rotate-cw
non-recurrence, refresh-clear	arrows-no-repeat
reset-sm	arrow-rotate-ccw-small
reload-sm, refresh-sm, recurrence-sm, arrows-repeat-sm	arrow-rotate-cw-small
floppy	save
printer	print
edit	pencil
delete	trash
attachment, clip	paperclip
attachment-45, clip-45	paperclip-alt
link-horizontal, hyperlink, link-h	link
unlink-horizontal, hyperlink-remove, unlink-h	unlink
link-v	link-vertical
unlink-v	unlink-vertical
deny	cancel-outline
checkmark, tick	check
checkmark-outline, success	check-outline
checkmark-circle	check-circle
close, clear, times, group-delete	x
close-outline, clear-outline, times-outline, error	x-outline
close-circle, clear-circle, times-circle	x-circle
add	plus
add-outline	plus-outline
add-circle	plus-circle
kpi-trend-equal	minus
unsort	sort-clear
sort-asc-sm	sort-asc-small
sort-desc-sm	sort-desc-small
filter-sm	filter-small
filter-sort-asc-sm	filter-sort-asc-small
filter-sort-desc-sm	filter-sort-desc-small
sign-in	login
sign-out	logout
window-maximize, maximize	window
windows, tiles, restore	window-restore
minimize	window-minimize
cog, custom	gear
cogs	gears
settings	wrench
preview	eye
zoom	search
pan, move	arrows-move
shopping-cart	cart
splus	plus-sm
sminus	minus-sm
cursor	pointer
volume-low	volume-down
volume-high	volume-up
volume-off	volume-mute
subtitles	closed-captions
audio	music-notes
fav-outline, favorite-outline	heart-outline
fav, favorite	heart
bookmark-outline	star-outline
bookmark	star
shape-rect	checkbox
tri-state-indeterminate	checkbox-indeterminate
tri-state-null	checkbox-null
shape-circle	radiobutton
notification	bell
information, info, note	info-circle
question, help	question-circle
warning, exception	exclamation-circle
photo-camera	camera
photo	image
photo-export	image-export
flip-h	flip-horizontal
flip-v	flip-vertical
rotate-cw	rotate-right
rotate-ccw	rotate-left
paint, background	droplet
line	shape-line
saturation	sliders
opacity	transparency
shape	shapes
front-element	bring-to-front
back-element	bring-to-back
forward-element	bring-forward
backward-element	bring-backward
align-left-element	align-self-start
align-center-element	align-self-center
align-right-element	align-self-end
align-top-element	align-self-start-alt
align-middle-element	align-self-center-alt
align-bottom-element	align-self-end-alt
full-screen, fullscreen-enter	fullscreen
full-screen-exit	fullscreen-exit
reset-color, paint-remove, background-remove	droplet-slash
images, gallery	photos
align-stretch-element-horizontal	align-self-stretch
align-stretch-element-vertical	align-self-stretch-alt
align-left-elements	align-items-start
align-center-elements	align-items-center
align-right-elements	align-items-end
align-stretch-elements-horizontal	align-items-stretch
align-baseline-horizontal	align-items-baseline
align-top-elements	align-items-start-alt
align-middle-elements	align-items-center-alt
align-bottom-elements	align-items-end-alt
align-stretch-elements-vertical	align-items-stretch-alt
align-baseline-vertical	align-items-baseline-alt
justify-start-horizontal	justify-content-start
justify-center-horizontal	justify-content-center
justify-end-horizontal	justify-content-end
justify-between-horizontal	justify-content-between
justify-around-horizontal	justify-content-around
justify-start-vertical	justify-content-start-alt
justify-center-vertical	justify-content-center-alt
justify-end-vertical	justify-content-end-alt
justify-between-vertical	justify-content-between-alt
justify-around-vertical	justify-content-around-alt
page-properties	file-wrench
text	foreground-color
strike-through	strikethrough
sub-script	subscript
sup-script, superscript	supscript
list-numbered, insert-ordered-list	list-ordered
list-bulleted, insert-unordered-list	list-unordered
indent-increase	indent
indent-decrease	outdent
insert-up, insert-n	insert-top
insert-m	insert-middle
insert-down, insert-s	insert-bottom
justify-left	align-left
justify-center	align-center
justify-left	align-right
justify-full	align-justify
justify-clear	align-remove
rule-horizontal, hr	horizontal-rule
all-borders	borders-all
outside-borders	borders-outside
inside-borders	borders-inside
border-inside-h, inside-horizontal-borders	borders-inside-horizontal
borders-inside-v, inside-vertical-borders	borders-inside-vertical
top-border	border-top
bottom-border	border-bottom
left-border	border-left
right-border	border-right
border-no, no-borders	borders-none
border	form
dictionary-add	book
image-light-dialog, image-insert, insert-image	image-add
comments-remove-all	comments-remove
find-and-replace, find	binoculars
files	copy
paste	clipboard
paste-as-html	clipboard-code
paste-from-word	clipboard-word
paste-from-word-strip-file	clipboard-word-alt
paste-html	clipboard-html
paste-markdown	clipboard-markdown
paste-plain-text	clipboard-text
clearformat	clear-css
style-builder	building-blocks
module-manager, puzzle	puzzle-piece
hyperlink-light-dialog, hyperlink-insert	link-add
hyperlink-globe	globe-link
hyperlink-globe-remove	globe-unlink
hyperlink-email	envelope-link
table-light-dialog, table-insert, create-table	table-add
add-column-left	table-column-insert-left
add-column-right	table-column-insert-right
add-row-above	table-row-insert-above
add-row-below	table-row-insert-below
delete-column	table-column-delete
delete-row	table-row-delete
merge-cells	cells-merge
cells-merge-h, merge-horizontally	cells-merge-horizontally
cells-merge-v, merge-vertically	cells-merge-vertically
cells-split-h	cell-split-horizontally
cells-split-v	cell-split-vertically
normal-layout	table-unmerge
freeze-pane	pane-freeze
freeze-row	row-freeze
col-freeze, freeze-col	column-freeze
fx	formula-fx
currency	dollar
format-number	custom-format
increace-decimal	decimal-increase
decrease-decimal	decimal-decrease
marker-pin	map-marker
marker-pin-target	map-marker-target
email, letter	envelope
email-box, letter-box	envelope-box
fields-more	folder-more
file-vertical, page-portrait, file-v	file
insert-file	file-add
txt	file-txt
csv	file-csv
file-xls, excel, xls, xlsa	file-excel
file-doc, word, doc	file-word
mdb	file-mdb
ppt	file-ppt
pdf, pdfa	file-pdf
psd	file-psd
flash	file-flash
config	file-config
ascx	file-ascx
bac	file-bac
zip	file-zip
html, source-code, view-source	code
page-landscape, file-h	file-horizontal
file-validation	file-error
files-validation	files-error
table-position-left	table-position-start
table-position-right	table-position-end

See Also

• Breaking Changes in Telerik UI for Blazor 4.0