Documenting icons

entries/accordion.xml

@@ -98,7 +98,7 @@
 		</option>
 		<option name="icons" type="Object" default='{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }' example-value='{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }'>
 			<desc>
-				<p>Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to <code>false</code> to have no icons displayed.</p>
+				<p>Icons to use for headers, matching <a href="/theming/icons/">an icon provided by the jQuery UI CSS Framework</a>. Set to <code>false</code> to have no icons displayed.</p>
 				<ul>
 					<li>header (string, default: "ui-icon-triangle-1-e")</li>
 					<li>activeHeader (string, default: "ui-icon-triangle-1-s")</li>

entries/button.xml

@@ -22,7 +22,11 @@
 	<options>
 		<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
 		<option name="icons" default="{ primary: null, secondary: null }" example-value='{ primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }'>
-			<desc>Icons to display, with or without text (see <a href="#option-text"><code>text</code></a> option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS. The value for the <code>primary</code> and <code>secondary</code> properties must be a class name, e.g., <code>"ui-icon-gear"</code>. For using only one icon: <code>icons: { primary: "ui-icon-locked" }</code>. For using two icons: <code>icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }</code>.</desc>
+			<desc>
+				<p>Icons to display, with or without text (see <a href="#option-text"><code>text</code></a> option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS.</p>
+
+				<p>The value for the <code>primary</code> and <code>secondary</code> properties must match <a href="/theming/icons/">an icon class name</a>, e.g., <code>"ui-icon-gear"</code>. For using only one icon: <code>icons: { primary: "ui-icon-locked" }</code>. For using two icons: <code>icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }</code>.</p>
+			</desc>
 			<type name="Object" />
 		</option>
 		<option name="label" default="null" example-value='"custom label"'>

entries/menu.xml

@@ -66,7 +66,7 @@
 		<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
 		<option name="icons" type="Object" default='{ submenu: "ui-icon-carat-1-e" }' example-value='{ submenu: "ui-icon-circle-triangle-e" }'>
 			<desc>
-				Icons to use for submenus, matching an icon defined by the jQuery UI CSS Framework.
+				Icons to use for submenus, matching <a href="/theming/icons/">an icon provided by the jQuery UI CSS Framework</a>.
 				<ul>
 					<li>submenu (string, default: "ui-icon-carat-1-e")</li>
 				</ul>

entries/spinner.xml

@@ -41,7 +41,7 @@
 		<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
 		<option name="icons" type="Object" default='{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }' example-value='{ down: "custom-down-icon", up: "custom-up-icon" }'>
 			<desc>
-				Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.
+				Icons to use for buttons, matching <a href="/theming/icons/">an icon provided by the jQuery UI CSS Framework</a>.
 				<ul>
 					<li>up (string, default: "ui-icon-triangle-1-n")</li>
 					<li>down (string, default: "ui-icon-triangle-1-s")</li>

pages/theming/icons.html

@@ -0,0 +1,19 @@
+<script>{
+	"title": "Icons",
+	"excerpt": "A list of the icons provided by jQuery UI.",
+	"termSlugs": {
+		"category": [ "theming" ]
+	}
+}</script>
+
+<p>jQuery UI provides a number of icons that can be used by applying class names to elements. The class names generally follow a syntax of <code>.ui-icon-{icon type}-{icon sub description}-{direction}</code>. For example, the following will display an icon of a thick arrow pointing north:</p>
+
+<pre><code>
+<span class="ui-icon ui-icon-arrowthick-1-n"></span>
+</code></pre>
+
+<p>The icons are also integrated into a number of jQuery UI's widgets, such as <a href="/accordion/#option-icons">accordion</a>, <a href="/button/#option-icons">button</a>, <a href="/menu/#option-icons">menu</a>.
+
+<p>The following is a full list of the icons provided:</p>
+
+<iframe src="/resources/icons-list.html" width="100%" height="1000"></iframe>