Button with Icon
Icons can be used in tandem with a button. An icon can be placed before and/or after the button text. The icon component 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 and background props for the icon component are not well supported in this scenario.When writing in plain HTML, all white space must be eliminated to have the icon display correctly next to text (in terms of spacing and wrapping). The markup must be written all in one line and spaces between HTML elements must be removed.When writing in plain HTML, <span class="e-bolt-button__icon-before"> and <span class="e-bolt-button__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.
Demo
Twig
// Icon vars
{% set icon_custom %}
<img src="/images/placeholders/500x500.jpg">
{% endset %}
{% set icon_chevron_down %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'chevron-down',
} only %}
{% endset %}
// Button include
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a button with icons before and after',
icon_before: icon_custom,
icon_after: icon_chevron_down,
attributes: {
type: 'button'
}
} only %}
HTML
<button type="button" class="e-bolt-button"><span class="e-bolt-button__icon-before"><img src="/images/placeholders/500x500.jpg"></span>This is a button with icons before and after<span class="e-bolt-button__icon-after"><bolt-icon name="chevron-down"></bolt-icon></span></button>