List item with round icon - first character of subject mail, like Gmail App

I have a page, with a list containing all messages of the user and admin.
Each ion-item has an icon in the left side, with a standard envelop icon image.
It would be great to create an icon with the first character of the first word in the subject of the message.
How can I do it?
(Ionic 3)

You could investigate how its done on this forum or gmail by inspecting the html: right button select in chrome, et voila!

Rgds
Tom

You can do this with a custom SCSS class. Or, try this ready made component https://github.com/Airblader/ionic-text-avatar

1 Like

It’s true! And it’s always my first option before a forum question.
I saw a lot of different options (some of them more easy and other more complicated), but the dinamic capital avatar seems more complex. That’s why my question for some “light”.

Thank you pliablepixels. What a fantastic help! I can see that ionic-text-avatar has a pre-defined, by the developer, wich character to present to the user. I’ll search how can i do it dinamically according to the subject.

Here it is what I was looking for:

Yeaaaaahhhh! :rofl:

1 Like