Style slot size

Ionic Framework
1

I have a <ion-list> with a number of <ion-item> entries. Each is of this structure:

<ion-item text-wrap (click)="itemTapped($event, item.uuid)">
  <ion-thumbnail slot="start" class="tile-thumbnail">
    <img src="{{item.imageUrl}}" class="tile-image" />
  </ion-thumbnail>
  <ion-label>
    <h2 class="tile-title">{{item.title}}</h2>
    <p class="tile-text" [innerHTML]="item.text"></p>
  </ion-label>
</ion-item>

The thumbnail is created on the left due to slot="start" with a size of 56px. I want to change the size to 100px, but I don’t know how. When I inspect the DOM I see a styling

::slotted(ion-thumbnail) {
    width: 56px;
    height: 56px;
}

When I change these values in the dev tools it has the effect that I want to achieve. But I cannot get it working from the CSS. I also tried

ion-thumbnail {
  --size: 100px;
}

but no effect either. How can I change the size of the slot/thumbnail?

1 Like
2

To change ion-thumbnail size
scss is like this
ion-thumbnail
{
width:100px;
height:100px;
img
{
width:auto !important;
height:auto !important;
}
}

4 Likes
3

Yes, this --size property doesn’t seem to work. I managed to apply the style using the below code. I think using /deep/ is not recommended but there is no other alternative.

:host /deep/ ion-thumbnail {
   --size: 25px;
}