use UI Icon-sprites without buttons?

Question

Is there a standard way of using the jquery-ui icon sprite without attaching them to buttons?

They are simple to use as they are. For example, attach the class 'ui-icon-circle-arrow-e' to any link that expands and 'ui-icon-circle-arrow-s' in its expanded state. But these feel like hacks, I am new to the jquery(-ui) library and I am just trying to establish some best practices. I have done a few searches here and on google with no real definite answer.

Answer 1

Yes all the icons are added via classes as mentioned in the documentation here: ui-theming

<span class="ui-icon ui-icon-circle-plus"></span>

jQuery UI will also adjust the icon based on the state of the container - mainly used for error/default states.

Here is a jsfiddle adjusting the icon to show inline in text -- it is intentionally flexible to be used however and wherever you want.

Answer 2

You've pretty much nailed it. All of the icons are classed out in css for your pleasure.