Getting Started with Kendo UI for Angular SVG Icon

The SVG Icon component is used to display svg icons. The Kendo UI suite for Angular delivers more than 500 SVG icons.

Basic Usage

The following example demonstrates the SVG Icon component in action.

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

import { paperclip } from '@progress/kendo-svg-icons';

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

        .config-wrapper > .k-icon {
            margin-right: 14px;
        }
    `]
})
export class AppComponent {
    public icons = { paperclip };
}
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

SVG Icons List

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

@Component({
    selector: 'my-app',
    template: `
        <svg-icons-list></svg-icons-list>
    `
})
export class AppComponent {}
import { Component, OnInit } from '@angular/core';

import * as allIcons from '@progress/kendo-svg-icons';

@Component({
    selector: 'svg-icons-list',
    template: `
        <ul class="svg-icons-wrapper">
            <li *ngFor="let iconName of iconNames" >
                <kendo-svg-icon [icon]="icons[iconName]" [size]="'medium'"></kendo-svg-icon>
                <p>{{iconName}}</p>
            </li>
        </ul>
        `,
    styles: [`
        .svg-icons-wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .svg-icons-wrapper li {
            display: block;
            margin: 0 8px 8px 0;
            text-align: center;
            width: 150px;
            height: 60px;
            font-size: 12px;
        }
    `]
})
export class SVGIconsListComponent {
    public icons = allIcons;
    public iconNames = Object.keys(this.icons);
}
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';
import { SVGIconsListComponent } from './svg_icons_list.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        IconsModule
    ],
    declarations: [
        AppComponent,
        SVGIconsListComponent
    ],
    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 });

In this article