title: Primefaces: how to change the default icon on the button of the calendar field?
body: <p>In Primefaces, how do I change the icon that is being used by the button of the calendar field?</p>
  
  <p>For example, in the following field</p>
  
  <pre><code>&lt;p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" /&gt;
  </code></pre>
  
  <p>I want to change the icon to <a href="http://forum.primefaces.org/images/smilies/icon_e_wink.gif" rel="nofollow">http://forum.primefaces.org/images/smilies/icon_e_wink.gif</a>.</p>
  
  <p>I've looked at the <a href="http://www.primefaces.org/docs/vdl/3.2/p/calendar.html" rel="nofollow">documentation</a>, but I cannot find an attribute for this.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have tried the following, with partial success:</p>
  
  <p>JSF:</p>
  
  <pre><code>&lt;p:commandButton id="modalDialogButton" value="" onclick="dlg2.show();" type="button" icon="ui-calendar"/&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ui-widget .ui-calendar {
  
      background-image: url(#{resource['images:country_flag.gif']});
  }
  </code></pre>
  
  <p><strong>PROBLEMS:</strong></p>
  
  <ol>
  <li><p>I do see the image on the <code>p:commandButton</code> button now. But, I am getting the warning message:</p>
  
  <p><code>Apr 03, 2012 10:43:58 AM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource
  WARNING: JSF1064: Unable to find or serve resource, images/country_flag.gif.jsf.</code></p></li>
  <li><p>I could not find a css style on the <code>p:calendar</code> that I should override in order to change the image on the calendar button.</p></li>
  </ol>