# Ionic avatar

**URL:** <https://forum.ionicframework.com/t/ionic-avatar/28979>\
**Category:** ionic-v1\
**Created:** [July 22, 2015, 6:04pm UTC](https://forum.ionicframework.com/t/ionic-avatar/28979 "2015-07-22T18:04:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anmolarora](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@anmolarora](https://forum.ionicframework.com/u/anmolarora)\
**Post date:** [July 22, 2015, 6:04pm UTC](https://forum.ionicframework.com/t/ionic-avatar/28979/1 "2015-07-22T18:04:02Z")

</div>

I just read about ionic avatars and was trying to use it in my application. But for some list items with no image, I want to use the custom first letter avatar, similar to the one which we can see in popular gmail app.  
I have uploaded an image for reference. Someone please help me on this.

 ![image](https://global.discourse-cdn.com/ionicframework/original/2X/f/ffb36ea8d522f0b2fc22323a592a0e4f2377ef85.png)

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 22, 2015, 6:50pm UTC](https://forum.ionicframework.com/t/ionic-avatar/28979/2 "2015-07-22T18:50:33Z")

</div>

simple ngIf for your avater image?  
if there is an image --\> show image, if not build a circle with css3 and put the firstletter of the name in.

---

<div class="post-metadata">

**Author:** ![Duovili](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/duovili/32/132741_2.png) [@Duovili](https://forum.ionicframework.com/u/Duovili)\
**Post date:** [July 22, 2015, 7:33pm UTC](https://forum.ionicframework.com/t/ionic-avatar/28979/3 "2015-07-22T19:33:34Z")

</div>

I prefer to use ng show because there is and you can use angulars default value to set the image or class you need.

> <https://stackoverflow.com/questions/16523076/angular-template-default-value-if-binding-null-undefined-with-filter>

---

<div class="post-metadata">

**Author:** ![anmolarora](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@anmolarora](https://forum.ionicframework.com/u/anmolarora)\
**Post date:** [July 28, 2015, 5:24am UTC](https://forum.ionicframework.com/t/ionic-avatar/28979/4 "2015-07-28T05:24:51Z")

</div>

I got that implemented using ngIf.  
Thank you 🙂

---

<div class="post-metadata">

**Author:** ![uttesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uttesh/32/69468_2.png) [@uttesh](https://forum.ionicframework.com/u/uttesh)\
**Post date:** [September 28, 2015, 6:59pm UTC](https://forum.ionicframework.com/t/ionic-avatar/28979/5 "2015-09-28T18:59:16Z")

</div>

created a angularjs directive for the gmail like letter avatar for all letters,number and special character, provided the attributes to changes shape circle|square, borders,generate random colors.

this may help someone looking for the angular directive [http://uttesh.com/ionic-letteravatar/](http://uttesh.com/ionic-letteravatar/)

---

<div class="post-metadata">

**Author:** ![dheeran](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dheeran](https://forum.ionicframework.com/u/dheeran)\
**Post date:** [April 5, 2016, 7:05am UTC](https://forum.ionicframework.com/t/ionic-avatar/28979/6 "2016-04-05T07:05:54Z")

</div>

[https://github.com/dheeran1/ionic2-circle-text-avatar](https://github.com/dheeran1/ionic2-circle-text-avatar) this may help