概要

という方向けのTips。

Ionicのicon fontのみを用意してくれているioniconsがあり、これを利用すればIonicのアイコンも簡単に利用できます。今回は既存Angularプロジェクトに入れるパターンを想定。方法1はAngular以外でもそのまま転用できます。

環境

これはAngularの使用の有無に関係なく利用できる

タグ内に埋め込むだけの方法です。
Angularの場合は、index.htmlののタグ内に、以下のコードを埋め込めば導入できます。

<link rel="stylesheet”  href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

[参考] httpで取得したい場合は以下のURLで指定するhttp://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

angular-cliを利用している前提。

以下のコマンドでnpm install。

npm install ionicons@'2.0.1' --save

Angularプロジェクトの".angular-cli.json"のstylesのところに、"../node_modules/ionicons/scss/ionicons.scss"を追加

"styles": [
    ...,
    "../node_modules/ionicons/scss/ionicons.scss"
],

方法1もしくは方法2で導入が終わったら、導入が無事できているかを確認します。html側の追加やCSS側の追加などいくつか方法はありますが、今回はhtml側でclassを追加する方法で確かめます。

任意のcomponentのTemplateファイルで以下のコードを追加します。

<i class="ion-social-angular"></i>

追加した部分に、Angularのアイコンが表示されていれば導入は成功です。