how to make icons and buttons bigger in ionic 2

Question

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>

Answer 1

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