CODEWITHSUNDEEP
cssangulartypescriptunicodeemoji
Isoldhe
Isoldhe

Reputation: 310

Unicode emoji not visible in browser (shows a square)

I'm trying to get emoji in a dropdown (select tag) menu in my Angular 6 project. I'm using unicode for this. So far I only managed to get some emoji (like ♥) to show. I want emoji like these: 😄😐😡 but all I see in the browser is an empty square.

I tried creating a simple, plain html file and than the emoji all show up in the dropdown menu. However, when I try to implement this in the angular template, it doesn't work anymore. I also tried downloading the Symbola font and adding it to the CSS, but no luck there either.

This is the template:

<div class="postContainer postContent bg-dark" style="width: 80%;">
  <form class="postForm" [formGroup]="newPost" (ngSubmit)="saveNewPost()">

    <label class="text-warning label">Smiley</label>
    <select formControlName="smiley" class="custom-select mr-sm-2 col form-control-lg" id="inlineFormCustomSelect"
            [ngClass]="{ 'is-invalid': submitted && f.smiley.errors }">

      <option selected>Choose...</option>

      <!-- Attempt with the Symbola emoji font -->
      <option value="Smiley1"><span class="emoji">&#x1F604;</span></option>

      <!-- Attempt without the Symbola emoji font -->
      <option value="Smiley2">&#x1F604;</option>

    </select>
  </form>
</div>

In my styles.css the font-face for the Symbola font

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

In the template's CSS file adding the Sybmola and emoji fonts:

.emoji {
  font-family: "emoji", "Symbola";
}

It's weird that it's working in a separate html file, but not within my Angular project. I'm using Visual Studio Code editor, if that matters. Does anyone know what the problem is here?

Update 1: If I copy the emoji itself and place it in a variable in the component:

smiley: any = '😄';

And then enter it in the template:

 // Form and select tags...
 <option value="Smiley2">{{smiley}}</option>

It shows the smileys in the dropdown menu in Firefox, but not in Chrome.

Update 2: It seems to be a Chrome issue. I tested a few random smileys and so far only emoji from unicode 7.0 to 10.0 (https://emojipedia.org/unicode-7.0/) work for the select tag in Chrome, older versions don't. The emoji from other version however do show up in 'normal' tags like paragraph tag. Just not in the option tag of the select menu. All emoji I want to use are part of unicode versions 6.0 and 6.1 Does anyone know how to solve this issue?

Update 3: So I added a few emoji to the dropdown menu and restarted Angular and Chrome. The emoji all show, even those from unicode version 6. However if I refresh (F5) the page, the emoji from version 6 disappear from the menu. So I guess my problem is now half solved:

enter image description here

Upvotes: 4

Views: 5279

Answers (1)

Isoldhe
Isoldhe

Reputation: 310

Not really a code based answer, but I found a solution for Chrome.

Apparently, I had a Chrome extension installed (Chromoji), which supposedly allows newer emoji in Chrome. It did, because the emoji looked different with that extension (the newer emoji unicode was visible). I removed the extension and now I only see the older version, but at least all emoji are visible now all the time.

This has been a pain in the neck for me for days. I hope Google will solve their emoji issue one day.

Upvotes: 1

Related Questions