Attempting to incorporate emoji into a dropdown (select tag) menu in an Angular 6 project using unicode has been challenging. The browser only displays certain emojis like ♥, but others such as 😄, 😐, and 😡 appear as empty squares.
A simple HTML file showcases all the emojis correctly in the dropdown menu, yet the issue arises when trying to implement this within the Angular template. Even downloading the Symbola font and including it in the CSS did not yield the desired results.
The Angular template code snippet:
<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">😄</span></option>
<!-- Attempt without the Symbola emoji font -->
<option value="Smiley2">😄</option>
</select>
</form>
</div>
Including the Symbola font in styles.css:
@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");
}
Addition of Symbola and emoji fonts in the template's CSS file:
.emoji {
font-family: "emoji", "Symbola";
}
Strange that the emojis display correctly in a standalone HTML file but not within the Angular project. Using the Visual Studio Code editor for reference. Any insights on resolving this hitch?
Update 1: Directly inputting an emoji into a variable within the component:
smiley: any = '😄';
Subsequent display in the template:
// Form and select tags...
<option value="Smiley2">{{smiley}}</option>
Emojis are visible in Firefox but not in Chrome.
Update 2: Issue seems Chrome-specific. Only emojis from unicode 7.0 to 10.0 work in the select tag, whereas older versions do not. Other emojis appear in regular tags but not within the option tag of the select menu. Required emojis fall under unicode versions 6.0 and 6.1. Any solutions to rectify this obstacle?
Update 3: Adding emojis to the dropdown menu and relaunching Angular and Chrome displays all emojis, including those from version 6 of Unicode. However, upon page refresh (F5), emojis from version 6 vanish from the menu. Partial resolution achieved: