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>