How to change PrimeFaces submenu default icons - css

Question

What is the method of adding my own custom icons to the submenu name area in a panelMenu in PF 3.5?
This is the example given on the official documentation web page:
I have to remove the small arrows and replace them with other images. So far, I have understood that the arrows are placed by the primefaces.js (which comes in the PF JAR file). What is the method of replacing them through java? As I am generating a dynamic menu, not a static one. I would like something like this:
I have tried
MenuItem item = new MenuItem();
item.setIcon("ui-icon-print");
But this changes it for the items INSIDE the submenu. e.g. Save and Update. I am asking for the headings or group names, "Ajax Menuitems", "Non-Ajax Menuitem" etc.

Answer 1

Disclaimer: I've tested this with PrimeFaces 6.0, but this will most likely also work with 3.5.
The easiest way to do so (in my opinion) is using CSS. If you inspect the arrow using your browsers debugging tools you will find that the image comes from a background sprite at a specific position.
To create a more specific rule to set your icon it's best to add a style class to your submenu:
<p:submenu label="Ajax Menuitems" styleClass="myIcon">
or in Java:
DefaultSubMenu defaultSubMenu = new DefaultSubMenu("Ajax Menuitems");
defaultSubMenu.setStyleClass("myIcon");
Now you can use that class to create your CSS rules (assuming you've created a sprite):
.myIcon .ui-icon.ui-icon-triangle-1-e {
background-image: url('pathToYourSprite.svg');
background-position: 0 0; /* closed position */
}
.myIcon .ui-icon.ui-icon-triangle-1-s {
background-image: url('pathToYourSprite.svg');
background-position: 0 0; /* opened position */
}

Answer 2

As suggested by #Jasper, I set the styleClass attribute for the submenu and it worked. Here is the code for my xhtml:
<div class="">
<h:form>
<p:panelMenu model= "#{menuBean.getModel()}" type="tiered">
</p:panelMenu>
<p:spacer height="10"></p:spacer>
</h:form>
</div>
CSS:
.icon-1 > h3 > span{
background-image: url(../resources/images/icon_1.png);
margin: 0px 4px 0px 0px;
width: 25px;
height: 25px;
}
.icon-2 > h3 > span {
background-image: url(../resources/images/icon_2.png);
margin: 0px 4px 0px 0px;
width: 25px;
height: 25px;
}
Java:
List<Items> list = //map of items to be added to the panelMenu with a parent-child hierarchy.
String label = "SubMenu 1";
String icon = "icon-1";
Creating a new submenu and adding styleClass:
Submenu submenu = new Submenu();
submenu.setLabel(label);
//submenu.setIcon(icon);
submenu.setStyleClass(icon);
Adding the submenu to the panelMenu:
((MenuModel) container).addSubmenu(submenu);
Creating a new item to go inside the submenu:
MenuItem item = new MenuItem();
item.setValue(label);
item.setTitle(label);
item.setIcon(icon);
if (container instanceof MenuModel) {
((MenuModel) container).addMenuItem(item);
} else if (container instanceof Submenu) {
((Submenu) container).getChildren().add(item);
}
The result:
This method works much better than the first method I tried. For that, I added a custom PanelMenu renderer as explained here: Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu. It is a lot more work while requiring the same icon styling classes.

Answer 3

to change the icon you have two solutions
First solution
You can look to the Ui-Icon we site and choose the icon that you want to use Icons Site
Second solution
you can use your own icon using css
.mainPageIcon {
background: url(/images/image.png) no-repeat;
height: 16px;
width: 16px;
}
<p:panelMenu style="width:300px" icon="mainPageIcon ">
...
</p:panelMenu >
for Java solution
MenuItem item3 = new MenuItem();
ImageIcon imageIcon = new ImageIcon(ImageIO.read(getClass().getResourceAsStream("/Project1/rawaz/new.gif")));
item3.setIcon("imageIcon");
You can read more Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu