Chip with Icon Icons can be used in tandem with a chip. An icon can be placed before and/or after the chip text. The icon element is recommended for appending icons. However, an <img> element is also acceptable.
Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size prop for the icon element is not well supported in this scenario. When writing in plain HTML, all white space must be eliminated to have the icon display correctly next to text (in terms of spacing and wrapping). The markup must be written all in one line and spaces between HTML elements must be removed. When writing in plain HTML, <span class="c-bolt-chip__icon-before"> and <span class="c-bolt-chip__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.
Demo

Chip Icon Before and After

Chip Icon Before

Chip Icon After

Twig
// icon var
{% set icon_info_open %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'info-circle',
  } only %}
{% endset %}

// chip include
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Chip Icon',
  icon_before: icon_info_open,
  icon_after: icon_info_open,
} only %}
HTML
<div class="c-bolt-chip">
  <span class="c-bolt-chip__icon-before"><!-- Icon or image markup --></span>
  This is a chip with icons before and after
  <span class="c-bolt-chip__icon-after"><!-- Icon or image markup --></span>
</div>