How to make ion-avatar bigger (double)?

I have an Ionic React app and I want to show the avatar at double size sometimes.

It seems to be around 36px by default. The documentation says

If placed inside of an ion-chip or ion-item , the avatar will resize to fit the parent component.

So I tried this in a React component:

    return (
      <IonItem className="giant">
        <IonAvatar className="center-img">

With the following CSS:

ion-item.giant {
   --min-height: 144px;

This doesn’t work. ion-item has a height of 144px, but instead of expanding to fit the ion-item size, the avatar stays at a size of 40x40.


What is the right way to increase the size of the avatar? Ideally, I would like to be able to specify a height and have the avatar resize to that height.