Icons
Kendo UI for Angular provides a large set of built-in icons. There are two ways to consume and render them—either as Font icons or as SVG icons.
In general, font icons produce a smaller HTML footprint and the glyph can be overridden with CSS. On the other hand, SVG icons provide better accessibility and can use multiple colors in a single icon.
Using SVG Icons
Starting with version
13.0.0
, introduced in the R2 2023 (June 2023) release, the default icon type in the Kendo UI for Angular components changes fromfont
tosvg
.
To add a Kendo UI SVG icon to your page, use the Kendo UI for Angular SVG Icon component. For the full list of the available predefined Kendo UI SVG icons, refer to this section.
Read more about the definition of SVG icons and the advantages they offer on the SVG Icons Overview page in the Progress Design System Kit documentation.
Using Font Icons
Starting with
v14.0.0
, introduced in the R3 2023 (October 2023) release, the font icons are no longer delivered with the Kendo UI themes.
You can add a desired font icon in your application by following either of the approaches listed below:
Angular Icon Component
You can use the Kendo UI for Angular Icon component to display any of the available font icons.
Loading Icons through Precompiled CSS or a CDN
For more details on the setup process of the Kendo UI font icons, refer to the Font Icons Usage article in the Progress Design System Kit documentation.
When using the precompiled CSS approach:
-
Import the font icons in the
angular.json
file.json"styles": [ ... { "input": "node_modules/@progress/kendo-font-icons/dist/index.css" } ],
-
Import the font icons in the
styles.scss
file.scss@use '@progress/kendo-font-icons/dist/index.css' as *;
After loading the font icons, display a font icon in the HTML template of your application by performing the following steps:
-
Add an empty
<span>
element that will hold the font icon. -
Assign the
k-icon k-font-icon
CSS classes followed by a predefined class from the list of font icons to an HTML tag. For example:html<span class="k-icon k-font-icon k-i-calendar"></span>
Rendering Font Icons with Unicode Characters
Even though the web icon font comes with a set of predefined CSS classes, you might need to use the icons with a custom CSS class name. To achieve this, set a :before
pseudo content value for the relevant icon.
<span class="k-icon k-font-icon my-custom-icon-class"></span>
<style>
.my-custom-icon-class:before {
content: "\e13a"; /* Adds a glyph using the Unicode character number */
}
</style>
If you use the styles
property in the metadata of the component, you need to escape the content by adding a double backslash.
@Component({
selector: 'my-app',
styles: [`
.k-icon.k-font-icon.my-custom-icon-class:before {
content: "\\e13a";
}
`],
template: `
<span class="k-icon k-font-icon my-custom-icon-class"></span>
`
})
class AppComponent { }
Icons List
The Progress Design System website provides a list of all built-in icons in Kendo UI for Angular.
Each icon box in the list is clickable and reveals the following details:
- CSS class aliases, if such exist.
- Unicode representation of the font icon glyph. For example,
\e11e
corresponds to theplus
icon. - Ability to copy the glyph symbol of the font icon.
- Ability to copy the HTML markup (
<svg>
tag) of the SVG icon.
The icon list may contain icons which are not available in older versions of Kendo UI for Angular or even in the latest one. Such icons will be added in the next product version.
Visual Adjustments
Read the Iconography - Visual Adjustments for Icons page on the Progress Design System Kit website for more information on how to customize the look of the Kendo UI font and SVG icons by using: