Chip Icons Icons can be used within a chip. Important Notes: When using icon-only chips, make sure to still pass text. The text will act as a label for the icon. Demo Icon before Icon after Show more
Twig
// Regular chip with icon {% include '@bolt-components-chip/chip.twig' with { text: 'Chip with icon', icon: { name: 'lock', position: 'after', }, } only %} // Icon-only chip {% include '@bolt-components-chip/chip.twig' with { text: 'Chip with icon', icon: { name: 'lock', }, iconOnly: true, } only %}
HTML
// Regular chip with icon <bolt-chip><bolt-icon name="lock" slot="before"></bolt-icon>Chip with icon</bolt-chip> // Icon-only chip <bolt-chip icon-only><bolt-icon name="lock" slot="before"></bolt-icon>Chip with icon</bolt-chip>