How could I escape a & in Haml so that it compiles to & instead of &? (Haml noob)

Question

I am trying to use the Icomoon icon font with Haml and can't seem to find a way to escape the & so that it stays just an & instead of &.

The Icomoon font allows you to use HTML entities with a data-icon="" attribute. Works smooth as butter in HTML and even in a Haml file if I just do a straight HTML link.

However, since I'm learning Haml I thought I'd see if anyone on here would like to recommend the best way to approach this.

Here's a sample of what happens.

This is the original Haml:

%a(href='/posts' data-icon="&#x0026" aria-hidden='true')

This is how it compiles:

<a aria-hidden='true' data-icon='&amp;#x0026' href='/posts'>

This is how it needs to compile for the icon font to work:

<a aria-hidden='true' data-icon='&#x0026' href='/posts'>

and here is a codepen where you can see how the icon renders due to the amp; addition: http://codepen.io/dandenney/pen/3/6

Answer 1

You can use the :escape_attrs option to control whether HTML sensitive characters in attributes are escaped:

require 'haml'

haml = "%a(href='/posts' data-icon=\"&#x0026\" aria-hidden='true')"

puts Haml::Engine.new(haml, :escape_attrs => false).to_html

Output:

<a aria-hidden='true' data-icon='&#x0026' href='/posts'></a>

Note that this will apply to all attributes in your Haml template.

Answer 2

I didn't like the top poster's way of completing this question. So far the best way I've found is to do:

- foo = "&#x0026".html_safe
%a(href='/posts' data-icon=foo aria-hidden='true')

I'm not fully happy with this, but think it's better for rails apps rather than turning off HTML escaping everywhere.

Answer 3

In my opinion, I don't like the idea to disable the feature to escape the characters generally. Maybe you use relay at some point in your application on it.

For me the best way to do it is:

%a{ href: '/', 'data-icon' => "✐".html_safe }