Unicode characters in Angular binding

Question

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?

Answer 1

.ts file

icon = "\u{1F601}";

.html file

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

Answer 2

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

Hope helps

Answer 3

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>

Answer 4

Actually it's not possible because you must access pseudo elements with Angular for what you want to achieve.

Maybe this answer will give you some hints.