Steps

Render an icon of the wiki's Icon Theme from a Velocity script with the $services.icon script service, which returns the markup and pulls in the stylesheets the theme needs.

1. Print the icon by its name in the XWiki Icon Set, which returns XWiki syntax

   The $services.icon.render('home') button returns to the wiki home page.

2. Call renderHTML instead where the surrounding output is already HTML, which returns the markup itself

   {{html}}<button class="btn btn-default">$services.icon.renderHTML('home') Home</button>{{/html}}

3. (Optional) Name a theme in the second argument to take the icon from that theme rather than the wiki's, and pass false as a third argument to get an empty result instead of a fallback when the theme or the icon is missing

   $services.icon.render('home', 'Silk')
   $services.icon.render('home', 'Silk', false)

4. (Optional) Read the icon's metadata instead when your own code builds the markup, and pull the theme's resources yourself, which getMetaData does not do

   $services.icon.use($services.icon.currentIconSetName)
   #set ($metadata = $services.icon.getMetaData('home'))
   #if ($metadata.iconSetType == 'IMAGE')
     {{html}}<img src="$metadata.url" alt=""/>{{/html}}
   #elseif ($metadata.iconSetType == 'FONT')
     {{html}}<span class="$metadata.cssClass" aria-hidden="true"></span>{{/html}}
   #end

5. Save the page. The icons are drawn by the theme the wiki uses, as follows:

   

FAQ

Why does an icon render as nothing?

Either the theme in use has no mapping for that name and the fallback was switched off, or the call failed and stored its exception instead of throwing.

Related

• Icon Script Service