Icon for primefaces commandButton

I found placing my own icon in <p:commandButton> a little confusing. When I try to do this I got no icon at all, or strange mark looked like this:

When I've done a little research I found this:

I can have an icon in a three way:

#1. Button as a picture. There is no value/description visible. Only an icon/picture.
         <p:commandLink action="#{someBean.someAction()}">
            <h:graphicImage name="images/new_create.png" />
         </p:commandLink>

#2. Button with an icon/picture as a background. So one see a description like "New" and the picture of icon in background. 
<p:commandButton value="New!" styleClass="ui-back-but-new"/>
and respectively in css: 
.ui-back-but-new{
   background: url("#{resource['images/new_create.png']}") no-repeat top left !important;
}

#3. Button with an icon placed left to its description (value attrib).
<p:commandButton value="New" icon="ui-but-new-icon"/>
and respectively in css:
.ui-but-new-icon{
   background-image: url("#{resource['images/new_create.png']}") !important;
}

The problem was...:

All my problems came from wrong path to the icon image. It is probably the most frequent mistake. I have coded it as images/new_create.png in css statements. Structure of folders was /resources/images/new_create.png.

The proper path could be given in a three ways:

• url("#{resource['images/new_create.png']}")
• url(../resources/images/new_create.png) 
• url(/MyAppName/resources/images/new_create.png) 

The first way is the best. It uses JSF resource identifier so it is most flexible. 

The effect #1, #2, #3: