ionic 2でアイコンやボタンを大きくする方法

以下のコードで、ボタンとアイコンのサイズを大きくするにはどうすればよいでしょうか：

<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>
プログラミング
icons cordova ionic2 typescript
8日 4月 2017 в 8:55
まだビューはありません
ソリューション

アイコン

ion-iconはフォントアイコンなので、Sass/CSSで編集できます：

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

ボタン

ボタン`については、ionicにはサイズに影響を与えるクラスがいくつか組み込まれています。 例えば

   Large

   Default

   Small

また、src/theme/variables.scssファイルにあるデフォルトのSass変数 $button-round-padding を更新して、希望のサイズにすることもできます。 ボタンの詳細についてはこちらを参照してください。

解説 (0)

アイコンでも、ion-iconタグに大小をつけることができる。このように

ion-icon name="arrow-forward" item-end small>` です。

解説 (0)

私のIonic 4アプリでは、以下のアプローチを採用した。scssファイルに

ion-icon { zoom: 1.5 }

もちろん、ズーム値はニーズによって異なります。
どなたかのお役に立てれば幸いです。

解説 (1)