Bolt Design System

Icon before and after menu item text

Use the icon_before and icon_after props to append icons before or after the menu item text.

Demo

Twig

{% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
    size: 'small',
  } only %}
{% endset %}
{% set icon_twitter %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'twitter-solid',
    size: 'small',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'linkedin-solid',
    size: 'small',
  } only %}
{% endset %}

{% include '@bolt-components-menu/menu.twig' with {
  items: [
    {
      content: 'Share via Facebook',
      icon_before: icon_facebook,
    },
    {
      content: 'Share via Twitter',
      icon_before: icon_twitter,
    },
    {
      content: 'Share via LinkedIn',
      icon_before: icon_linkedin,
    },
  ]
} only %}

HTML

<bolt-menu>
  <bolt-menu-item>
    <bolt-icon name="facebook-solid" size="small" slot="icon-before"></bolt-icon>
    Share via Facebook
  </bolt-menu-item>
  <bolt-menu-item>
    <bolt-icon name="twitter-solid" size="small" slot="icon-before"></bolt-icon>
    Share via Twitter
  </bolt-menu-item>
  <bolt-menu-item>
    <bolt-icon name="linkedin-solid" size="small" slot="icon-before"></bolt-icon>
    Share via LinkedIn
  </bolt-menu-item>
</bolt-menu>