Angular8でFont AwesomeをAngular Materialに統合


# _Angular8でFont AwesomeをAngular Materialに統合_  

by **_Shuichi Ohtsu_** 


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_00.png" width= "640" >


ビデオ解説(日本語）
<https://youtu.be/EOm-kaKMm3U>

ビデオ解説(英語）
<https://youtu.be/R5p4qe--usE>

フルソース・コード
<https://github.com/Ohtsu/ng8-mat-font-awesome>

--------------------
## Angular MaterialにFont Awesomeを統合


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

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

以前、_Angular7でFont AwesomeをAngular Materialに統合_<https://qiita.com/SOhtsu/items/77ffb011833264d452a7>をご紹介いたしましたが、今回Angular8が公開されたため、同様の設定で試したところ、エラーが発生することがわかりました。

そこで今回は、Angular8におけるFont Awesomeの利用方法をご紹介いたします。


--------------------

## Angular8で新規プロジェクトを作成

まず、Angular8で新規プロジェクトを作成します。

ここでは、

`ng new ng8MatFontAwesome` と入力します。

`ng8MatFontAwesome`はプロジェクト名であり、その名前は任意です。

このプロセスには、若干時間を要します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_01.png" width= "640" >


## Visual Studio Codeの起動

次に作成されたプロジェクト・ディレクトリに移動した後、`code .`と入力して、Visual Studio Codeを開きます。


次に、Ctrl + '@'キーを押し、Visual Studio Code内でターミナル・ウインドウを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_03.png" width= "640" >

## Angular Materialのインストール

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


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

`ng add @angular/material`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_04.png" width= "640" >


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

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_font_awesome_00.png" width= "640" >


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

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_05.png" width= "640" >


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


## Font Awesomeのインストール

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

`npm i @fortawesome/fontawesome-free`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_06.png" width= "640" >


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

`fontawesome`

ではなく

`fortawesome`

です。


## angular.jsonにFont Awesomeをインポート

次に、プロジェクト・ルート・ディレクトリの中の`angular.json`ファイルを開き、インポート文を挿入します。

`"./node_modules/@fortawesome/fontawesome-free/css/all.min.css",`

を以下のように追加します。


```

 "projects": {
    "ng8MatFontAwesome": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng8MatFontAwesome",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/styles.scss"


``` 

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_09.png" width= "640" >



## ローカルサーバの起動の確認

ここで一旦ローカルサーバの起動を確認します。

ターミナル・ウィンドウで

`ng s -o`と入力します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_07.png" width= "640" >

ブラウザは自動的に開きます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_08.png" width= "640" >

ＯＫです。


## app.module.tsの修正

Angular Materialのボタンなどを利用するためには、Angular Materialのモジュールをインポートしておく必要があります。

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

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_10.png" width= "640" >


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_11.png" width= "640" >



## HTMLファイルの編集

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

`src/app`内の`app.component.html`ファイルを開きます。このファイルはデフォルトのトップページを定義しています。

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

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

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_12.png" width= "640" >




## Googleアイコンの表示

次にローカルサーバを起動し該当のページを表示してみます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_13.png" width= "640" >


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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_14.png" width= "640" >



## Twitterアイコンの表示

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


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

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

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_15.png" width= "640" >


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_16.png" width= "640" >


--------------------

ブラウザで確認します。

ＯＫです。

## Facebookアイコンの表示

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

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

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

そのＵＲＬは、

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

です。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_17.png" width= "640" >


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

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

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_18.png" width= "640" >


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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_19.png" width= "640" >


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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_20.png" width= "640" >


--------------------

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

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

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_21.png" width= "640" >



--------------------

次に表示色を変更します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_22.png" width= "640" >

ブラウザで確認します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_23.png" width= "640" >



## GitHubアイコンの表示

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

--------------------

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

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_24.png" width= "640" >


次に表示色を変更します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_25.png" width= "640" >


--------------------

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_26.png" width= "640" >


ＯＫです。

最後にデフォルト・ページの不要な表示部分をコメントアウトしておきます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_27.png" width= "640" >


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



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_MatFontAwesome_28.png" width= "640" >


ＯＫです。


## Source File


## 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/>