Let a button carry a chosen icon before or after its text, and pick icons from tiles

Schema v25: a button takes an optional icon (any name from the shared set or
"none") and an icon position (start or end). Without a choice it keeps the
diagonal arrow behind the text, still with the button-arrow class, so stored
pages and their own CSS look exactly as before.

Thirteen everyday icons join the set (arrow down, chevron, calendar, message,
send, download, document, play, search, heart, info, plus, person). Button,
icon and icon card choose from a tile picker with a drawing per icon, grouped,
keyboard navigable, instead of a select with English keys. icons.js holds the
paths for the editor; a test keeps them equal to the Twig drawings and the
validator list. ADR 108.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

templates/admin/base.html.twig

@@ -18,7 +18,7 @@
        Importzeile sie kennen muss. Sie steht vor jedem Modul-Skript; spaeter geladen wirkt sie
        nicht mehr. #}
     <script type="importmap" nonce="{{ csp_nonce() }}">{"imports":{
-{%- for modul in ['editor-model', 'media', 'design-panel', 'button-design', 'color-control', 'rich-text', 'canvas-overlay', 'library-previews', 'preview-containers', 'page-picker', 'motion', 'slider', 'live-search'] %}
+{%- for modul in ['editor-model', 'media', 'design-panel', 'button-design', 'color-control', 'rich-text', 'canvas-overlay', 'library-previews', 'preview-containers', 'page-picker', 'motion', 'slider', 'live-search', 'icons'] %}
         "/assets/{{ modul }}.js": "/assets/{{ modul }}.js?v={{ kant_version() }}"{{ loop.last ? '' : ',' }}
 {%- endfor %}
     }}</script>

templates/blocks/block.html.twig

@@ -26,7 +26,13 @@
     {% endif %}
 {% elseif type == 'button' %}
     {% for device, settings in layout.button|default({}) %}{% for key, value in settings %}{% set designClasses = designClasses ~ ' b-' ~ device ~ '-' ~ key ~ '-' ~ value %}{% endfor %}{% endfor %}
-    <a id="{{ block.id }}" class="button cms-button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.text }} <span class="button-arrow" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: 'arrow-up-right'} only %}</span></a>
+    {# Schema v25: Symbol wählbar. Ohne Angabe der Pfeil wie bisher; er behält die Klasse
+       button-arrow, damit eigenes CSS älterer Websites (ausblenden, drehen) weiter greift. #}
+    {% set buttonIcon = props.icon|default('arrow-up-right') %}
+    {% set iconMarkup = '' %}
+    {% if buttonIcon != 'none' %}{% set iconMarkup %}<span class="button-icon{{ buttonIcon == 'arrow-up-right' ? ' button-arrow' }}" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: buttonIcon} only %}</span>{% endset %}{% endif %}
+    {% set iconFirst = props.iconPosition|default('end') == 'start' %}
+    <a id="{{ block.id }}" class="button cms-button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{% if iconMarkup and iconFirst %}{{ iconMarkup }} {% endif %}{{ props.text }}{% if iconMarkup and not iconFirst %} {{ iconMarkup }}{% endif %}</a>
 {% elseif type == 'image' %}
     {# Wie breit das Bild tatsaechlich erscheint. Steht im Block eine feste Breite - ein Logo mit
        190px, ein Symbol mit 72px -, dann ist das die Antwort, und der Browser laedt die kleine

templates/blocks/icon.html.twig

@@ -19,6 +19,19 @@
     home: 'm3 11.5 9-7.5 9 7.5M5.5 10v10h13V10M10 20v-6.5h4V20',
     'arrow-right': 'M4 12h15.5m-6.5-6.5 6.5 6.5-6.5 6.5',
     'arrow-left': 'M20 12H4.5M11 5.5 4.5 12 11 18.5',
-    'arrow-up-right': 'M6.5 17.5 17.5 6.5M8.5 6.5h9v9'
+    'arrow-up-right': 'M6.5 17.5 17.5 6.5M8.5 6.5h9v9',
+    'arrow-down': 'M12 4v15.5m-6.5-6.5 6.5 6.5 6.5-6.5',
+    'chevron-right': 'm9 5.5 6.5 6.5L9 18.5',
+    calendar: 'M4 6h16v14H4Zm0 5h16M8 3.5v4m8-4v4',
+    chat: 'M4 5h16v11H9.5L5 19.5V16H4Z',
+    send: 'M21 3 10 14M21 3l-6.5 18-4.5-7-7-4.5Z',
+    download: 'M12 3.5v12m-5-5 5 5 5-5M4.5 20h15',
+    document: 'M6 3h8l4 4v14H6Zm8 0v4h4M9 12h6m-6 4h6',
+    play: 'M8 5.5v13l10-6.5Z',
+    search: 'M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm4.8 11.3L20 20',
+    heart: 'M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z',
+    info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 8v5.5m0-9v.5',
+    plus: 'M12 5v14M5 12h14',
+    user: 'M12 11.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4.5 20.5c0-3.9 3.4-6 7.5-6s7.5 2.1 7.5 6'
 } %}
 <svg class="block-icon" viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>