Philip Norton Explains How to Theme Search API Forms with SVG Buttons in Drupal 11

The tutorial addresses a common theming request: using a magnifying glass icon instead of the default text-based submit button. Since SVGs cannot be injected into input elements, Philip demonstrates how to convert the submit input into a button element using form alter hooks combined with template suggestions.

The process begins with altering the search form using an object-oriented hook_form_alter() to inject attributes such as a custom data-twig-suggestion and ARIA labels for accessibility. Norton highlights the importance of maintaining screen reader compatibility by explicitly setting the aria-label since the visible text is replaced by an icon.

A second hook, theme_suggestions_input_alter(), uses the injected attributes to generate a custom template suggestion. This allows developers to implement a Twig template like input--submit--search-results-submit.html.twig that renders a button with embedded SVG markup.

While the author considered releasing this functionality as a contrib module, he notes the high variability of form structures across Drupal sites. Instead, he advocates for adapting this technique as needed, offering it as a flexible solution for frontend developers seeking control over form UI.