Demo: Ionic Framework List Icon and Badge

posted in: Uncategorized | 5

A request on the Ionic Forum came in asking if you could have a badge on an icon in a list. Ionic’s Tab directive allows for a badge to be added on an icon. When we are talking about a badge, we’re talking about the little number in a circle usually on the top right corner of an icon. It is usually used to signify an alert or notification.

So, to accomplish this with a list with icons to the left, we can reuse some of Ionic’s CSS with one minor change. First, let’s set up our HTML for each item.

<ion-item class="item-icon-right">
   text here
   <i class="icon ion-ios7-telephone-outline"><span class="badge badge-assertive icon-badge">2</span></i>

Here, we have text on a list item with an icon to the right of the list item and a badge on the icon. We’ve also created a new class (icon-badge) that we will need to define in our CSS.

.item .icon .icon-badge {
  position: absolute;
  top: 3px;
  right: 0px;
  font-size: 8px;

And that’s it! Feel free to see my demo on CodePen.

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

5 Responses

  1. José Matos

    Dear Andrew,

    I want to use a badge to show a value that I store locally using window.localStorage (so I can use it and update it on different views). I see the badge on 3 views. When I first load a view, the value of the badge is correct. How can I update the badge of the 3 views (without disabling cache for the views) ?

    Best regards

  2. Thanks for your help!

  3. hi mr McGivery i have a badge, bind to a database(in the future to a web service) list…example: there are 6 data on db and i want to show them in the badge number in the side menu…so it work with this code


    and it is update if i delete or archive the files, but when i’m the the detail or archive of the single data file the badge is auto-set to 0…and when i go back to the list view(datiDatabase) the badge is set with the right number. What is the right way to live update the badge in every view????
    Thanks in advance.

    • This really depends on where you are getting the value and setting it to scope. If you are going it in your list controller, then it won’t be available in your detail controller and vise versa. It will only be available to both if you make the call in both controllers or make the call in an abstract state that both states share.

Leave a Reply