setHeaderCaption and FontAwesome

I'm trying to set a grid header caption as a FontAwesome icon. I'm trying

grid.getColumn("edit").setHeaderCaption(FontAwesome.PENCIL.getHtml());

However, it renders the readable HTML instead of the rendered HTML, in otherwords, I am seeing

<span class="v-icon" style="font-family: FontAwesome;">&#xf040;</span>

instead of the PENCIL icon.

How do I fix this so it renders as the icon? Thanks!

i use this

grd.getDefaultHeaderRow().getCell( propId ).setHtml( ch.hdrCaption );

where hdrCaption is some 2 line title like "Monday<br/>14.12.2015"

What do you use for propId?
What is the "ch" in ch.hdrCaption?

propId is a variable which holds the 'name' of the column, "edit" in your case.
ch is another variable (columnHelper) which holds the caption for the column, just replace it with your FontAwesome.PENCIL.getHtml().
so, your code would be:
     grid.getDefaultHeaderRow().getCell( "edit" ).setHtml( FontAwesome.PENCIL.getHtml() );
 

The call

grid.getColumn(propertyId).setHeaderCaption(caption)

is basically another way of saying

grid.getDefaultHeaderRow().getCell(propertyId).setText(caption)

There are no similar shortcuts for HTML and component header content, so you'll have to go through the header:

grid.getDefaultHeaderRow().getCell(propertyId).setHtml(htmlCaption)

This worked perfectly. Thank you so much!