How to stop Django from escaping the # symbol

Question

I am trying to use SVG sprites for the icons in a site, like this:

<svg aria-hidden="true" class="icon">
    <use xlink:href="{% static 'images/site-icons.svg#icon-twitter' %}"></use>
</svg>

However this doesn't work because the # gets escaped by Django and so I end up with:

<svg aria-hidden="true" class="icon">
    <use xlink:href="/static/images/site-icons.svg%23icon-twitter"></use>
</svg>

So no icons are rendered. I have isolated that the problem is the escaping, since it works if I paste the contents of site-icons.svg in the template, and do

<svg aria-hidden="true" class="icon">
    <use xlink:href="#icon-twitter"></use>
</svg>

so the problem is in the escaping.

Does anybody know how to avoid this escaping from happening?

Answer 1

You need to move the id after the static tag

{% static 'images/site-icons.svg#icon-twitter' %}

should be

{% static 'images/site-icons.svg' %}#icon-twitter

The reason behind this is that the static tag's job is to find the path to a static file, so all it needs is the file's location, anything extra needs to be added after so that when the template is rendered, it appears as a single (concatenated?) link