Steps

Let the reader of a form choose an icon of the XWiki Icon Set from a list instead of typing its name, by attaching the Icon Picker to the input field.

1. Give the input field an id, or a CSS class shared by the fields the picker applies to

   {{html}}
     <p>Icon: <input type="text" id="iconField"/></p>
   {{/html}}

2. Call the iconPicker macro after the field, naming that id, and set prefix to the text the chosen name is written behind

   {{iconPicker id="iconField" prefix="image:icon:"/}}

3. Save the page
4. Click the field. The picker opens under it, listing the icons of the theme named in "Preview with:", and clicking one writes that name into the field behind the prefix, as follows:

   

FAQ

Can one call attach the picker to several fields?

Yes. The class parameter attaches it to every input carrying that CSS class, and one call can name an id and a class at the same time.

Why does step 2 set prefix rather than leave it out?

Because the default it falls back to is not the one the parameter is documented with.

Related

• Add an Icon Using the WYSIWYG Editor