Reference

The Icon Picker lists the icons of the XWiki Icon Set under a text field and writes the name of the one that is clicked into it. Attach it to a field with the iconPicker macro, as Add an Icon Picker does, or with the jQuery plugin the macro itself calls.

The iconPicker macro

The macro takes no content, works inline, and applies to an id, a class, or both at once. It also pulls in the picker's stylesheet and the resources of every theme, so that each one can be previewed:

{{html}}
  <p>Field 1: <input type="text" id="myPicker"/></p>
  <p>Field 2: <input type="text" class="fieldWithPicker"/></p>
{{/html}}

{{iconPicker id="myPicker" class="fieldWithPicker" prefix="image:icon:"/}}

The jQuery plugin

The plugin is published by the IconThemesCode.IconPicker page as a JavaScript Extension, and calling it directly is only worth it when your own JavaScript creates the fields. The resources the macro pulls in then have to be asked for as well:

{{velocity output="false"}}
$xwiki.ssx.use('IconThemesCode.IconPicker')
#foreach ($iconSetName in $services.icon.iconSetNames)
  $services.icon.use($iconSetName)
#end
{{/velocity}}

{{velocity}}
{{html clean="false"}}
<script>
  require.config({
    paths: {
      'xwiki-icon-picker': '$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!{escapetool.url($request.minify)}")'
    }
  });
  require(['jquery', 'xwiki-icon-picker'], function($) {
    $('#someField').xwikiIconPicker({prefix: 'image:icon:'});
  });
</script>
{{/html}}
{{/velocity}}

xwikiIconPicker takes one option, prefix, whose default value has the two halves of image:icon: the wrong way round, so pass it rather than rely on it. The plugin ignores every element that is not an input, opens the picker when one of them takes the focus, and closes it when both the field and the picker have lost it.

What the picker shows

• the icons of one theme at a time, listed by their Icon Set names in alphabetical order
• a "Preview with:" selector holding every Icon Theme of the wiki, so a name can be checked against the theme that will draw it
• only the names containing what the field already holds, which is how a list of several hundred is narrowed

One picker exists at a time: focusing another field closes the one that is open.

FAQ

Can the list be restricted to some of the icons?

Only by what the field already holds, which the picker filters the names on as the reader types; there is no parameter for a fixed subset.

Related

• The displayIcon Macro