Angular7でFont AwesomeをAngular Materialに統合

by Shuichi Ohtsu

ビデオ解説(日本語）
https://youtu.be/DlMCjN2EL28

ビデオ解説(英語）
https://youtu.be/UmGWCHwdEgY

Angular MaterialにFont Awesomeを統合

以前、Angular5におけるFont Awesomeの利用方法https://youtu.be/ndk2Hqd8P7Iをご紹介いたしましたが、だいぶAngularの環境も変わりましたので、今回は、Angular7におけるFont Awesomeの利用方法をご紹介いたします。

Angularでは、Angular Materialを利用することが多いと思います。

しかしAngular Materialでは、_mat-icon_を利用することができますが、残念ながらその種類は多いとは言えません。そこで、Angular Materialを利用しつつ、Font Awesomeも利用する方法を考えます。

幸い、この方法については、小山純さんが、「Angular Material6でFont Awesomeを利用してアイコンを表示する」https://blog.tagbangers.co.jp/2018/09/05/font-awesome-angular-materialというタイトルでそのノウハウを公開されていらっしゃいますので、この方法に基づいて、導入することにします。

Angular Materialのインストール

まず、Angular7にAngular Materialをインストールします。

利用するプロジェクト・ディレクトリに移動した後、code .と入力して、Visual Studio Codeを開きます。

そしてターミナル・ウィンドウで、

ng add @angular/material

と入力します。
すると、組み込みのテーマの選択が求められますので、ここではデフォルトの_indigo-pink_を選択しておきます。

次に_HammerJS_をインストールするか否かの問いでは、Yesを選択します。

次に、アニメーションを利用するか否かでも、Yesを選択します。

するとインストールが開始されます。

Font Awesomeのインストール

次に、Font Awesomeをnpmでインストールします。

npm i @fortawesome/fontawesome-free

と入力します。

スペルに注意してください。@の次の文字は、

fontawesome

ではなく

fortawesome

です。

style.scssにFont Awesomeをインポート

次に、srcディレクトリの中のstyle.scssファイルを開き、インポート文を挿入します。

@import "~@fortawesome/fontawesome-free/css/all.css";

と入力します。

HTMLファイルの編集

次に、HTMLファイルの編集を行います。

ここでは、ログイン用のページを編集していくことにします。

まず、mat-buttonでボタンの設定を行います。そして、この中にFont Awesomeのアイコンを挿入します。

その方法は、_mat-icon_の設定の中に、Font Awesomeの_fontset_と_fontIcon_を設定するだけです。

ここではGoogleのアイコンを設定しました。

app.module.tsの修正

このままで表示したいところですが、その前にAngular Materialのモジュールをインポートしておく必要があります。

app.module.tsファイルを開き、ここで利用するMatIconModuleとMatButtonModuleをインポートします。

Googleアイコンの表示

次にブラウザで該当のページを表示してみます。

Googleのアイコンが表示されています。

Twitterアイコンの表示

次に、Twitterのアイコンを表示してみます。

その前に、そのアイコンのフォントセットとアイコン名を確認しておく必要があります。

まず、Font Awesomeのサイトを開きます。

そのＵＲＬは、

https://fontawesome.com/icons?d=gallery

です。

この検索ボックスで、Twitterと入力します。

この検索結果のアイコンから利用したいアイコンを選び、クリックします。

するとHTML文が表示されますので、その部分をクリックし、クリップボードにコピーします。

VS Codeに戻り、再びHTMLを編集していきます。

Googleのものをコピーして、Twitter用に変更します。

確認したフォントアイコン名に変更します。

ブラウザで確認します。

ＯＫです。

Facebookアイコンの表示

同様にFacebookのアイコンを表示します。

Font AwesomeのサイトでFacebookで検索してみます。

目的のアイコンを選択し、アイコン名をクリップボードにコピーします。

VS Codeに戻り、再びHTMLを編集していきます。

Twitter用のものをコピーして、Facebook用に変更します。

ブラウザで確認すると、色がTwitterと同色になってしまったので、これを変更します。

色を_primary_から_warn_に変更します。

GitHubアイコンの表示

同様にGitHubのアイコンを表示します。

Font AwesomeのサイトでGitHubで検索してみます。

目的のアイコンを選択し、アイコン名をクリップボードにコピーします。

VS Codeに戻り、再びHTMLを編集していきます。

Facebook用のものをコピーして、GitHub用に変更します。

ブラウザで確認してみます。

ＯＫです。

Source File

sign-in.html

<p>
  sign-in works!
</p>

<button (click)= "loginWithGoogle()" mat-raised-button color="accent">
  <mat-icon fontSet="fab" fontIcon="fa-google" inline></mat-icon>
  Google
</button>

<button (click)= "loginWithTwitter()" mat-raised-button color="primary">
  <mat-icon fontSet="fab" fontIcon="fa-twitter" inline></mat-icon>
  Twitter
</button>


<button (click)= "loginWithFacebook()" mat-raised-button color="warn">
  <mat-icon fontSet="fab" fontIcon="fa-facebook-f" inline></mat-icon>
  Facebook
</button>


<button (click)= "loginWithGithub()" mat-raised-button color="link">
  <mat-icon fontSet="fab" fontIcon="fa-github" inline></mat-icon>
  Github
</button>

Reference

"Angular Material6でFont Awesomeを利用してアイコンを表示する",
https://blog.tagbangers.co.jp/2018/09/05/font-awesome-angular-material
"Angular5, Angular6, Angular7 Custom Library: Step-by-step guide",
https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
"Angular5, Angular6, Angular7用カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド",
https://www.udemy.com/angular5-l/