<div
  class="d-inline-flex p-1 activity-type-badge"
  [ngClass]="{
    buy: activityType === 'BUY',
    dividend: activityType === 'DIVIDEND',
    fee: activityType === 'FEE',
    interest: activityType === 'INTEREST',
    item: activityType === 'ITEM',
    liability: activityType === 'LIABILITY',
    sell: activityType === 'SELL'
  }"
>
  <ion-icon
    *ngIf="activityType === 'BUY'"
    name="arrow-up-circle-outline"
  ></ion-icon>
  <ion-icon
    *ngIf="activityType === 'DIVIDEND' || activityType === 'INTEREST'"
    name="add-circle-outline"
  ></ion-icon>
  <ion-icon *ngIf="activityType === 'FEE'" name="hammer-outline"></ion-icon>
  <ion-icon *ngIf="activityType === 'ITEM'" name="cube-outline"></ion-icon>
  <ion-icon
    *ngIf="activityType === 'LIABILITY'"
    name="flame-outline"
  ></ion-icon>
  <ion-icon
    *ngIf="activityType === 'SELL'"
    name="arrow-down-circle-outline"
  ></ion-icon>
  <span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span>
</div>
