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
    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
    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>