Need help with angular-emoji-filter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

126 Stars 37 Forks Other 39 Commits 11 Opened issues


An AngularJS filter for replacing emoji codes with emoticons

Services available


Need anything else?

Contributors list

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


To get the filter working with your Angular app just include the stylesheet and JavaScript, and inject the

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>

        <li ng-repeat="message in messages" ng-bind-html-unsafe="message | emoji">

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.