Ion-item with floating icon

Ionic Framework ionic-v3
1

Hello.

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).

image

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>
          <ion-row>
            <ion-col>
              <h6 text-uppercase color="danger">
                <ion-icon name="alert" color="danger"></ion-icon> {{ o.OrderStateString | translate }}
              </h6>
            </ion-col>
            <ion-col text-right>
              <span ion-text>#{{ o.OrderNumber }}</span>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <h2>{{ o.Description }}</h2>
            </ion-col>
          </ion-row>
          <p>{{ o.CustomerName }}</p>
          <br />
          <small>{{ o.DeliveryAddress }}</small>
          <ion-row>
            <ion-col col-1>
              <small>
                <ion-icon name="locate"></ion-icon> {{ o.OrderLocations.length }}
              </small>
            </ion-col>
            <!--<ion-col col-1>
        <small><ion-icon name="pin"></ion-icon>---<ion-icon name="pin"></ion-icon> 10,1 km</small>
      </ion-col>-->
          </ion-row>
        </ion-grid>
      </ion-item>
      <!--<ion-item-options side="right">
        <button ion-button color="danger">{{ 'Delete' | translate }}</button>
      </ion-item-options>-->
    </ion-item-sliding>
  </ion-list>

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

2

You can use Ionic Badge

Ion-badge

3

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.