AJAX button - HTML in #value causes problems

Question

i have an Ajax button, the code looks like this:

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

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

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

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

function ajax_submit($form, &$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(&$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 '<button' . drupal_attributes($element['#attributes']) . ' /><span 
      class="glyphicon glyphicon-' . $glyph_name . '"></span> '.
      $element['#value'] .'</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

And here the form field in a class file:

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

Edit 2:

Answer 1

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(&$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 '<button' . drupal_attributes($element['#attributes']) . ' /><span 
      class="glyphicon glyphicon-' . $glyph_name . '"></span> '.
      $element['#value'] .'</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

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

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

Result: