AJAX button - HTML in #value causes problems i have an Ajax button, the code looks like this:

class coolButtons {
  public function getFormFieldAjaxButton() {
    return [
      '#type' =&gt; 'submit',
      '#value' =&gt; t('&lt;i class="  glyphicon glyphicon-refresh"&gt;&lt;/i&gt; Ajax Button'),
      '#name' =&gt; 'ButtonAjax',
      '#submit' =&gt; ['ajax_submit'],
      '#ajax' =&gt; [
        'callback' =&gt; 'ajax_callback',
        'wrapper' =&gt; 'button-fieldset-wrapper',
      ],
      '#attributes' =&gt; ['class' =&gt; ['btn-primary btn-sm']],
    ];
  }
}

function cool_form ($form, &amp;$form_state) {
  $buttons = new coolButtons();
  $form['fieldset-buttons'] = [
    '#type' =&gt; 'fieldset',
    '#title' =&gt; t('Buttons'),
    '#collapsible' =&gt; TRUE,
    '#collapsed' =&gt; FALSE,
    '#prefix' =&gt; '&lt;div id="button-fieldset-wrapper"&gt;',
    '#suffix' =&gt; ' &lt;/div&gt;',
  ];

  $form['fieldset-buttons']['button_ajax'] =
        $buttons-&gt;getFormFieldAjaxButton();
}

function ajax_callback($form, $form_state) {
  if ($form_state['triggering_element']['#name'] == 'ButtonAjax') {
    return $form['fieldset-buttons'];
  }
}

function ajax_submit($form, &amp;$form_state) {
  if ($form_state['triggering_element']['#name'] == 'ButtonAjax') {
    drupal_set_message('You clicked a very cool ajax button!');
  }
}


The value of the button has HTML in it, which causes problems.

1.) I can't have more than one of these buttons with html in the #value in one form, because then every button will perform the first defined statement in ajax_callback and ajax_submit regardless of the if statements (and thus, regardless of fieldset, #name etc.). 

2.) At the bottom of the form, text will appear in the following form:

Ajax Button" />

Is there a way around it, or is the only solution to not use HTML in the #value of the buttons?

I am using Drupal 7. 



Edit:

The slightly altered functions in rdp_cellmodel.module:

/**
 * Implements @see \hook_theme_registry_alter().
 */
function rdp_cellmodel_theme_registry_alter(&amp;$theme_registry) {
  drupal_set_message('Boop?');
  if (isset($theme_registry['button'])) {
    $theme_registry['button']['function'] = 'rdp_cellmodel_button';
  }
}

/**
 * TODO: Description
 *
 * @param $variables
 *
 * @return string
 */
function rdp_cellmodel_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }
  if (!empty($element['#glyphicon'])) {
    $glyph_name = $element['#glyphicon'];
    return '&lt;button' . drupal_attributes($element['#attributes']) . ' /&gt;&lt;span 
      class="glyphicon glyphicon-' . $glyph_name . '"&gt;&lt;/span&gt; '.
      $element['#value'] .'&lt;/button&gt;';
  }
  else {
    return '&lt;input' . drupal_attributes($element['#attributes']) . ' /&gt;';
  }
}


And here the form field in a class file:

/**
   * @return array
   */
  public function getFormFieldGeneratePreview() {
    return [
      '#type' =&gt; 'submit',
      '#value' =&gt; t('Preview Name'),
      '#name' =&gt; 'PreviewButton',
      '#submit' =&gt; ['ajax_submit'],
      '#ajax' =&gt; [
        'callback' =&gt; 'ajax_callback',
        'wrapper' =&gt; 'hpscreg-fieldset-wrapper',
      ],
      '#attributes' =&gt; ['class' =&gt; ['btn-primary btn-sm']],
      '#limit_validation_errors' =&gt; [],
      '#glyphicon' =&gt; 'refresh',
      '#suffix' =&gt; '&lt;div&gt; &lt;/div&gt;',
    ];
  }


Edit 2:
Here is the proper way of adding glyphicons to your buttons, you alter the button function and use a custom made one.

function mymodule_theme_registry_alter(&amp;$theme_registry) {
  if (isset($theme_registry['button'])) {
    $theme_registry['button']['function'] = 'mymodule_button';
  }
}

function mymodule_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }
  if (!empty($element['#glyphicon'])) {
    $glyph_name = $element['#glyphicon'];
    return '&lt;button' . drupal_attributes($element['#attributes']) . ' /&gt;&lt;span 
      class="glyphicon glyphicon-' . $glyph_name . '"&gt;&lt;/span&gt; '.
      $element['#value'] .'&lt;/button&gt;';
  }
  else {
    return '&lt;input' . drupal_attributes($element['#attributes']) . ' /&gt;';
  }
}


Then all you have to is add #glyphicon element to the submit and assign it the glyphicon name:

  $form['submit_button'] = array(
    '#type' =&gt; 'submit',
    '#value' =&gt; 'Send',
    '#glyphicon' =&gt; 'envelope', // in your case use "refresh"
  );


Result: