My own primefaces p:commanButton icon

Question

I cannot use my own icon for a primefaces p:commandButton. My code is:

    <p:commandButton value="Cancel" action="#{userBb.cancel()}" 
       icon="ui-icon-myCancel" /> 

css is:

.ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

Structure of folders is ordinary: /resources/images/cancel_16.png

As a result i get:

When I try:

.ui-state-default .ui-icon .ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

I get:

When I look at firebug report, there is section span

<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span>

there is:

.ui-state-default .ui-icon {
    background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");

I have looked at this explanation, and others but found no answer.

When I try p:commandLink with h:graphicImage icon is visible, but it is an image as a button/link.

Answer 1

Zbyszek, these are the steps I took to get the output below. Based on your comment, I'm assuming that's what you're after.

Note: My picture's name was test.jpg and it was in the following directory resources/images/test.jpg. Also the style rule you provided was placed in resources/css/style.css. The size of my image was 25 x 17 (but I doubt that's important. I'm just saying this in case you're thinking the icon is too small).

In <h:head> make sure you have (Maybe you forgot to add this and the styles weren't being applied ?)

<h:outputStylesheet name="css/style.css" />

My <p:commandButton> (change as needed, it was just a quick mock up)

<p:commandButton value="Cancel" icon="ui-icon-myCancel" /> 

and your rule

.ui-icon-myCancel{
    background-image: url("#{resource['images/test.jpg']}") !important;
}

Answer 2

This simple url() version also works on Primefaces 6.1:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(if you put the icon file to web/img folder and the css file is in web folder)

But it rounds the corners of icon therefore I use this solution:

.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;  
                  border-radius: 0px!important;}