jQuery Mobile Button Icons

jQuery Mobile provides a set of icons that will make your buttons look more desirable.

Adding Icons to jQuery Mobile Buttons

To add an icon to your button, use the ui-icon class, and position the icon with an icon position class (ui-btn-icon-pos):

Note: For other buttons, like buttons in list views and forms, you must use the data-icon attribute. This will be explained in a later chapter.

Below we have listed some available icons that jQuery Mobile provide:

For a complete reference of all the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.

Positioning Icons

You can specify one of four values for where the icon should be positioned in the button: top, right, bottom or left.

Use the ui-btn-icon class to specify the position:

	If you do not specify the icon position for link buttons, the icon will not be shown.

Displaying Only The Icon

To only display the icon, use "notext" as value for icon position:

Removing The Circle

By default, all icons have a gray circle (disc) around them. To remove the circle, add the "ui-nodisc-icon" class to the element or its container:

Black or White Icons

By default, all icons are white. To change the icon color to black, add the "ui-alt-icon" to the element or its container:

More Examples

Add the "ui-nodisc-icon" class to a container
An example of the "ui-nodisc-icon" class added to a container.

Add the "ui-alt-icon" class to a container
An example of the "ui-alt-icon" class added to a container.