Multiple buttons with different size of icons. how to algn text?

Ionic Framework ionic-v3
1

image
Like in the picture, I have multiple buttons with different size of icons for menu.
what’s the best way to align text?

image

2

What is the code to construct these buttons?

3

just html of ion-list and buttons


<ion-list no-lines>
      <button text-uppercase detail-none menuClose ion-item>
        <img src="img/checklist" item-left>
             Diary- CheckLists
      </button>
    ...

many thanks!

4

Wrap the <img in an <ion-thumbnail.

<button ion-item>
    <ion-thumbnail item-start>
      <img src="img/thumbnail-totoro.png">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
  </button>
5

that’s an option but as one of my icon is wider than others, it doesn’t look right in thumbnail looks shrinked

6

Make them all the same size literally. Reshape to exact widths and heights.

7

Hi, @sahyun1

Could you try ion-avatar

<ion-item>
    <ion-avatar item-start>
      <img src="img/checklist">
    </ion-avatar>
    <h2> Diary- CheckLists</h2>
</ion-item>

Hope this will solve your issue

Thanks,