You can provide icons for your menu items using built-in Wijmo icons, or you can add your own custom icons. The built-in icons correspond to those provided in jQuery UI and jQuery Mobile.

To use built-in icons, add a class attribute to an HTML element that refers to "ui-icon" followed by a space and the name of the icon from one of the lists below. You can optionally add location information for the class.

Built-in icons for web applications

Built-in icons for mobile applications

For example, if you want to add a comment icon to a menu item, use markup like the following for the line item.

The <li> (line item) and <a> (anchor) elements are the same as usual, but we add a <span> element inside the <a> element, before the menu item text, and assign a ui-icon class attribute to it with the name of the icon and the optional location of the icon (wijmo-wijmenu-icon-right in this case).

By default, the icon appears to the left of the menu item text.

<li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-icon-right"></span> Comment</a></li>