How to Change Primefaces Submenu Default Icons

How to change PrimeFaces submenu default icons

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 */
}

Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu

Does it really have to be 2 submenu inside each other for adding icon ?

Simply yes. As stated in PrimeFaces Documentation:

First level of submenus are rendered as accordion panels and descendant submenus are rendered as tree node.

If you look at the source code, you will see that user icons in root submenus will not be taken into account in encodeRootSubmenu(). On the other hand descendant submenus user icons will be taken into account in encodeDescendantSubmenu().

One possible solution to get user icon support for root submenus in PanelMenus, is to create a custom renderer based on PanelMenuRenderer and to override encodeRootSubmenu(). Maybe this question helps you as a starting point.

Primefaces: How to add icon and p:badges inside p:submenu on Panel Menu?

Badges are not supported on (sub)menu items at this moment (PrimeFaces 11). No matter if you use a free or paid theme. The only component that currently supports a badge on a child node is p:speedDial. What you can do is open a feature request and if possible submit a pull request.

Primefaces p:menu all icons jumps to submenu

SOLVED
Removed theme from ThemeRoller and took theme from Primefaces. It worked.

Icon for Primefaces Dynamic Menu

Yes, the setIcon method takes a string which is the name of the icon you want to set. So for example:

    MenuItem item3 = new MenuItem();
    item3.setIcon("ui-icon-print");

Are you perhaps trying to use an image instead of an icon? There is a cheat sheet of predefined icons here: http://www.petefreitag.com/cheatsheets/jqueryui-icons/

If you are trying to create your own icon then you will need to do what @Ravi has indicated and create a custom CSS class which you will reference in the setIcon() method.

How to add submenu to menuButton in PrimeFaces?

That's not supported with p:menuButton. You might want to try p:tieredMenu in combination with the overlay="true" attribute:

<p:commandButton id="dynaButton" value="Show" type="button" icon="pi pi-external-link"/>
<p:tieredMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:200px">
    <p:submenu label="File" icon="pi pi-fw pi-file">
        <p:submenu label="New" icon="pi pi-fw pi-plus">
            <p:menuitem value="Bookmark" icon="pi pi-fw pi-bookmark"/>
            <p:menuitem value="Video" icon="pi pi-fw pi-video"/>
        </p:submenu>
        <p:menuitem value="Delete" icon="pi pi-fw pi-trash"/>
        <p:divider />
        <p:menuitem value="Export" icon="pi pi-fw pi-external-link"/>
    </p:submenu>
    ...
    <p:menuitem value="Quit" icon="pi pi-fw pi-power-off"/>
</p:tieredMenu>

Angular PrimeNG menubar: Hide default down arrows next to menu titles

to hide it in style.css change its content like

.pi-caret-down::before{
   content: "";
}

check in developer console inspect element font name then make its before css as content: "";

How to Change Primefaces Submenu Default Icons