How to ion-option-button with text under/below icon?


Have looked and looked and can’t seem to find any previous examples or tips where you can create a list with an option-button and have the icon appear above the text (the text being under/below the icon) in a similar way to the image here.

Just look at the tabs. The tabs have exactly what you want.

Mmmm, my tabs don’t have those classes. I’m using 1.2 of the framework and even when looking at that versions Tabs, the styles aren’t obvious to me what I need to do - adding the tab-title style didn’t work but I didn’t think it would given it would need to be part of the tab item style hierarchy.

Any other ideas or am I looking at some serious custom CSS work ???

Try overriding CSS style, display ion-option-button as inline-block rather than inline-flex.

    <ion-option-button style="display: inline-block !important; font-size: 14px; line-height: 10px; padding: 5px;">
      <i class="icon ion-ios-trash-outline" style="display: block !important;"></i>