ChipList Customization
The ChipList provides options for customizing the Chip rendered for each of its items.
The component enables you to:
Rendering Chips
By passing your own Vue component to the chip prop, you can add item-specific styling or content. The component receives the ChipProps of the item, including dataItem, text, and value. Render the Chip component with the received props to retain its built-in behavior.
The following demo colors each Chip based on its item data.
Displaying Icons
The ChipList does not map icon fields automatically. To display an icon that varies by item, map a field from props.dataItem to the Chip's svgIcon or icon prop in the custom slot.
Using SVG Icons
Use the Chip's svgIcon prop for an SVG icon definition. For available icons, see the list of SVG icons. The following demo maps each item's icon field to svgIcon.
Using Font Icons
Use the Chip's icon prop for a font icon name. For available icons, see the list of font icons. The following demo maps each item's icon field to icon.
Displaying Avatars
To display an avatar for each item, pass a custom Chip through chip and set its avatar prop to an object with imageUrl and imageAlt. Use rounded to configure the shape of the avatar.
The following demo displays an image avatar in each Chip.