Ionic-framework: bug: item sliding options are not applying layout properly

[brandyscarney]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
Slotted items in an item option are not styling properly.

Expected behavior:
If the slot is top or bottom the item should be on top of or below the label

Steps to reproduce:
See the following Codepen, open the "top" and "bottom" layout items: https://codepen.io/brandyscarney/pen/VRWLOd?editors=1000

Related code:

Example of one that doesn't work:

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        Sliding Item, Icons Bottom
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
        <ion-icon slot="bottom" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
        <ion-icon slot="bottom" name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

Ionic info:

master

[7freaks-otte]

I was struggling with the same, slot="icon-only" to get bigger icons, but the text was to its right in the same big font-size. My workaround until this is fixed is wrapping with a div and a span:

<ion-item-option color="danger" (click)="delete(item)">
    <div slot="icon-only">
        <ion-icon name="trash"></ion-icon>
        <span>Delete</span>
    </div>
</ion-item-option>

and adding the following CSS:

ion-item-option div[slot="icon-only"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
        font-size: 14px;
    }
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.