How to set block style for content of ion-item in ionic 4?

Question

I'm looking at a tutorial that is Ionic2 but I'm working on Ionic4 which is a little different, I want to make a page like this:

but my page created like this:

This is my Html code in Ionic4:

<ion-content padding>
 <h3 text-center>Select your favorite Qoute</h3>
  <ion-list *ngFor="let quoteGroup of qouteCollection">
    <ion-item detail>
      <ion-icon [name]="quoteGroup.icon"></ion-icon>
      <h3>{{ quoteGroup.category }}</h3>
      <p>{{ quoteGroup.quotes.length }} Qoutes</p>
    </ion-item>
  </ion-list>
</ion-content>

Answer 1

Just wrap the inner content of ion-item with ion-label . This should do it.

<ion-content padding>
 <h3 text-center>Select your favorite Qoute</h3>
  <ion-list *ngFor="let quoteGroup of qouteCollection">
    <ion-item detail>
      <ion-label>
        <ion-icon [name]="quoteGroup.icon"></ion-icon>
        <h3>{{ quoteGroup.category }}</h3>
        <p>{{ quoteGroup.quotes.length }} Qoutes</p>
      </ion-label>    
    </ion-item>
  </ion-list>
</ion-content>