How to display 2 ion-icons in the same line with a div surrounding one of the icons in Ionic 3

Hello, I would like to align my ion-icons to be on the same line, however, it keeps on displaying on the next line.

Here is what it looks like after I serve’d:

And here are my codes:

< ion-buttons end>
< div *ngIf=“chat.alert == true”>
< ion-icon name=“md-alert” item-end>
< /div>
< ion-icon name=“chatboxes” item-end>
< /ion-buttons>

The ngIf will make the md-alert icon optional depending on my conditions specified in the back end.

Please help!

I would use flexbox to do what you are asking in general, but would urge you to reconsider the entire idea, though. Users’ kinetic memory gets confused when UI elements move around physically, and you’re creating a situation where the position of those icons are going to change depending on what will likely appear to the user to be unpredictable conditions. I think a less surprising choice would be to always have both icons there, but conditionally disable one: <ion-button [disabled]="!chat.alert">.

Incidentally, both the == attribute and comparison against true are IMHO what could charitably be described as “subtly nuanced” in JavaScript, meaning that they are basically unwanted edge case gardens. I would recommend an implicit truthiness check (as above) or the strict equality comparison operator (===) against an actual value (i.e. not a special concept like true, false, null or undefined).