input submit as buttons

input--submit.html.twig

{{ attach_library(active_theme()~'/form') }}

{# find the unique name for the button. #}
{% if element['#value'].getUntranslatedString() %}
  {% set element_name = element['#value'].getUntranslatedString()|clean_class %}
{% else %}
  {% set element_name = element['#value']|clean_class %}
{% endif %}

{# We dont use form-submit or button--primary for the css so lets remove it. #}
{%
  set remove_classes = [
  'form-submit',
  'button--primary'
   ]
%}

{# add the specific classes for earch button #}
{% set classes = [

  element_name == "apply" ? 'button--icon button--icon-filter',
  element_name == "filter" ? 'button--icon button--icon-filter',
  element_name == "log-in" ? 'button--icon button--icon-ufo',

  ]
%}

{# test and se what icon we wanna put in there #}
{% if element_name =="save-configuration" or element_name =="save-settings" or element_name =="save" or element_name =="save-blocks" or element_name =="save-configuration" or element_name =="save-field-settings"  %}
  {% set svgfile ="/icons/girl.svg" %}
{% elseif element_name =="button--preview" or element_name =="preview" %}
  {% set svgfile ="/icons/browser.svg" %}
{% elseif element_name =="remove" or element_name =="delete" or element_name =="uninstall" %}
  {% set svgfile ="/icons/demoltion.svg" %}
{% elseif element_name =="search" %}
  {% set svgfile ="/icons/search.svg" %}
{% elseif element_name =="install" %}
  {% set svgfile ="/icons/console.svg" %}
{% elseif element_name =="send-message" %}
  {% set svgfile ="/icons/mailbox.svg" %}

{% endif %}


{# <input {{ attributes }}> #}

{# change the old input type sibmit to a button #}
<button
{{ attributes.
removeClass(remove_classes).
addClass(classes).
setAttribute('type', "submit")
}}
>
  {# Add an icon in here with svg #}
  {% if svgfile %}
    {% include active_theme_path() ~ svgfile %}
  {% endif %}

  {# the string for the button #}
  {{ attributes.value}}
</button>

{# add a reset button if its a field you can save from  #}
{% if
  ( element_name == "save-configuration" or
    element_name == "preview" or
    element_name == "save" or
    element_name == "install" or
    element_name == "uninstall"
  )
%}
  <button type="reset" class="button-icon">
    {% include active_theme_path() ~ '/icons/eraser.svg' %}
    {{ 'Reset'|t }}
  </button>
{% endif %}

{{ children }}