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>