Resize Ionicon

Ionic Framework ionic-v3
1

How do I resize an Ionicon to take up the full size of an ion-thumbnail container?

Code:

<ion-thumbnail item-start>
  <ion-icon name="image"></ion-icon>
</ion-thumbnail>

Screenshot (I drew the red lines…) :
Screenshot

2

Hi there, remember that IONIC icons are just FONT, so you could do something like:

::HTML::

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-thumbnail item-start>
    <ion-icon name="image" class="larger"></ion-icon>
  </ion-thumbnail>
</ion-content>

::SCSS::

page-home {
    .larger {
        font-size: 100px;
    }
}

Hope it helps have a nice day!!

2 Likes
3

Have to create some SASS logic to keep the font-size responsive, but I guess this IS the only way to go. Thanks!

4

I’m glad it helped, maybe you could do some logic on your .ts, read more about

NgStyle!

Good Luck.