How change the menubutton icon in primefaces?

Question

I would like to put a custom icon in a p:menuButton, is this possible?

Answer 1

Yest it is possible. All you need to do is to override primefaces css classes generated for the p:menuButton.

Approach:

1. In the rendered web page you can right click on the generated p:menuButton and -> inspect element. There you can inspect all of the related css classes.
2. You can try to experiment with them (which I would advice, if you have time) for better understanding of css selectors and so on ...
3. The .ui-menubutton .ui-state-default .ui-icon are the classes that you need.

So now when you know which css classes are related to the icon you can override them :

Add .ui-menubutton .ui-state-default .ui-icon rule to your stylesheet (I assume you have one and it is sucesfully imported and working. If not check here.)

yourStyles.css :

.ui-menubutton .ui-state-default .ui-icon {
    background: orange; /** insert your background image **/
}

This will override icons of all p:menuButtons used in your project. If you want to reduce it to some particular p:menuButton then add its ID to the style definition.

#menubID.ui-menubutton .ui-state-default .ui-icon {
        background: orange; /** insert your background image **/
    }