How to customize specific icons in the navigation tree

Since version 2.1, Plone uses CSS rules for displaying the icons that show up in the navigation tree.
By default, the icons are set up in regard of the navtree elements portal_type.

The base principle is to add an id to the <div> tags that define the elements of the first level in the navtree.
To do so, we'll have to customize the portlet_navtree_macro template, which resides in portal_skins/plone_portlets.
We will then be able to identify the element we want to change the icon for, and apply specific CSS rules to it.

Here is one way to assign an id to elements that are in the first level of the navigation tree.
Beware that this method doesn't garantee a unique id for every element, as it is processed from the element title.

In portlet_navtree_macro, we have to change the line:

    <div tal:attributes="class item_type_class">

To:

    <div tal:attributes="class item_type_class;
                         id python:test(level == 1,'level_%s_%s' % ( level, nomalizeString(item['Title']) ))">

The template should now look like this:

<metal:main define-macro="nav_main">
<tal:navitem repeat="item children">
<li class="navTreeItem visualNoMarker"
    tal:define="parent_shows_children show_children|nothing;
                children item/children|nothing;
                cur_item item/currentItem;"
    tal:condition="python: (not item['no_display']) and (cur_item or parent_shows_children or children)">

    <tal:level define="item_type_class     python: 'contenttype-' + normalizeString(item['portal_type']);
                       item_wf_state_class python: 'state-' + normalizeString(item['review_state']);
                       ">

    <div tal:attributes="class item_type_class;
                         id python:test(level == 1,'level_%s_%s' % ( level, nomalizeString(item['Title']) ))">
        <a tal:condition="cur_item"
           tal:attributes="href item/absolute_url;
                           title item/Description|nothing;
                           class string: $item_wf_state_class navTreeCurrentItem visualIconPadding"
            tal:content="item/Title|nothing">
            Selected Item Title</a>
        <tal:children condition="python: parent_shows_children or children">
        <a tal:condition="not: cur_item"
           tal:attributes="href item/absolute_url;
                           title item/Description|nothing;
                           class string: $item_wf_state_class visualIconPadding;"
            tal:content="item/Title|nothing">
            Unselected Item Title</a>
        </tal:children>
    </div>

    <ul tal:attributes="class python:'navTree navTreeLevel'+str(level)"
        tal:define="show_children item/show_children| python:True;
                    level python:level+1;"
        tal:condition="python: (show_children or isNaviTree) and children">
        <metal:recurse use-macro="here/portlet_navtree_macro/macros/nav_main"/>
    </ul>
    </tal:level>
</li>
</tal:navitem>
</metal:main>

We are now ready to easily override the standard icon by adding a rule to our own stylesheet (in ploneCustom.css or in a stylesheet that we registered with the portal_css tool).

In the following snippet, we change the Members folder icon:

#level_1_members {
  background-image: url('document_icon.gif');
}

That's all folks ;)