Ionicには最初からフラットなデザインのアイコンが多数装備されています。

Ionicons: The premium icon font for Ionic Framework

Fontawesomeが定番だと思いますが、Ioniconsでも充分でしょう。７００個もありますから普通に使う分には該当するものが見つかると思います。

がこれを使おうとしてちょっとハマりました。上記のサイトでアイコンにマウスオーバーするとアイコンのコードのようなものが現れるのですが、これをタグの中で指定してもアイコンが表示されません。

 

いろいろ試行錯誤したところ、下記のページの名称で指定すれば表示されることが確認できました。

Ionic 2 | Ionicons – Ionic 2 Developer Preview – Ionic Framework

つまり

<ion-icon name="ion-plus-round"></ion-icon>

ではなく、

<ion-icon name="add"></ion-icon>

です。

 

納得したらすぐにシェア！