Change the icon of a custom menu item

Question

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

Answer

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="org.jahia.services.uicomponents.bean.toolbar.Item">
        <property name="actionItem">
            <bean class="org.jahia.ajax.gwt.client.widget.toolbar.action.OpenWindowActionItem"/>
        </property>
        <property name="parentMenu" ref="editmode.managers.menu"/>
        <property name="titleKey" value="label.remotepublicationmanager"/>
        <property name="icon" value="remotePublicationManager"/>
        [...]
    </bean>

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
}

 

Related links