Icon before and after menu item text Icons can be used in tandem with a Text Link, see how to use icon with the Text Link Element. An icon can be placed before and/or after the 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 supported in this scenario.
Demo
    • Twig
    {% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
  } only %}
{% endset %}
{% set icon_X %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'x',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'linkedin-solid',
  } only %}
{% endset %}

{% set list_items %}
  {% set menu_item_one %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Menu Item One',
      icon_before: icon_facebook,
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set menu_item_two %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Menu Item Two',
      icon_before: icon_X,
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set menu_item_three %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Menu Item Three',
      icon_before: icon_linkedin,
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  content: list_items,
} only %}
    HTML
    <menu class="e-bolt-menu">
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      <span class="e-bolt-text-link__icon-before" aria-hidden="true"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg></span>
      This menu item contains a button with icon before
    </button>
  </li>
  <li class="e-bolt-menu__item">
    <button type="button" class="e-bolt-text-link">
      This menu item contains a button with icon after
      <span class="e-bolt-text-link__icon-after" aria-hidden="true"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg></span>
    </button>
  </li>
</menu>