Components / Buttons / Chip

Customization

The Chip component provides the following options for customizing its look and feel:

Custom Select Icon

You can specify a custom select icon by using the selectedIcon property.

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

import { ChipComponent } from '@progress/kendo-angular-button';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chip-list
            [selection]="'multiple'"
            (selectedChange)="changeSelection($event)"
        >
            <kendo-chip
                *ngFor="let chip of chips"
                [label]="chip.label"
                [selected]="chip.selected"
                [icon]="chip.icon"
                [selectedIcon]="chip.selectedIcon"
            >
            </kendo-chip>
        </kendo-chip-list>
    `
})
class AppComponent {
    public chips = [
        {
            label: 'Apple',
            selected: false,
            icon: null,
            selectedIcon: 'k-icon k-i-check-outline'
        },
        {
            label: 'Strawberry',
            selected: false,
            icon: null,
            selectedIcon: 'k-icon k-i-check-circle'
        },
        {
            label: 'Banana',
            selected: false,
            icon: 'marker-pin-target',
            selectedIcon: 'k-icon k-i-plus-outline'
        },
        {
            label: 'Kiwi',
            selected: false,
            icon: 'marker-pin-target',
            selectedIcon: 'k-icon k-i-plus-circle'
        }
    ];

    public selectedChips: ChipComponent = this.getSelectedChips();

    public getSelectedChips(): ChipComponent[] {
        return this.chips.filter((chip: ChipComponent) => chip.selected === true);
    }

    public changeSelection(chips: ChipComponent[]): void {
        this.selectedChips = chips;
    }
}

Custom Remove Icon

You can specify a custom remove icon by using the removeIcon property.

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

import { ChipComponent, ChipRemoveEvent } from '@progress/kendo-angular-button';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chip
            *ngFor="let chip of chips"
            [label]="chip.label"
            [selected]="chip.selected"
            [removable]="chip.removable"
            [removeIcon]="chip.removeIcon"
            (remove)="onRemove($event)"
        >
        </kendo-chip>
    `,
    styles: [`
        .k-chip {
            margin-right: 10px;
         }
    `],
    encapsulation: ViewEncapsulation.None
})
class AppComponent {
    public chips = [
        {
            label: 'Apple',
            selected: false,
            removable: true,
            removeIcon: 'k-icon k-i-delete'
        },
        {
            label: 'Strawberry',
            selected: false,
            removable: true,
            removeIcon: 'k-icon k-i-cancel-circle'
        },
        {
            label: 'Banana',
            selected: false,
            removable: true,
            removeIcon: 'k-icon k-i-close-outline'
        },
        {
            label: 'Kiwi',
            selected: false,
            removable: true,
            removeIcon: 'k-icon k-i-close'
        }
    ];

    public onRemove(e: ChipRemoveEvent): void {
        const index = this.chips.findIndex(c => c.label === e.sender.label);
        this.chips.splice(index, 1);
    }
}

Display Avatars

The Chip component threats the avatar as an icon.

You can display an avatar by passing k-chip-avatar CSS class to the iconClass property.

The iconClass property allows you to define a CSS class—or multiple classes separated by spaces—which are applied to a span element
inside the Chip.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-chip
            class="custom-style"
            *ngFor="let chip of chips"
            [label]="chip.label"
            [iconClass]="chip.iconClass"
        >
        </kendo-chip>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-chip {
            margin-right: 10px;
        }
        .pedro {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg");
        }
        .thomas {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg");
        }
        .christina {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
        }
        .paula {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/RATTC.jpg");
        }
        .custom-style {
            color: #6200ee;
            background-color: #f3ebfe;
            border-color: #6200ee;
        }
    `]
})
class AppComponent {
    public chips = [
        {
            label: 'Pedro Afonso',
            iconClass: 'k-chip-avatar pedro'
        },
        {
            label: 'Thomas Hardy',
            iconClass: 'k-chip-avatar thomas'
        },
        {
            label: 'Christina Berg',
            iconClass: 'k-chip-avatar christina'
        },
        {
            label: 'Paula Wilson',
            iconClass: 'k-chip-avatar paula'
        }
    ];
}

In this article