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.

Basic Usage

To use the Kendo UI font icons:

1. Load a Kendo UI theme in your project.

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

3. Assign a k-icon CSS class that is followed by a predefined class from the list of font icons to an HTML tag. For example:

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

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.

Copy Code<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:

Copy Code@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 control the icon appearance with CSS, including:

• Size
• Color
• Flipping

Size

To set the icon size, use the font-size CSS property. The Kendo UI font icons are designed on a 16px grid base. To achieve a pixel-perfect icon display, multiply the icon size by a factor of 16 (32, 48, 64, and so on).

Copy Code<span class="k-icon k-i-gear"></span>
<span class="k-icon k-i-gear k-icon-32"></span>
<span class="k-icon k-i-gear k-icon-48"></span>
<span class="k-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>

Color

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

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

<style>
    .colored-icon {
        color: green;
    }
</style>

Flipping

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

Copy Code<span class="k-icon k-i-pencil"></span>
<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>

Loading Indicator

To render a loading indicator for your component while it loads, you can use either:

• The k-i-loading CSS class, or
• Custom logic which is based on the *ngIf directive and a loading mask. For a sample on how to apply the custom logic, refer to article on implementing a loading indicator in the Grid.

The following example demonstrates how to use the k-i-loading CSS class. You can adjust the size and color of the loading indicator in the same way you make adjustments to other icons.

Copy Code<span class="k-icon k-i-loading"></span>
<span class="k-icon k-i-loading" style="font-size: 64px;"></span>
<span class="k-icon k-i-loading" style="color: limegreen;"></span>

List of Font Icons

• Actions
• Alerts and Notifications
• Editing
• Files and Folders
• Images
• Layout and Navigation
• Mapping
• Media
• Social Sharing
• Toggle

Actions

Alerts and Notifications

Editing

Files and Folders

Images

Layout and Navigation

Mapping

Media

Social Sharing

Toggle

Suggested Links

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