Icons


Icons

jQuery Mobile provides a number of icons that can be used by applying a data-icon attribute to buttons, navbar elements, linked list items and select menus, data-collapsed-icon and data-expanded-icon to collapsibles and collapsible-sets, and data-split-icon to split listviews. The icon name is self-describing. For example, the following will display a button with a home icon:

1
<a href="index.html" data-role="button" data-icon="home">Home</a>

The following is a full list of the icons provided:

Icons and themes

The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with themed buttons.