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>
< ion-icon name=“chatboxes” item-end>
The ngIf will make the md-alert icon optional depending on my conditions specified in the back end.
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:
Incidentally, both the
== attribute and comparison against
===) against an actual value (i.e. not a special concept like