Customization of the ChipList

Updated on Dec 10, 2025

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

When customizing the rendering of the chips inside the ChipList, you can:

• Display icons
• Render avatars

Displaying Icons

The ChipList allows you to integrate Kendo UI Font Icons out-of-the-box.

Razor

    @using Kendo.Mvc.UI

    @(Html.Kendo().ChipList()
        .Name("chiplist")
        .Items(item=>{
            item.Add().Icon("plus").Label("Add");
            item.Add().Icon("pencil").Label("Edit");
            item.Add().Icon("trash").Label("Remove");
        })
    )

Rendering Avatars

The ChipList component treats the avatar as an icon. To display an avatar, pass a CSS class to the Items.AvatarClass property.

Razor

    @using Kendo.Mvc.UI

    @(Html.Kendo().ChipList()
        .Name("chiplist")
        .Items(item=>{
            item.Add().AvatarClass("maria").Label("Maria");
            item.Add().AvatarClass("thomas").Label("Thomas");
            item.Add().AvatarClass("dan").Label("Dan");
        })
    )
    <style>
        .dan {
            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");
        }

        .maria {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
        }
    </style>

See Also

• Applying the ChipList API (Demo)
• JavaScript API Reference of the ChipList HtmlHelper for ASP.NET MVC
• Server-Side API of the ChipList HtmlHelper for ASP.NET MVC