span data-icon

I am currently able to put an icon next to a page title with the following code placed in the content text area of my Web part on the page. <span data-icon="{% MenuItemIcon %}" aria-hidden="true"></span> {% DocumentName %} Which works fine for most pages and displays the single icon required. However my list of custom icons has now looped through the alphabet upper and lower case and single digit numbers so I have two icons that have aa and bb as their values. The page type has a data source list of option that is s;Canis m;Felis B;Equis S;Lapis &#xy;Bovis aa;Exotis bb;Avis However in this instance Exotis displays the data-icon relevant to a lower case a twice. If I use the code <span data-icon="&#x{% MenuItemIcon %};" aria-hidden="true"></span> {% DocumentName %} the Exotis icon appears but all of the other pages then show the 5 data-icons relevant to &#xS; in the case of lapis.

I have also tried to add an if statement as these pages are shared across all species as below {% if CurrentPageInfo.DocumentName.ToString() !="Bovis" {"<span data-icon='&#xaa;' aria-hidden='true'></span>"} #%} Which just gives me a True irrespective of which page I am viewing.

Is there a way to make Kentico ignore fact that the data-icon may have two characters? I did also try with non standard characters such as ! but it still didn't work, it simply displayed the character !.