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-components-icon/icon.twig' with { name: 'facebook-solid', size: 'small', } only %} {% endset %} {% set icon_twitter %} {% include '@bolt-components-icon/icon.twig' with { name: 'twitter-solid', size: 'small', } only %} {% endset %} {% set icon_linkedin %} {% include '@bolt-components-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>