23

How can make button and icon size bigger in fallowing code:

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-left></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-left></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-left></ion-icon>
      Cafe
    </button>
  </ion-list>
</ion-card>
RSA
  • 1,417
  • 4
  • 22
  • 37

5 Answers5

81

Icons

ion-icons are font icons so they can be edited the following Sass/CSS as they are essentially text:

    ion-icon {
        font-size: 20px; //Preferred size here
    }

Buttons

As for the button ionic has some inbuilt classes to affect size. For example:

   <button ion-button large>Large</button>

   <button ion-button>Default</button>

   <button ion-button small>Small</button>

You can also update the default Sass variable of $button-round-padding in your src/theme/variables.scss file, to the size that you would like. More on buttons can be found here

Deanmv
  • 1,191
  • 9
  • 13
12

In my Ionic 4 apps I adopted the following approach. In the *.scss file:

ion-icon { zoom: 1.5 }

Of course, zoom value depend on your needs.
Hope this help someone. o/

Nowdeen
  • 1,401
  • 14
  • 20
5

Even for Icon we can use large and small to the ion-icon tag. This is how I had used

<ion-icon name="arrow-forward" item-end small></ion-icon>

Prashant
  • 1,375
  • 2
  • 14
  • 22
4

To specify the icon size, you can use the size attribute for pre-defined font sizes. Example is given below:

<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>
dheeraj9499
  • 750
  • 6
  • 7
3

You can add this following code :

ion-icon {font-size: 3rem;}

Mohsen Gorzin
  • 186
  • 1
  • 10