Button icons

There a core set of standard icons included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and black colored sprites and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.

Adding icons

Icons can be added to buttons by adding a data-icon attribute on the anchor to specify the icon to display.

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

Creates this button with an icon:

Delete

Icon set

This is a reference for the icon names you can specify in the data-icon attribute.

Left arrow - data-icon="arrow-u"

My button

Right arrow - data-icon="arrow-d"

My button

Up arrow - data-icon="arrow-u"

My button

Down arrow - data-icon="arrow-d"

My button

Delete - data-icon="delete"

My button

Plus - data-icon="plus"

My button

Minus - data-icon="minus"

My button <a href="index.html" data-role="button" data-icon="delete">Delete</a>

Creates this button with an icon:

Delete

Icon positioning

By default, icons in buttons are added to the left of the text, but the data-iconpos attribute specifies the icon position: left or right of the text.

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

Creates this button with right-aligned icon:

Delete

To create an icon-only button that has an icon but no text, set the data-iconpos attribute to notext and the button plugin will hide the text and add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our data- attributes on the link.

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

Creates this icon-only button:

Delete

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.