Icons

The Kendo UI suite for Angular delivers more than 400 integrated font icons for its components.

What Are Icon Fonts

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

Why Use Font Icons

Font icons in user interfaces (UI) naturally succeed the somehow outdated icon sprites.

Font icons demonstrate significant benefits such as:

• Improved scalability—Icon sprites are bitmap raster images and do not scale well. Font icons use vector graphics, look perfect on retina displays, and make scaling as easy as setting the font-size style.
• Improved design capabilities—You can easily apply CSS effects on the fly by setting text color, shadow, or even styles for interaction states, such as :hover.
• Improved browser support—Font icons are supported by all modern browsers.
• Significantly fewer HTTP requests, compared to separate icons.
• Reduced file size—A 100KB file contains approximately 500 vector icons.

Setup

With v14.0.0 introduced in the R3 2023 (October 2023) release, the fonts icons will no longer be delivered with the Kendo UI themes.

To use the Kendo UI font icons:

1. Load a Kendo UI theme in your project.

2. Load the font icons either by using the precompiled CSS or by using a CDN link.

3. Add an empty <span> element that will hold the font icon.

4. Assign the k-icon k-font-icon CSS classes that are 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>

Loading Icons through Precompiled CSS

1. To load the font icons by using precompiled CSS, install the Kendo Font Icons package through NPM.

   sh

   npm i @progress/kendo-font-icons

2. Import the precompiled CSS by using one of the following options:

   • 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

     @import "@progress/kendo-font-icons/dist/index.css";

Loading Icons through a CDN

Import the font icons by using the following CDN link in your index.html file.

html

<link
    rel="stylesheet"
    href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
/>

Using 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 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 double-backslashing it.

ts

@Component({
  selector: 'my-app',
  styles: [`
     .k-icon.my-custom-icon-class:before {
        content: "\\e13a";
     }
    `],
  template: `
    <span class="k-icon my-custom-icon-class"></span>
  `
})
class AppComponent {
}

Making Visual Adjustments

You can modify the appearance of each icon by using:

• Different sizes
• Icon colors
• Icon flipping and rotating

Sizes

The default size of all Kendo UI icons is 16 px (Font-size: 16 px; Width: 16 px; Height: 16 px). However, Kendo UI provides the following predefined sizes for icons:

• xsmall—Font-size: 12 px; Width: 12 px; Height: 12 px.
• small—Font-size: 14 px; Width: 14 px; Height: 14 px.
• medium—Font-size: 16 px; Width: 16 px; Height: 16 px.
• large—Font-size: 20 px; Width: 20 px; Height: 20 px.
• xlarge—Font-size: 24 px; Width: 24 px; Height: 24 px.
• xxlarge—Font-size: 32 px; Width: 32 px; Height: 32 px.
• xxxlarge—Font-size: 48 px; Width: 48 px; Height: 48 px.

You can set each of them by using the respective class:

• k-icon-xs
• k-icon-sm
• k-icon-md
• k-icon-lg
• k-icon-xl
• k-icon-xxl
• k-icon-xxxl

html

<span class="k-icon k-i-gear k-icon-xs"></span>
<span class="k-icon k-i-gear k-icon-md"></span>
<span class="k-icon k-i-gear k-icon-xl"></span>

For font icons, you can apply any custom size by using the CSS font-size property.

html

<span class="k-icon k-i-gear k-icon-24"></span>

<style>
    .k-icon-24 {
        font-size: 24px; /* Sets icon size to 24 px */
    }
</style>

For SVG icons, you can change the size with the width and height CSS properties.

html

<span class="k-svg-icon k-svg-i-gear k-icon-24"></span>

<style>
    .k-icon-24 {
        width: 24px;
        height: 24px;
    }
</style>

Colors

Kendo UI provides the following predefined colors:

• primary—Applies coloring based on primary theme color.
• secondary—Applies coloring based on secondary theme color.
• tertiary— Applies coloring based on tertiary theme color.
• info—Applies coloring based on info theme color.
• success— Applies coloring based on success theme color.
• warning— Applies coloring based on warning theme color.
• error— Applies coloring based on error theme color.
• dark— Applies coloring based on dark theme color.
• light— Applies coloring based on light theme color.
• inverse— Applies coloring based on inverse theme color.

You can set each of them by using the respective CSS class:

• k-color-primary
• k-color-secondary
• k-color-tertiary
• k-color-info
• k-color-success
• k-color-warning
• k-color-error
• k-color-dark
• k-color-light
• k-color-inverse.

html

<span class="k-icon k-i-gear k-color-primary"></span>
<span class="k-icon k-i-gear k-color-info"></span>
<span class="k-icon k-i-gear k-color-light"></span>

You can also apply any custom color by using the CSS color property.

html

<span class="k-icon k-i-gear" style="color: blue;"></span>

Flipping and Rotating

To better accommodate an icon in your application, flip it horizontally, vertically, or in both directions by using the k-flip-h and k-flip-v predefined CSS classes.

html

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

You can also rotate the icon with the help of the following predefined CSS classes:

• k-rotate-0—Rotates an icon 0°.
• k-rotate-45—Rotates an icon 45°.
• k-rotate-90—Rotates an icon 90°.
• k-rotate-135—Rotates an icon 135°.
• k-rotate-180—Rotates an icon 180°.
• k-rotate-225—Rotates an icon 225°.
• k-rotate-270—Rotates an icon 270°.
• k-rotate-315—Rotates an icon 315°.

html

<span class="k-icon k-i-pencil k-rotate-90"></span>

List of Font Icons

For the full list of the available predefined Kendo UI icons, refer to this section.

Suggested Links

• Themes and Styling in Kendo UI for Angular
• Getting Started with Kendo UI for Angular
• Kendo UI Components for Angular