Ionicでモバイルアプリを作ろう！(21)アイコンを表示する

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。

今回はアプリのUI上にアイコンを表示する方法を紹介します。

Ionicons

IonicにはIoniconsというアイコンライブラリがあらかじめ用意されており、シンプルながら便利なアイコンを簡単に使うことができます。Ioniconsには700以上のアイコンが用意されています。各デザインとその名前はこちらIoniconsから確認できます。

使い方

使い方は簡単でion-iconコンポーネントをテンプレートに記述し、そのname属性に上記リンク先のnameを指定すればOKです。

home.html...
<ion-content padding>
    <ion-icon name="logo-twitter"></ion-icon>
    <ion-icon name="logo-facebook"></ion-icon>
    <ion-icon name=">paper-plane"></ion-icon>
    <ion-icon name="headset"></ion-icon>
</ion-content>

home.html
1 2 3 4 5 6 7	`...` `<ion-content` `padding>` `<ion-icon` `name="logo-twitter"></ion-icon>` `<ion-icon` `name="logo-facebook"></ion-icon>` `<ion-icon` `name=">paper-plane"></ion-icon>` `<ion-icon` `name="headset"></ion-icon>` `</ion-content>`

home.scsspage-home {
    ion-icon {
        font-size: 50px;
        margin: 16px;
    }
}

home.scss
1 2 3 4 5 6	`page-home {` `ion-icon` `{` `font-size:` `50px;` `margin:` `16px;` `}` `}`

端末のOSに応じて自動的に各OSに適したデザインのアイコンを選択してくれます。

明示的な画像の指定

端末ごとに利用するアイコンを明示的に指定することも可能です。ion-iconコンポーネントには属性として、name以外にmd、iosが定義されており、それぞれにアイコンのnameを指定できます。Androidの場合はmd、iOSの場合はiosになります。
ちなみにmdというはMaterial Designの略ですね。