Ion-item with floating icon


Im trying to create a ion item with an icon floating to the left of item as shown in this picture. (The orange exclamation mark icon).


Code right now (ignore special css):

<ion-list class="ion-list-attetion" [hidden]="array.length == 0" style="padding-left:16px;padding-right:16px;">
    <ion-item-sliding class="margin-bottom" *ngFor="let o of array">
      <ion-item no-lines class="bottom-border" (click)="triggerModal(o.ID)">
        <ion-grid no-padding>
              <h6 text-uppercase color="danger">
                <ion-icon name="alert" color="danger"></ion-icon> {{ o.OrderStateString | translate }}
            <ion-col text-right>
              <span ion-text>#{{ o.OrderNumber }}</span>
              <h2>{{ o.Description }}</h2>
          <p>{{ o.CustomerName }}</p>
          <br />
          <small>{{ o.DeliveryAddress }}</small>
            <ion-col col-1>
                <ion-icon name="locate"></ion-icon> {{ o.OrderLocations.length }}
            <!--<ion-col col-1>
        <small><ion-icon name="pin"></ion-icon>---<ion-icon name="pin"></ion-icon> 10,1 km</small>
      <!--<ion-item-options side="right">
        <button ion-button color="danger">{{ 'Delete' | translate }}</button>

Any help appreciated. If possible i would like to stick with using list --> item --> grid with rows and colums.

You can use Ionic Badge


Thanks for reply. Not sure how i would create the red floating icon on the left hand side of item (and a bit outside) with a badge tough.