$.fn.toButton - Jquery ui button com ícones para input

Uma das limitações que afastam os desenvolvedores de usar o jquery ui para criar seus botões é que pra usar o button do jquery ui nos inputs não é possível colocar ícones.

O site do jquery ui é claro ao informar essa limitação. Como podemos ver no final da página "Button" na seção "Demos & Documentation".

"Quanto se usa um input do tipo button, submit ou reset, o suporte é limitado para labels com textos planos sem ícones."

Usando o $.fn.toButton é possível adicionar um ícone ao input como se ele fosse um button, sem nenhuma limitação.

"jquery.inputToButton.js"

/*
 * inputToButton - jQuery plugin
 *
 * Copyright (c) 2011 Intersistemas
 * 
 * Author 
 * Waldney S. de Andrade
 *
 *
 */

;(function($) {
 
$.fn.toButton = function() {
  return this.map(function(index,inputElem){
   var inputClasses  = $(inputElem).attr('class');
   var inputText  = $(inputElem).val();
   var newButton = $("");
   $(inputElem).after(newButton);
   $(newButton).click(function(e){e.preventDefault();$(inputElem).click()});
         $(inputElem).hide();
         return $(newButton);
  });
};

})(jQuery);

Normalmente para utilizar o jquery.ui.button você faz como mostra abaixo.

$(function() {
       $( "input:submit" ).button();
});

Usando o $.fn.toButton para utilizar o jquery.ui.button em inputs você deve fazer como segue abaixo.

 
$(function() {
      $( "input:submit" ).toButton().button({
              icons: {
                      primary: "ui-icon-check"
              }
      });
});