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

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


What is the code to construct these buttons?

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

many thanks!

Wrap the <img in an <ion-thumbnail.

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

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

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

Hi, @sahyun1

Could you try ion-avatar

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

Hope this will solve your issue