Change the icon of a custom menu item


How can I change the icon in a custom menu item?


For the purpose of this knowledge base, we will use as a code sample from Jahia Remote Publishing module.

    <bean id="Toolbar.Item.RemotePublicationManager" class="">
        <property name="actionItem">
            <bean class="org.jahia.ajax.gwt.client.widget.toolbar.action.OpenWindowActionItem"/>
        <property name="parentMenu" ref=""/>
        <property name="titleKey" value="label.remotepublicationmanager"/>
        <property name="icon" value="remotePublicationManager"/>

Our objective is to replace the remotePublicationManager icon by a custom icon using CSS.

To do so, first ensure you been has an ID, in the example above, the id is: Toolbar.Item.RemotePublicationManager. This id is automatically translated to the following class name:  .toolbar-item-remotepublicationmanager (note that "." are replaced with "-", and all letters are converted to lowercase).

Then, replace the icon property with a relative path to a transparent pixel, for example:

<property name="icon" value="/modules/remotepublish-parent/images/icons/transparent-pixel"/>

Finally, create a css rule defining the new custom icon for the menu:

.toolbar-item-remotepublicationmanager {
  background-image: url('/modules/remotepublish-parent/images/icons/myIconImage.png') !important