New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Customization of the Chip

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

When customizing the rendering of the Chip, you can:

Adding Custom Remove Icons

To specify a custom Remove icon, use the RemoveIcon property of the Chip.

     @(Html.Kendo().Chip()
            .Name("chip")
            .Removable(true)
            .RemoveIcon("x")
            .Label("Close")
    )

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.

     @(Html.Kendo().Chip()
            .Name("chip")
            .AvatarClass("maria")
            .Label("Maria")
    )
    <style>
        .maria {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
        }
    </style>

See Also

In this article