Update elementsForm.twig submitButtonText with raw filter

[john-henry]

Description

Adds |raw filter to submit button text which allows custom HTML inside the button. An example would be an SVG icon of a padlock as a prefix to Pay text

 submitButtonClasses: 'mt-6 inline-flex items-center text-center rounded-sm bg-[#008000] px-6 py-2.5 text-lg font-heading font-semibold text-white shadow-sm hover:bg-[#228B22] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green gap-x-2',
 submitButtonText: ' <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg> Pay Securely',

[billmn]

Agree, could be very useful 👍

[billmn]

@john-henry alternatively you can set the html in a variable:

{% set buttonLabel %}
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>
    Pay Securely
{% endset %}

and then

submitButtonClasses: 'mt-6 inline-flex items-center text-center rounded-sm bg-[#008000] px-6 py-2.5 text-lg font-heading font-semibold text-white shadow-sm hover:bg-[#228B22] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green gap-x-2',
submitButtonText: buttonLabel,

[lukeholder]

@billmn's solution is the recommended way to do this. Thanks!