Skip to content

input_icon

The input_icon macro is used to render an additional icon inside the input. It it used by the input macro but can also be used alone to have more control over how the input is being rendered.

Definition

{% input_icon(iconName) %}

Input parameters

iconName

string name of the icon we want to display.

Example

In this example we render the heart icon alongside input control macro. We also use additional control classes and elements that help to style the input properly.

{% from "@macros/input_control.twig" import input_control %}
{% from "@macros/input_icon.twig" import input_icon %}

<div class="control">
    <div class="control__label">
        <label for="firstname">
            Firstname
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input">
                 {{ input_control({
                    name: 'firstname',
                    id: 'firstname',
                    value: 'jon',
                }) }}

                {{ input_icon('icon-heart') }}
            </label>
        </div>
    </div>
</div>

Macro source code

{% macro input_icon(iconName) %}
    {% from "@macros/icon.twig" import icon %}

    {{ icon(iconName, {
        classNames: ['input__icon']
    }) }}
{% endmacro %}

Form reference