How to add Twitter emoji to your Angular app with Twemoji

Emojis are a fun way to add a little life to any app you are building, but a problem you might encounter is that they look different on iOS, Android, Windows, and macOS.

Emoji’s are part of the Unicode Standard, and as of March 2020, there are 3,304 total, with more added on each release. Twitter has put together a fantastic free JavaScript library, Twemoji, which provides a standardized bundle of emoji in SVG and PNG formats.

Getting Started

Head over to Twemoji’s GitHub page and follow the usage instructions. For this example, I am adding the CDN link directly to my index.html file at the root of my angular project.

Creating the Angular Pipe

Using the Angular CLI, add a new pipe to your project and add the following code to it.

ng generate pipe Emoji

Using the Pipe

Lets break down what is happening here,

• Create a html element in which the emoji will be displayed
• Bind the [innerHtml] attribute to the Codepoint of the emoji you want to display, leaving out the proceeding “U+” as it is not needed.

To see a full list of emoji’s and their Codepoints take a look at https://emojipedia.org/twitter/.

• Add your newly created emoji pipe, which will generate a img within the innerHtml of your element

Putting it all together!

As part of building Noviggo, we are using emojis to represent the confidence one has in an idea as they are thinking about it. We are super excited with the results we have gotten after using Twemoji and look forward to leveraging them more for future projects.