New to Kendo UI for Angular? Start a free 30-day trial

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 from font to svg.

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.

html

<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 the plus 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: