Font Icons

As of the 2023 R3 release, the font icons are detached from the Kendo UI Themes CDN. If you use the Kendo UI CDN service to include the Kendo UI theme, to continue using the font icons, add a reference the following stylesheet into your application: <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />

With the R1 2017 release, Telerik UI delivers integrated font icons intended for the web and data visualization components of the suite.

To ensure that all icons are displayed correctly, use one of the available built-in themes.

What Are Icon Fonts

Icon fonts are fonts that contain vector glyphs instead of letters and numbers. You can style them with CSS by using all properties that can be applied to regular text in a modern browser.

Why Use Icon Fonts

Using icon fonts in a user interface (UI) naturally succeeds the outdated icon sprite technique.

Font icons demonstrate significant benefits such as:

Improved scalability—While icon sprites are bitmap raster images and do not scale well, icon fonts use vector graphics, look perfect on retina displays, and make scaling as convenient as setting the font-size configuration option.
Improved design capabilities—You can apply CSS effects on the fly by setting the text color, shadow, or other options for different interaction states. For example, on :hover.
Improved browser support—Font icons are browser-agnostic and are supported by all modern browsers.
Reduced number of HTTP requests—To load an icon font, you need a maximum of a few HTTP requests.
Reduced file size—A 100KB file contains around 500 vector icons.

Basic Usage

To use the Telerik UI font icons:

Include a Telerik UI theme into your project.
If you use the Kendo UI CDN service to include the theme, register the font icon stylesheet.

Assign a k-font-icon CSS class followed by a predefined class from the list of font icons to an HTML tag. For example, a the <span> element.

The following example demonstrates how to render a font calendar icon.

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />
  <link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />

  <span class="k-icon k-font-icon k-i-calendar"></span>

Icons List

The Progress Design System website provides a list of all built-in icons in Telerik UI for ASP.NET Core.

Each icon box in the icon list is clickable and reveals the following details:

CSS class aliases, if such exist. For example, k-i-plus is equivalent to k-i-add.
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 Telerik UI for ASP.NET Core or even in the latest one. Such icons will be added in the next product version.

Rendering with Unicode Numbers

Though the web icon font comes with a set of predefined CSS classes, you will 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>

Visual Adjustments

Icon fonts support the following options for visual enhancement:

Application of different sizes.
Application of icon colors.
Flipping of icons.

Adjusting the Size

The Telerik UI font icons are designed on a 16px grid base. To achieve a pixel-perfect icon display, scale up by maintaining the 16-unit measure (32, 48, 64, and so on).

You can scale icons by setting the font-size configuration option.

<span class="k-icon k-font-icon k-i-gear"></span>
<span class="k-icon k-font-icon k-i-gear k-icon-32"></span>
<span class="k-icon k-font-icon k-i-gear k-icon-48"></span>
<span class="k-icon k-font-icon k-i-gear k-icon-64"></span>
<style>
    .k-icon-32 {
        font-size: 32px; /* Sets icon size to 32px */
    }
    .k-icon-48 {
        font-size: 48px; /* Sets icon size to 48px */
    }
    .k-icon-64 {
        font-size: 64px; /* Sets icon size to 64px */
    }
</style>

Adjusting the Colors

To set the icon color, use the color CSS property.

    <span class="k-icon k-font-icon k-i-gear" style="color: blue;"></span>
    <span class="k-icon k-font-icon k-i-gear colored-icon"></span>
    <style>
        .colored-icon {
            color: green;
        }
    </style>

Applying Flipping

To conveniently accommodate an icon in your application, flip it by using the k-flip-h and k-flip-v predefined CSS classes.

    <span class="k-icon k-font-icon k-i-pencil"></span>
    <span class="k-icon k-font-icon k-i-pencil k-flip-h"></span>
    <span class="k-icon k-font-icon k-i-pencil k-flip-v"></span>
    <span class="k-icon k-font-icon k-i-pencil k-flip-h k-flip-v"></span>