complete menu link control to the max Drupal twig

menu--main.html.twig

{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('L-space', 'width-75','width-100@s') }}>
    {% else %}
      <ul>
    {% endif %}
    {% for item in items %}

      <li{{ item.attributes }}>

      {% set description = item.original_link.getDescription()|split(' | ') %}
      {% set linktitle = description.0 %}
      {% set svgicon = description.1 %}

        {#
          create the svg stuff
          if drupal allowed it in its safe html list we could have done
          {% set var = { '#markup': '<svg>...</svg>'} %}
          {{ link(var|render, item.url) }}

         #}
        {% set svgisawesome %}
          <span class="menu-main__icon _t_icon-use">
            <svg>
              <use xlink:href="/{{ active_theme_path() }}/templates/component/navigation/main/menu-icons.svg#{{ svgicon }}"></use>
            </svg>
          </span>
          <span class="menu-main__title">{{ item.title}}</span>
        {% endset %}

        {# inline template #}
        {% set var = {
          '#type': 'inline_template',
          '#template': '{{ svgisawesome }}',
          '#context': {'svgisawesome': svgisawesome}
          }
        %}

        {{ link(var|render, item.url, {
          'class':['L-center-middle'],
          'data-balloon': linktitle,
          'data-balloon-pos': 'down'
          } )
        }}

        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}