Ionicフレームワークを使わずにIonicのアイコンのみAngularで使う

概要

• UIフレームワークのIonic(アイオニック)のフォントアイコンは魅力的
• でも今回はIonic Frameworkは使わずに、生のAngularフレームワークのみとかでIonicのフォントアイコンを使いたい、、、

という方向けのTips。

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

環境

• Angular2以上のお話(1系のAngularJSではない)
• Angularのバージョン 5.2.7 (Nodeのバージョン 6.11.4)

[方法1] CDNで持ってくる

これは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

[方法2] npmでインストール

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

手順1

以下のコマンドでnpm install。

npm install ionicons@'2.0.1' --save

手順2

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のアイコンが表示されていれば導入は成功です。

参考

ionicons

http://ionicons.com で、使いたいアイコンをクリックすると、Class名が出てくるので、それを上記のように、classに記述すればOK。