New Post: Suggestions for the icon system - without modifying the core.

Addendum:

In 'Composite\scripts\source\top\ui\bindings\buttons\ButtonBinding.js' the image property is copied from the button to the label. This will result in the icon render two times.
I modified the 'ButtonBinding.prototype.setImage' method to remove the image property from the button and have it only on the label:

ButtonBinding.prototype.setImage = function ( image ) {

    if (this.isAttached) {
        this.labelBinding.setImage(image);
        this.deleteProperty("image");
    }
    else {
        this.setProperty("image", image);
    }
}

I also modified the masterfilter.xsl so the '${icon' modification will only leave the resourcename:

<xsl:template match="ui:*/@image|@image-hover|@image-disabled">
    <xsl:attribute name="{local-name()}">
      <xsl:choose>
          <xsl:when test="contains(.,'${icon:')">
            <xsl:value-of select="substring-before(substring-after(., '${icon:'), '}')" />
          </xsl:when>
          <xsl:otherwise>
            <xsl:value-of select="." />
          </xsl:otherwise>
        </xsl:choose>
    </xsl:attribute>
  </xsl:template>

JamBo