CODEWITHSUNDEEP
htmlangularionic-frameworkutf-8
Reza
Reza

Reputation: 19913

How to show emoji in angular/ionic app

In my mobile app using angular5/ionic3 app I want to show emoji icon.

So I used something like

<span>&#x1F601;</span>

But in rendering it will show it as empty square.

I already have <meta charset="UTF-8"> in my index.html and html file is also saved as utf-8.

I thought it could be related to sanitizing, so I created below pipe

@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private domSanitizer: DomSanitizer) { }
    transform(html) {
    return this.domSanitizer.bypassSecurityTrustHtml(html);
    }
}

and then I used it as

 <span [innerHTML]="'&#x1F601;' | safeHtml"></span>

but still result is the same

What did I miss?

enter image description here enter image description here

Plunker

Upvotes: 6

Views: 11904

Answers (1)

Dmitry
Dmitry

Reputation: 7276

This is usually happening when you don't have a font to display the character. On my computer Chrome uses the Symbola font to render this character. You can download it from here. Or you can find another font that supports emojis. Than you add the font in CSS using @font-face

@font-face {
  font-family: "Symbola";
  src: url("/fonts/Symbola-Emoji.woff") format("woff"),
    url("/fonts/Symbola-Emoji.ttf") format("ttf");
}

Then you can use this font on a CSS class.

.emoji {
    font-family: "Symbola"
}

Then you add that class to your span:

<span class="emoji">&#x1F601;</span>

UPDATE:

If you assign &#x1F601; to a variable and then read it inside the template it works fine:

<span [innerHTML]="someVariable | safeHtml"></span><!--this will work-->

But your code breaks: the U+1F601 character (a.k.a. 😁) becomes U+F601 and since you don't have a font to display it you get an empty square. It looks like a bug in Angular's template rendering engine because even if I do <span [innerHTML]="(someVariable + '&#x1F601;') | safeHtml"></span> it still breaks. I get the 😁 and the U+F601 character. So this is not the sanitizer problem.

Upvotes: 4

Related Questions