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 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.