My Icon Twig Component

icon.twig

{#
/**
 * @file
 * SVG Icon template
 *
 * Variables:
 * - icon: Name of the icon; SVG should exist as build/img/icons/{icon}.swg
 * - text: Fallback text for screen readers, and when icon is not present.
 * - text_class: Provides a class using boolean text_visible, to add a class
 *   which determines whether fallback text should appear visually or not.
 * - location: Location of text in markup: left (default) or right of icon).
 */
#}
{% set text_class, location =
   text_visible ? 'icon-text' : 'icon-text-fallback',
   location ? location : 'left'
%}
{% if icon %}
  {% if text and location == 'right' %}
    <span class="{{ text_class }}">{{ text }}</span>
  {% endif %}
  <svg class="icon icon-{{ icon }}"><use xlink:href="#icon-{{ icon }}"></use></svg>
  {% if text and location == 'left' %}
    <span class="{{ text_class }}">{{ text }}</span>
  {% endif %}
{% endif %}

some-search-form.html.twig

<div class="search">
  <button class="search-toggle">
    <span class="search-toggle-icon search-toggle-icon--expand">
      {% embed '@components/icon.twig' with { icon: 'search-alt', text: 'Toggle Search' } %}{% endembed %}
    </span>
    <span class="search-toggle-icon search-toggle-icon--collapse">
      {% embed '@components/icon.twig' with { icon: 'close-x', text: 'Toggle Search' } %}{% endembed %}
    </span>
  </button>
  {{ form.search }}
  <div class="search-buttons">
    <span class="search-submit-icon">
      {% embed '@components/icon.twig' with { icon: 'search-alt', text: 'Search' }  %}{% endembed %}
    </span>
    {{ form.actions.submit }}
  </div>
  {{ children }}
</div>