Getting Started with Kendo UI for Angular Icon

The Icon component is used to display font icons. All Kendo UI Icons are supported.

Basic Usage

The following example demonstrates the Icon component in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="config-wrapper">
            <p>Size</p>
            <kendo-icon [name]="'clip'"></kendo-icon>
            <kendo-icon [name]="'clip'" [size]="'medium'"></kendo-icon>
            <kendo-icon [name]="'clip'" [size]="'large'"></kendo-icon>
        </div>
        <div class="config-wrapper">
            <p>Color</p>
            <kendo-icon [name]="'clip'" [themeColor]="'primary'"></kendo-icon>
            <kendo-icon [name]="'clip'" [themeColor]="'error'"></kendo-icon>
            <kendo-icon [name]="'clip'" [themeColor]="'warning'"></kendo-icon>
            <kendo-icon [name]="'clip'" [themeColor]="'success'"></kendo-icon>
            <kendo-icon [name]="'clip'" [themeColor]="'info'"></kendo-icon>
        </div>
        <div class="config-wrapper">
            <p>Flip</p>
            <kendo-icon [name]="'clip'" [flip]="'horizontal'"></kendo-icon>
            <kendo-icon [name]="'clip'" [flip]="'vertical'"></kendo-icon>
            <kendo-icon [name]="'clip'" [flip]="'both'"></kendo-icon>
        </div>
    `,
    styles: [`
        .config-wrapper {
            vertical-align: top;
            padding-bottom: 44px;
        }

        .config-wrapper > .k-icon {
            margin-right: 14px;
        }
    `]
})
export class AppComponent {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IconsModule } from '@progress/kendo-angular-icons';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        IconsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Functionality and Features

In this article