How to add Twitter emoji to your Angular app with Twemoji

Jon Gorin
Jon Gorin
  •  
February 1, 2021

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.

Interested in learning more?

Get a live 1:1 demo and your questions answered with one of our specialists.
Request a Demo
Noviggo founders

Our Mission

We want to reimagine how teams collaborate and learn together to help bring new ideas to life. Noviggo was born to help us share our collective knowledge and experiences from over 25 years of planning, building, and delivering innovative technology projects.
Explore our story
Noviggo logo
noviggo
Noviggo's collaborative learning tool empowers educators and leaders to manifest change within their organizations and bring new ideas to life. Our tool engages groups synchronously and asynchronously for each program, encourages continuous teamwork, and humanizes the entire process.
Made with
in Massachusetts
© Noviggo LLC. 2021 All Rights Reserved
cross