icon¶

The icon macro is used to render a single icon on the page.

Definition¶

{% icon(name, options = {}) %}

Input parameters¶

name¶

string represents the name of the icon to render.

options (optional)¶

object represents an object of icon options and attributes

Option key	Type	Default	Required	Description
options.size	`string`	""	no	The size of the icon. Supported sizes are: `l`, `xl`, `xxl`
options.filled	`boolean`	false	no	If set to `true` appropriate styling class will be added to the icon
options.noStroke	`boolean`	false	no	If set to `true` appropriate styling class will be added to the icon
options.clickable	`boolean`	false	no	If set to `true` appropriate styling class will be added to the icon
options.variant	`string`	false	no	The variant of the icon. Supported variants are: `link`, `success`, `error`
options.classNames	`string`	""	no	A list of additional classes added to the `svg` tag of the icon
options.title	`string`	""	no	A `title` attribute of the icon. Learn more about `title` attribute here
options.ariaLabel	`string`	""	no	An `aria-label` attribute of the icon. Learn more about `aria-label` here
options.ariaHidden	`string`	""	no	An `aria-hidden` attribute of the icon. Learn more about `aria-hidden` here
options.src	`string`	"/assets/img/icons/symbol-defs.svg"	no	The source of the icon. By default it is set to the default set of icons.

Example¶

In this example we render a basic heart icon

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-heart') }}

Example¶

In this example we render a filled heart icon

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-heart', {
    filled: true
}) }}

Example¶

In this example we render a clickable large heart icon with custom title and aria label

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-heart', {
    clickable: true,
    size: 'l',
    title: 'A heart icon',
    ariaLabel: 'A heart icon'
}) }}

Example¶

In this example we render a check icon in a success variant with additional class making it visible only on mobile devices

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-check', {
    variant: 'success',
    classNames: 'visible-xs-only'
}) }}

Macro source code¶

{% macro icon(name, options = {}) %}
    {% set iconSize = options.size ? "icon_#{options.size}" : "" %}
    {% set iconFilled = options.filled ? "icon_filled" : "" %}
    {% set iconNoStroke = options.noStroke ? "icon_no-stroke" : "" %}
    {% set iconClickable = options.clickable ? "icon_clickable" : "" %}
    {% set src = options.src ?? '/assets/img/icons/symbol-defs.svg' %}

    <svg class="
            icon
            {{ iconSize }}
            {{ iconFilled }}
            {{ iconNoStroke }}
            {{ iconClickable }}
            {% if options.variant %} icon_{{options.variant}} {% endif %}
            {{ options.classNames|join(' ') }}
        "
        {% if options.title %}title="{{ options.title }}"{% endif %}
        {% if options.ariaLabel %}aria-label="{{ options.ariaLabel }}"{% endif %}
        {% if options.ariaHidden %}aria-hidden="{{ options.ariaHidden }}"{% endif %}
    >
        <use xlink:href="{{src}}#{{name}}"></use>
    </svg>
{% endmacro %}