In the .theme file of my custom Drupal 8 theme, how do I customize the default search block so that I can add custom classes and also alter the input label to remove the word "search" but instead have a search icon from fontawesome?

Pretty much, I'd like the final output code to look like this:

<div class="infoBar-search">
  <form action="#!" class="searchForm">
    <input type="search" name="sitesearch" placeholder="Search...">
    <input type="submit" class="searchForm-submit fa" value="&#xf002;">

Would the .theme approach be the best way to go about this? I tried altering a few template files but noticed this would affect the other forms on the site as well.


I'm sure this can be done more elegantly , but I was able to do this with a #icon_variable from the form[] to change the input suggestion. I just added side that I want the icon on the button and an extra option to ...-icon-class.html.twig etc.

1) Add a suggestion to the input

function MODULE_theme_suggestions_input_alter(array &$suggestions, array $variables, $hook) {

   if (isset($variables['element']['#icon']) || isset($variables['element']['#icon-left']) || isset($variables['element']['#icon-right'])) {
         $suggestions[] = 'input__submit_icon';
         if (isset($variables['element']['#icon'])) {
           $suggestions[] = 'input__submit_icon_' . $variables['element']['#icon'];

Then I can add/alter this on the form:

   $form['actions']['submit']['#icon-left'] = 'icon-class';

With a template like input__submit_icon.html.twig :

<button {{ attributes }} >
    {% if element['#icon-left'] %}
        <i class="{{ element['#icon-left'] }}"></i>
    {% endif %}
    {{ attributes.value }}
    {% if element['#icon-right'] %}
        <i class="{{ element['#icon-right'] }}"></i>
    {% endif %}
| improve this answer | |

First use the search block of drupal 8 and then override the search form with hook_form_alter function. and then finally render that block in the template file.

First override this twig file in your custom theme template. block--search-form-block.html.twig div class="infoBar-search"> {{ title_prefix }} {% if label %} {{ label }} {% endif %} {{ title_suffix }} {% block content %} {{ content }} {% endblock %} /div>

Correct the div tag. Then use hook_form_alter in .theme file to alter what ever u want to alter.

function hook_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) { if ($form_id == 'search_block_form') { $form['#attributes']['class'][] = 'searchForm'; $form['keys']['#attributes']['placeholder'] = t('Search...'); $form['actions']['submit']['#attributes']['class'][] = '"searchForm-submit fa'; }

| improve this answer | |
  • hmm, I've tried this but something must not be working correctly as nothing changes. I've changed both the twig file and .theme file and nothing. Any suggestions as to why? (Yes, I've cleared the cache) – ACanadianCoder Dec 12 '16 at 16:43
  • You must be doing something wrong. Recheck your code and put the code which i commented coz it works as i have tried. – Deepak modi Dec 13 '16 at 13:26
  • 1
    I was placing exact function name hook_form_alter, then identified that i should use theme name there something like my_theme_form_alter. Hope this may help someone who stuck like me. – siddiq Nov 17 '17 at 2:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.