'Unicode characters in Angular binding

There are some answers on how to display Unicode character codes in Angular bindings, but I'm trying to display one dynamically and everything seems to fail.

I have a component which receives a character code as an @Input parameter.

<my-component [icon]="e901"></my-component>

The component then attempts to show it, but neither of these work:

<i>{{ "\u" + icon  }}</i>
<i [innerHTML]="'\u' + icon"</i>
<i [innerHTML]="`\u${icon}`"</i>
<i [innerHTML]="'&#' + icon + ';'"</i>

There's a lot of room to play with the syntax but it always either results in an error or just plain displays \ue901 as a string. It does work if I hardcode the code though:

<i>{{ "\ue901" }}</i>

It doesn't matter if I generate the string in the template or TypeScript. It doesn't work if I try to pass the entire code as a parameter. Any ideas, guys?

Solution 1:^[1]

After JGFMK pointed out half of the answer, here is the solution:

In the code:

this.icon = '&#x' + this.icon + ';';

Then in the template:

<span [innerHTML]="icon"></span>

Solution 2:^[2]

You can also use HTML code, here you can search it https://www.rapidtables.com/web/html/html-codes.html

Hope helps

Solution 3:^[3]

.ts file

icon = "\u{1F601}";

.html file

<p [innerHTML]="icon"></p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tamás Polgár
Solution 2	PatricioS
Solution 3	Gvs Akhil

'Unicode characters in Angular binding

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]