Icon fonts, Thymeleaf and XML Spring

Question

I'm trying to use Icomoon web icon font in a Spring Thymeleaf application. The recommended method is to set a data-icon attribute in an HTML tag. The css then sets font family and content using the following selector [data-icon]:before.

The icons are references by HTML Entity Code ( &#xe0a0 for example).

Specifically if you goto this site: http://wrapbootstrap.com/preview/WB0375140

All the tabs have an icon on top of it specified by the data-icon attribute:

<li>
    <div class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></div>
    Dashboard 
</li>

which displays the icons on the top of the tab.

Doing same thing using Thymeleaf:

 <li>
     <a href=@{/index}" th:class="selected">
     <div class="fs1" aria-hidden="true" data-icon="&amp;#xe0a0;"></div>
     Dashboard   
 </li>

Shows  instead of the actual icon it self.

I have also ensured that the css file and the respective fonts are loaded correctly:

style.css: 
    @font-face { 
    font-family: 'icomoon'; 
    src:url('fonts/icomoon.eot'); 
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
    url('fonts/icomoon.woff') format('woff'), 
    url('fonts/icomoon.ttf') format('truetype'), 
    url('fonts/icomoon.svg#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

Answer 1

Please note that Thymeleaf 2.1.3 changed the way in which escaping is dealt with in non-processed attributes (in fact, in every attribute, see https://github.com/thymeleaf/thymeleaf/issues/255#issuecomment-42370355 ). Due to this, your data-icon attribute should work now without any external artifacts needed, as Thymeleaf should never touch your ampersands and just output them as they were in input.

Disclaimer, per StackOverflow rules: I'm thymeleaf's author.

Answer 2

Thymeleaf uses a SAX XML parser for rendering the markup. The SAX parser escapes XML entities during the rendering process as required by the XML standard.  coded by you therefore gets rendered as . Since this behaviour is required by the XML standard, Thymeleaf does not provide any way to control this behaviour through configuration (nor can it be controlled on the underlying Xerces parser).

The relevant code is in the Thymeleaf class AbstractGeneralTemplateWriter which is subclassed by XhtmlHtml5TemplateWriter. Look for the line writer.write(DOMUtils.escapeXml(attrValue, true)); in AbstractGeneralTemplateWriter. You can wrap this line in a condition such that it is called only for non-HTML5 attributes (that is, those that do not start with data-). Although the generated markup would still be invalid XML, this should not be a problem practically because browsers will not have a problem with unescaped XML entities.

Note: This suggestion is based on Thymeleaf version 2.1.2, which is the latest available version as of 26-Apr-2014.