<bolt-input-icons>
  <bolt-list display="inline" spacing="xsmall">

    {# The invalid icon is always added; it's simply shown or hidden using CSS and javascript #}
    <bolt-list-item>
      <div class="c-bolt-input-icon--invalid">
        {% include '@bolt-elements-icon/icon.twig' with {
          name: 'warning',
          size: 'medium'
        } only %}
      </div>
    </bolt-list-item>

    {% set icon_size = icon_size|default("medium") %}

    {% for icon in icons %}
      {% if icon == 'search' %}

        {# The search icon is a special case; the icon itself needs to be a submit button #}
        <bolt-list-item>
          <button class="c-bolt-input-icon c-bolt-input-icon--link" type="submit" aria-label="{{ search_button_label }}">
            {% include '@bolt-elements-icon/icon.twig' with {
              name: icon,
              size: icon_size
            } only %}
          </button>
        </bolt-list-item>

      {% else %}

        <bolt-list-item>
          <div class="c-bolt-input-icon">
            {% include '@bolt-elements-icon/icon.twig' with {
              name: icon,
              size: icon_size
            } only %}
          </div>
        </bolt-list-item>

      {% endif %}
    {% endfor %}

  </bolt-list>
</bolt-input-icons>
