Search code examples
htmlangulartextfrontend

Emojis in Angular html template

I am trying to insert emojis into my html code. On the plain html file it is working. And on my Angular component it shows blank squares.

Here is a code that I have used for both plain and Angular examples:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Page</title>
</head>
<body>
<p style="font-weight:600"> &#128566; &#x1F636;</p>
</body>
</html>

Output in plain: Plain html example Output in Angular: Angular Example

Solution

  • Huh so I see what you're saying, actually adding interpolation in this case did make them render but I'm not entirely sure why they aren't rendered without the interpolation wrapping around em:

    {{'&#128566;'}}

    enter image description here