Text Link with Icon
Icons can be used in tandem with a text link. An icon can be placed before and/or after the 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 text underline and icon display correctly. 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-text-link__icon-before"> and <span class="e-bolt-text-link__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
{% set icon_custom %}
<img src="/images/placeholders/500x500.jpg">
{% endset %}
{% set icon_chevron_down %}
{% include '@bolt-components-icon/icon.twig' with {
name: 'chevron-down',
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'This is a text link with icons before and after',
icon_before: icon_custom,
icon_after: icon_chevron_down,
attributes: {
href: 'https://pega.com',
}
} only %}
HTML
<a href="https://pega.com" class="e-bolt-text-link"><span class="e-bolt-text-link__icon-before"><img src="/images/placeholders/500x500.jpg"></span>This is a text link with icons before and after<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-down"></bolt-icon></span></a>
