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
FontIconorSvgIconfollowed 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 | |
| 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 |
, 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 |