Как сделать иконки и кнопки больше в ионных 2

Как сделать размер button и icon больше в паспорте:

<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>

Ответ 1

Значки

ion-icon являются значками шрифтов, поэтому они могут быть отредактированы следующим Sass/CSS, поскольку они по существу являются текстовыми:

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

Кнопки

Что касается ионного элемента button, то некоторые встроенные классы влияют на размер. Например:

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

   <button ion-button>Default</button>

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

Вы также можете обновить переменную Sass по умолчанию $button-round-padding в вашем файле src/theme/variables.scss до размера, который вы хотите. Подробнее о кнопках можно найти здесь

Ответ 2

Даже для Icon мы можем использовать большие и маленькие теги ion-icon. Вот как я использовал

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

Ответ 3

В моих приложениях Ionic 4 я принял следующий подход. В файле *.scss:

ion-icon { zoom: 1.5 }

Конечно, значение масштабирования зависит от ваших потребностей.
Надеюсь, это поможет кому-то. о /