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

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.

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

@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:

Sizes

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

  • xsmallFont-size: 8px; Width: 8px; Height: 8px.
  • smallFont-size: 12px; Width: 12px; Height: 12px.
  • mediumFont-size: 32px; Width: 32px; Height: 32px.
  • largeFont-size: 48px; Width: 48px; Height: 48px.
  • xlargeFont-size: 64px; Width: 64px; Height: 64px.

Each of them can be set by using the respective class:

  • k-icon-xs
  • k-icon-sm
  • k-icon-md
  • k-icon-lg
  • k-icon-xl
<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>

Also, any custom size can be applied by using the CSS font-size property.

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

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

Colors

Kendo UI provides the following predefined colors:

  • primaryApplies coloring based on primary theme color.
  • secondaryApplies coloring based on secondary theme color.
  • tertiary Applies coloring based on tertiary theme color.
  • infoApplies 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.

Each of them can be set 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.
<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>

Any custom color can be applied by using the CSS color property.

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

Flipping

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

<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>

List of Font Icons

Actions

Example
View Source
Change Theme:

Alerts and Notifications

Example
View Source
Change Theme:

Editing

Example
View Source
Change Theme:

Files and Folders

Example
View Source
Change Theme:

Images

Example
View Source
Change Theme:

Layout and Navigation

Example
View Source
Change Theme:

Mapping

Example
View Source
Change Theme:

Media

Example
View Source
Change Theme:

Social Sharing

Example
View Source
Change Theme:

Toggle

Example
View Source
Change Theme:

Charts

Example
View Source
Change Theme: