Customization

The Chip component provides options for customizing its look and feel.

When customizing the rendering of the Chip, you can:

• Render a custom Remove icon
• Display avatars

Custom Remove Icons

To specify a custom Remove icon, use the removeIcon property.

    <span id="chip"></span>

    <script>
        $("#chip").kendoChip({
            removable: true,
            removeIcon: "x",
            label: "Close"
        });
    </script>

Displaying Avatars

The Chip component treats the avatar as an icon. To display an avatar, pass a CSS class to the avatarClass property.

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

    <span id="chip"></span>

    <script>
        $("#chip").kendoChip({
            avatarClass: "maria",
            label: "Maria"
        });
    </script>
    <style>
        .maria {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
        }
    </style>

See Also

• Binding the Chip over MVVM (Demo)
• Applying the Chip API (Demo)
• JavaScript API Reference of the Chip