How to add jQuery UI Button icons to input buttons?

Question

Is it possible to use jQuery UI Button icons with <input type="submit"> elements?

The documentation example uses <button> elements, but it does not explicitly say whether or not icons work with input buttons. I'd like to add icons to ASP.NET Button controls which render as <input type="submit">.

This is what I've tried:

$("input.add").button({ icons: { primary: "ui-icon-circle-plus" } });

The button is styled correctly except for the missing icon. Am I missing something?

Answer 1

You are doing it right. It just does not seem to work on input elements. A cursory look at the source code for JQuery UI Button shows that it prepends <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> to the element getting the icon but this does not seem to happen on input elements.

Actually looked a bit closer. Not sure how I missed this the first time but the source contains the following:

if ( this.type === "input" ) {
  if ( this.options.label ) {
    this.element.val( this.options.label );
  }
  return;
}

Which basically tells the code to exit before the span is prepended/appended on input elements. So this is by design.

Answer 2

As Bradley Mountford states, Submit elements are not styled with icons by design (why that's the design, I have no idea).

Change your asp:Button to a asp:LinkButton and all is right in the world. Yep, it really is that easy.

Answer 3

My problem was overwritten styles, so this solution helped me:

$('input.add').each(function(){
          $(this).replaceWith('<button  class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } });