Ionic4 align label in list/item with and without icon

Ionic Framework
1

We have a simple ion-list with ion-item as a button

             <ion-list>
                <ion-item *ngFor="let profile of profiles" button>
                    <ion-icon name="checkmark" *ngIf="show"></ion-icon>
                    <ion-label>{{profile.width}}x{{profile.height}} {{profile.frameRate}}fps</ion-label>
                </ion-item>
           </ion-list>

which looks like this
image

As you can see the the labels in the item are not aligned using and not using an icon.
We can add an ion-icon without name, but this is showing an error in the console, so is there no way to align a list item with and without icon

2

Since the ion-icon element is not added, Ionic won’t account for it.

My suggestion. Create a none.svg like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"></svg>

Save it in your assets. Also copy in the checkmark icon there as well.

Instead of using the name attribute on the icon, use the src and point to the proper icon; checkmark or none. This should resolve your alignment troubles.

You also should include the slot attribute and set it to start. Look at the lines options as well.

3

Why not use a ion-checkbox?

4

Sorry for my late response!!
Thx, your solutions is great :slight_smile: simple and great!

5

What we are trying to do is a video player looking like youtube on chossing quality, this is from youtube
image

You can not reach this with checkbox, because a non selected checkbox is always visible, in this situation you have to display: none the checkbox, but teoretically we can this do also with our ion-icon

So we prefer using a empty icon or set invisible the checked ion-icon