jQuery Mobile – Programatically Changing (and Refreshing) Button Icons

I started working with jQuery Mobile and ran into a problem that took me some time to figure out. I have a button with an icon and I want to change that icon programatically every time the button is pressed. After searching the internet, I finally pieced together a solution that worked. I am currently using jQuery Mobile 1.0 RC2.

In the HTML, define your button:
<a href="javascript:changeIcon()" id="changeIconButton" data-role="button" data-icon="delete">Change My Icon</a>
In the JavaScript create your function:
function changeIcon() { 
   $("#changeIconButton").data('icon', 'check'); 
   $("#changeIconButton .ui-icon").addClass("ui-icon-check").removeClass("ui-icon-delete"); 

In this case the icon is being changed from a “delete” icon into a “check” icon when the button is pressed. The icon is also refreshed.

Currently you can use the following icon types:

  • Left arrow – “ui-icon-arrow-l”
  • Right arrow – “ui-icon-arrow-r”
  • Up arrow – “ui-icon-arrow-u”
  • Down arrow – “ui-icon-arrow-d”
  • Delete – “ui-icon-delete”
  • Plus – “ui-icon-plus”
  • Minus – “ui-icon-minus”
  • Check – “ui-icon-check”
  • Gear – “ui-icon-gear”
  • Refresh – “data-iconrefresh”
  • Forward – “ui-icon-forward”
  • Back – “ui-icon-back”
  • Grid – “ui-icon-grid”
  • Star – “ui-icon-star
  • Alert – “ui-icon-alert”
  • Info – “ui-icon-info”
  • Home – “ui-icon-home”
  • Search – “ui-icon-search”

More info on jQuery Mobile buttons can be found on the jQuery Mobile Site here



, , , ,

  1. #1 by Dave on April 13, 2012 - 7:09 pm

    THANK YOU SO MUCH for posting this excellent little bit of CRITICAL information; should be posted on the jQuery Mobile forum; with this basis i came up with the following which toggles the icon:

    function changeIcon() {
    if ($(“#changeIconButton”).data(‘icon’) == ‘plus’){
    $(“#changeIconButton”).data(‘icon’, ‘minus’);
    $(“#changeIconButton .ui-icon”).addClass(“ui-icon-minus”).removeClass(“ui-icon-plus”);
    else {
    $(“#changeIconButton”).data(‘icon’, ‘plus’);
    $(“#changeIconButton .ui-icon”).addClass(“ui-icon-plus”).removeClass(“ui-icon-minus”);

    AGAIN, mucho thanks.

  2. #2 by Dan Smart on August 22, 2012 - 8:07 am

    Thanks, very useful.

  3. #3 by TeBone on December 1, 2012 - 4:38 pm

    Just want to thank you for the snippet!
    Just a note from my side, I couldn’t use it right away! I am using jqm 1.2.0 final and in my case the toggle of classes did not refresh the underlaying spans so I changed your code to the following:

    click (function(){
    if ($(this).data(‘icon’) == ‘plus’){
    $(this).find(‘span .ui-icon-plus’).addClass(“ui-icon-minus”).removeClass(“ui-icon-plus”);
    $(this).find(‘span .ui-icon-minus’).addClass(“ui-icon-plus”).removeClass(“ui-icon-minus”);

    Hope it that this is helpful to others

    • #4 by Todd Jones on December 28, 2012 - 11:44 am

      Thanks Tebone, the JQM help.

      Question when my button is first rendered i see the span created by JQM, but then after the first click the <div is all that is left and the span is gone.

      button is declared as: "Read More”

  4. #5 by nawaz005 on March 6, 2013 - 6:56 am

    Thank u very much!!!

  5. #6 by Dave Faulkmore (@usguyintokyo) on July 9, 2013 - 2:06 am

    Realize this post is quite old. Would recommend instead of putting javascript in the html (href=”javascript:changeIcon()”) bind to click event

    $(“#changeIconButton”).on(‘click’, changeIcon() );

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: