enter here the wiki syntax that will display the icon. This line will be parsed by Velocity, and the $icon variable will correspond to the icon to display.Example: xwiki.iconset.render.wiki = image:path:$xwiki.getSkinFile("icons/silk/${icon}.png")

xwiki.iconset.render.html

enter here the HTML code that will display the icon. This line will be parsed by Velocity, and the $icon variable will correspond to the icon to display.Example: xwiki.iconset.render.html = <img src="$xwiki.getSkinFile("icons/silk/${icon}.png")" alt="Icon" />

xwiki.iconset.css

(optional) URL of a CSS file to enable to display the icon correctly. Will be parsed by Velocity.Example: xwiki.iconset.css = $services.webjars.url('font-awesome/4.1.0/css/font-awesome.min.css')

xwiki.iconset.ssx

(optional) Name of a page containing a Style Sheet Extension to enable to display the icon correctly.Example: xwiki.iconset.ssx = IconThemes.FontAwesome

xwiki.iconset.jsx

(optional) Name of a page containing a JavaScript Extension to enable to display the icon correctly.Example: xwiki.iconset.jsx = IconThemes.FontAwesomeSince 6.2-M2

Then, you enter all the icons with the following format:

name = value

Example:

add = fa-plus-circle

Script API

The icon module provides some script services:

$services.icon.render('home') ## generate the wiki syntax to display the icon$services.icon.render('home', 'Font Awesome') ## same, but also sets the icon theme to use$services.icon.render('home', 'Font Awesome', true) ## same, but enable or not the fallback, ie if the default icon theme is used if the icon theme specified does not exist or does not contain the specified icon.$services.icon.renderHTML('home') ## generate the HTML code to display the icon$services.icon.renderHTML('home', 'Font Awesome') ## see previously$services.icon.renderHTML('home', 'Font Awesome', true) ## see previously$services.icon.iconSetNames## returns the list of all icon theme available in the wiki$services.icon.iconNames## returns the list of all icons that contains the current icon theme$services.icon.getIconNames('Font Awesome') ## returns the list of all icons that contains the specified icon theme$services.icon.currentIconSetName## returns the name of the current icon theme (which is setted in the preferences)

Icon Picker

Since XWiki 6.4M2 This application proposes a picker to help user selecting an image inside the list of supported icons.

There is 2 ways for enabling it in your scripts: via a wiki macro or directly in javascript.

Icon Picker Macro

Using this macro is the easiest way to enable the icon picker.

Usage

{{iconPickerid=""class=""prefix=""/}}

Where:

id (optional)

DOM id of the input field where the picker will apply

class (optional)

CSS class of inputs where the picker will apply

prefix (optional)

Prefix to add before the name of the icon in the input field (default: "image:icon:")

// Require jquery and the icon picker require(['jquery', 'xwiki-icon-picker'], function($) { // Here you can bind the picker to some elements. // Examples: $('#someElement').xwikiIconPicker(); // apply the picker to the field #someElement $('#someElement').xwikiIconPicker({prefix: 'image:icon:'}); // change the prefix inserted before the icon name });</script>

## The icons themes may need some SSX, so we ask for a rendering of an icon of each icon theme, to be able to display## all icon themes in the picker## ToDo: since it is a bit hacky, a better system would be to dynamically load the needed SSX on demand#foreach($iconSetNamein $services.icon.iconSetNames)#set($discard= $services.icon.render('wiki', $iconSetName))#end

Silk Icon Theme

The Silk Icon Theme uses the Silk icons set to be mapped as an Icon Theme. This is an icon library launched in 2005 that contains over 1000 png images at 16px resolution.

The Silk Icon Theme is the default theme and the one used for fallbacks.

Preview

Example

Version Compatibility

XWiki version

Silk version used

6.2M1, 9.10

1.3

Links

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager: