An AngularJS filter for replacing emoji codes with emoticons


Module License: MIT

Added by: Sam Deering





Stars: 105

Watchers: 105

Forks: 37



Module Description

AngularJS Emoji Filter

An AngularJS filter for replacing emoji codes with actual emoticons


The filter is available in a default form on Bower (you will need Bower 0.9 or greater). By default, each emoji is 21x21 pixels. You can install it the usual way:

bower install angular-emoji-filter

To customise the emoji dimensions, you will need to fork the repository and change the Gruntfile appropriately (if you haven't used Grunt before, I suggest reading the quick start guide on their website):

   // ...
   montage: {
        "21x21": {
            // ...
            options: {
                size: 21,                         // Width/height of each icon
                prefix: ".emoji",                 // Base CSS selector
                outputImage: "emoji.png",         // File name of sprite sheet
                outputStylesheet: "emoji.css",    // File name of stylesheet
                baseRules: {                      // CSS properties added to the base rule
                    "text-indent": "-9999px",
                    display: "inline-block"
                magick: {                         // ImageMagick options
                    background: "none",
                    depth: 7

We are using the Grunt Montage plugin to generate the sprite sheet. Check the readme of the plugin for full configuration details. Once you have customised the Gruntfile, you can build production-ready assets by running the default Grunt task. This will generate the necessary files in the dist directory.

To get the filter working with your Angular app just include the stylesheet and JavaScript, and inject the emoji module into your app as shown in the example below.


Use it just like any Angular filter. Here's some very simple example markup:

        <meta charset="utf-8">
        <link rel="stylesheet" href="emoji.min.css">
        <script src="angular.min.js"></script>
        <script src="emoji.min.js"></script>
    <body ng-app="app" ng-controller="AppCtrl">
            <li ng-repeat="message in messages" ng-bind-html-unsafe="message | emoji"></li>

And the associated example Angular app:

angular.module("app", ["emoji"]).controller("AppCtrl", function ($scope) {
    $scope.messages = [
        "Animals: :dog: :cat: :snake:",
        "People: :smile: :confused: :angry:",
        "Places: :house: :school: :hotel:"


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Licensing and Attribution

The AngularJS Emoji filter is released under the MIT license as detailed in the LICENSE file that should be distributed with this library; the source code is freely available.

The filter was developed by James Allardice during work on White Label Dating, while employed by Global Personals Ltd. Global Personals Ltd have kindly agreed to the extraction and release of this software under the license terms above.

Module stats last updated: 2017-02-18 16:00:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!