I use Bootstrap (v3) with Drupal 8. When I create a button named "Search something", bootstrap adds automatically a "Search" Glyphicon. I do some web searches, but I don't find how "disable" (or hide?) the 'search'auto-added glyphicon of my button.

When I create a sample submit button from a Form Class custom module :

public function buildForm(array $form, FormStateInterface $form_state) {
$form['submit'] = [
  '#type' => 'button',
  '#value' => 'Search something',

If I go to the page where there is my form, the button have automatically a magnifying glass glyphicon :

enter image description here

I want display my button without any glyphicon, how can I do that ? I must add a class to my button ? which ?

Thank you !

  • Instead of '#type' => 'button', did you check '#type' => 'submit'?
    – CodeNext
    Oct 22, 2016 at 17:50
  • Same result with 'submit' :) Oct 22, 2016 at 17:51
  • but, why there is no array in your code, it is supposed to be $form['submit'] = array(....).
    – CodeNext
    Oct 22, 2016 at 18:15
  • "[ ]" is same thing ;) Oct 22, 2016 at 18:18
  • 1
    I found the issue and why it is showing, now let me ask you just one thing, Do you need Search something word there or you are planning to add something else?
    – CodeNext
    Oct 22, 2016 at 19:49

4 Answers 4


I have just tested this thing using the Examples module which already provides the sample example form.

Now if you see the example of simple form it will shown,

enter image description here

Code for above image(just submit button part),

 $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),

NOW, if I change the t('Submit') to t('Search something'), so code change will be,

$form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Search something'),

Now, you can see the out-put image,

enter image description here

Did you surprise..:)...Just changing the String causing this all problem. Now why this is happening, this is all due to Bootstrap theme, ideally it should not happen. Now, if you read the first line of @remy's answer on this question:How can I theme the Bootstrap base theme search block?, it states that,

Bootstrap theme is deeply bundled with glyphicons .. it guesses the icon from the button text.

Hence, what is happening, Bootstrap theme taking that Search... word and automatically applying the icons and corresponding classes for color and etc because code has been set-up that way in that theme.

Now, if you do not want to use Search word, it will not show up as shown below,

enter image description here

Now, you can see the BLUE color disappeared, to get that, just add the #button_type, so it again can take appropriate classes. Now see, in following image everything is Ok.

$form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Something'),
      '#button_type' => 'primary',

enter image description here

Further, you can read that question provided in link, where they have discussed more on this, probably you may get idea to tackle this more in code way, but I think now, you can tackle this as we knew what causes this.

  • Thanks fot this detailed answer :) I tested with "'#button_type' => 'primary" but the magnifying glass is always here... I thinked me too about twig template. But, as you say, changing there will change at every place.. Oct 22, 2016 at 18:17
  • I hide the added span (contain the glyphicon) with some css :) Its an ugly way, but its works ! I nonetheless valid your response ;) thanks again ! Oct 22, 2016 at 20:19
  • @user2137454 No, that is not ugly way, even I was going to suggest that only, because CSS is the upper most layer in theme, so there is not interference in code and If you get that small thing done with CSS, it is OK.
    – CodeNext
    Oct 22, 2016 at 20:24
  • @user2137454 But If you are not using Seach word, then you do not have to use CSS also. Just add the #button_type and your text, you will be good to go.
    – CodeNext
    Oct 22, 2016 at 20:27
  • I must use the world Search ;) Oct 22, 2016 at 20:29

I haven't tried it for Drupal 8, but its works for drupal 7. It should work for drupal 8 as well.

In your bootstrap theme setting, under bootstrap setting there is tab of General setting. Inside that tab the are settings for different bootstrap components. You will see Buttons there. Just open that section and un-check Iconize Buttons option. That's it.

This will disable all the auto icons in buttons.

Please refer the image

  • 1
    This is the best answer and should be the accepted one. May 16, 2017 at 8:42
  • Just realised this setting existed. Previously I was using hooks provided by the Bootstrap theme to override. Jul 30, 2018 at 11:11

This works for Drupal 7. In your subtheme's template.php, you can do this :

function YOUR_THEME_bootstrap_iconize_text_alter(&$texts) {
  // We apply the glyphicon ONLY when the element matches "Search"
  $texts['matches'][t('Search')] = 'search'; // The alias of the glyphicon

  // When the element only "contains" the term "Search", it does not apply an icon anymore :

Sorry, I haven't tried for D8.


To disable glyphicons in Drupal 8 (because you are using the Bootstrap theme, or a theme which relies upon Bootstrap theme) simply go to: Home >> Administration >> Appearance >> Appearance settings. Under the Generalize tab on the left there will be options for Buttons. You can uncheck the boxes for Colorize and Iconize. Scree shot of Bootstrap settings

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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