RichFaces Sorting Icon - jsf-2

Question

I am migrating a richfaces 3.x application to 4.x, on a datatable i need to add sorting functionality which is not built in, i have added the sorting functionality but i need to place icons for the sorting functionality, how do i pick icons from richfaces components ui jar? should i place new icons inside the project and then access it.
<rich:dataTable id="showsEventsTable">
<rich:column sortable="true" selfSorted="true"
sortBy="#{show.name}" sortorder="SortOrder.ascending" sortOrder="#{sortingBean.showNameOrder}">
<f:facet name="header">
<a4j:commandLink value="Show Name" render="showsEventsTable" action="#{sortingBean.sortByShowName()}"
styleClass="sortingColumn" status="waitStatus">
<span styleClass="#{sortingBean.sortOrder}"/>
<h:graphicImage value="??(what should go here if am accessing richfaces components jar)" library="org.richfaces"/>
</a4j:commandLink>
</f:facet>
<h:outputText value="#{show.name}" />
</rich:column>
</rich:dataTable>
In the css file
.ascending{
background-image: url("imgpath");
}
.descending{
background-image: url("imgpath");
}
.unsorted{
background-image: url("imgpath");
}

Answer 1

If your application was migrated to RichFaces 4.5, then you don't need accessing to sorting icons - its appear automatically, when sorting is added.
If application was migrated to previous version of RichFaces 4.x, then simple add 3 sorting icons (from RichFaces 3 or RichFaces 4 jar) in your application and use it.
UPDATE
Following is example have to use sorting icons:
<rich:column id="date" sortBy="#{rs.changeDate}" sortOrder="descending">
<f:facet name="header">
<h:commandLink value="#{msg.entryDate}" styleClass="tableColumnHeader">
<rich:componentControl target="noteTable" operation="sort">
<f:param name="column" value="date" />
<f:param value="" />
<f:param name="reset" value="true" />
</rich:componentControl>
<h:graphicImage value="/images/sort/sort_asc.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{chNotesAction.list.order == 'changeDate ASC'}" />
<h:graphicImage value="/images/sort/sort_des.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{chNotesAction.list.order == 'changeDate DESC'}" />
<h:graphicImage value="/images/sort/sort_uns.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{chNotesAction.list.order != 'changeDate ASC'
and chNotesAction.list.order != 'changeDate DESC'}" />
</h:commandLink>
</f:facet>
<h:outputText value="#{rs.changeDate}">
<f:convertDateTime timeZone="#{referenceData.timezone}" pattern="MMM dd, yyyy HH:mm" />
</h:outputText>
</rich:column>
You can use 1 graphicImage with EL for value attribute like order eq 'ASC' ? sort_acs.gif : (order eq 'DESC' ? sort_desc.gif : sort_unc.gif)