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

Ionic Framework ionic-v3
1

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)

2

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

Rgds
Tom

3

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

1 Like
4

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”.

5

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.

6

Here it is what I was looking for:

Yeaaaaahhhh! :rofl: