feat(icons): migrate to font awesome 5

package.json

@@ -33,12 +33,12 @@
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "6.0.0",
     "@angular/router": "6.0.0",
+    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
     "@ngrx/effects": "^6.0.0-beta.1",
     "@ngrx/store": "^6.0.0-beta.1",
     "bootstrap": "^4.0.0",
     "browser-detect": "^0.2.27",
     "core-js": "^2.4.1",
-    "font-awesome": "^4.7.0",
     "rxjs": "^6.0.0",
     "uuid": "^3.1.0",
     "web-animations-js": "^2.2.5",

src/app/app.component.html

@@ -66,9 +66,8 @@
            class="link d-none d-sm-inline"
            href="https://github.com/tomastrajan/angular-ngrx-material-starter"
            target="_blank">
-          <i class="fa fa-github fa-2x"></i>
+          <i class="fab fa-github fa-2x"></i>
         </a>
-
       </mat-toolbar>
     </div>
 
@@ -81,28 +80,28 @@
       <div class="row">
         <div class="col-sm-12 links">
           <a href="https://www.github.com/tomastrajan" target="_blank">
-            <i class="fa fa-github fa-2x" aria-hidden="true"></i>
+            <i class="fab fa-fw fa-github fa-2x" aria-hidden="true"></i>
             <span>Github</span>
           </a>
           <a href="https://www.medium.com/@tomastrajan" target="_blank">
-            <i class="fa fa-medium fa-2x" aria-hidden="true"></i>
+            <i class="fab fa-fw fa-medium-m fa-2x" aria-hidden="true"></i>
             <span>Medium</span>
           </a>
           <a href="https://www.twitter.com/tomastrajan" target="_blank">
-            <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
+            <i class="fab fa-fw fa-twitter fa-2x" aria-hidden="true"></i>
             <span>Twitter</span>
           </a>
           <a href="https://www.youtube.com/channel/UC7XgRHIVoqnh3U5Vmly9ofQ"
              target="_blank">
-            <i class="fa fa-youtube fa-2x" aria-hidden="true"></i>
+            <i class="fab fa-fw fa-youtube fa-2x" aria-hidden="true"></i>
             <span>Youtube</span>
           </a>
           <a href="https://www.instagram.com/tomastrajan" target="_blank">
-            <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
+            <i class="fab fa-fw fa-instagram fa-2x" aria-hidden="true"></i>
             <span>Instagram</span>
           </a>
           <a href="https://www.slides.com/tomastrajan" target="_blank">
-            <i class="fa fa-desktop fa-2x" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-play-circle fa-2x" aria-hidden="true"></i>
             <span>Slides</span>
           </a>
         </div>
@@ -114,7 +113,8 @@
           <a matTooltip="Show changelog"
              matTooltipPosition="before"
              href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CHANGELOG.md">
-            <i class="fa fa-rocket"></i> {{version}} <span *ngIf="!isProd">[{{envName}}]</span>
+            <i class="fas fa-rocket"></i> {{version}} <span
+            *ngIf="!isProd">[{{envName}}]</span>
           </a>
         </div>
       </div>

src/app/app.component.scss

@@ -91,7 +91,7 @@ mat-sidenav-container {
           a {
             transition: padding 0.5s;
             display: inline-block;
-            padding: 20px 5px;
+            padding: 20px 0;
 
             &:hover {
               text-decoration: none;
@@ -100,14 +100,20 @@ mat-sidenav-container {
             span {
               display: inline-block;
               width: 75px;
-              padding: 0 0 0 5px;
+              padding: 0 0 0 3px;
               overflow: hidden;
               text-align: left;
               white-space: nowrap;
               transition: width 0.5s;
             }
           }
 
+          @media (min-width: map-get($grid-breakpoints, lg)) {
+            a {
+              padding: 20px 10px;
+            }
+          }
+
           @media (max-width: map-get($grid-breakpoints, md)) {
             a {
               padding: 20px;

src/app/examples/stock-market/stock-market.component.html

@@ -25,14 +25,14 @@ <h1 class="main-heading">Stock Market</h1>
         <mat-card-subtitle>
           {{stocks.stock.exchange}}
           <span [ngClass]="{ negative: stocks.stock.changeNegative }">
-            <i class="fa fa-caret-up" *ngIf="stocks.stock.changePositive"></i>
-            <i class="fa fa-caret-down" *ngIf="stocks.stock.changeNegative"></i>
+            <i class="fas fa-caret-up" *ngIf="stocks.stock.changePositive"></i>
+            <i class="fas fa-caret-down" *ngIf="stocks.stock.changeNegative"></i>
             {{stocks.stock.change}} ({{stocks.stock.changePercent}})
           </span>
         </mat-card-subtitle>
       </mat-card>
       <p *ngIf="stocks.error" class="error">
-        <i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br><br>
+        <i class="fas fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br><br>
         <span>Stock <span class="symbol">{{stocks.symbol}}</span> not found</span>
       </p>
       <br>

src/app/static/about/about.component.html

@@ -13,7 +13,7 @@ <h1>Angular ngRx Material Starter</h1>
         </a>
         <a mat-raised-button class="actions-main" color="warn" routerLink="../settings"
            [ngClass]="routeAnimationsElements">
-          <i class="fa fa-gear"></i> Change Theme
+          <i class="fas fa-gear"></i> Change Theme
         </a>
         <br>
         <span [ngClass]="routeAnimationsElements">or check blogs about</span>
@@ -22,25 +22,25 @@ <h1>Angular ngRx Material Starter</h1>
            [ngClass]="routeAnimationsElements"
            target="_blank"
            href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1">
-          <i class="fa fa-medium"></i> Material Theming
+          <i class="fab fa-medium-m"></i> Material Theming
         </a>
         <a mat-raised-button
            [ngClass]="routeAnimationsElements"
            target="_blank"
            href="https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81">
-          <i class="fa fa-medium"></i> Angular Cli Tips
+          <i class="fab fa-medium-m"></i> Angular Cli Tips
         </a>
         <a mat-raised-button
            [ngClass]="routeAnimationsElements"
            target="_blank"
            href="https://medium.com/@tomastrajan/object-assign-vs-object-spread-in-angular-ngrx-reducers-3d62ecb4a4b0">
-          <i class="fa fa-medium"></i> Ngrx Typescript Tips
+          <i class="fab fa-medium-m"></i> Ngrx Typescript Tips
         </a>
         <a mat-raised-button
            [ngClass]="routeAnimationsElements"
            target="_blank"
            href="https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554">
-          <i class="fa fa-medium"></i> App Loading Style
+          <i class="fab fa-medium-m"></i> App Loading Style
         </a>
       </div>
       <div class="get-started" [ngClass]="routeAnimationsElements">

src/app/static/features/features.component.html

@@ -13,10 +13,10 @@ <h1 class="main-heading">Features</h1>
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://angular.io/docs/ts/latest/" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
           <a mat-button href="https://github.com/angular/angular" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
         </mat-card-actions>
       </mat-card>
@@ -29,10 +29,10 @@ <h1 class="main-heading">Features</h1>
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://material.angular.io/" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
           <a mat-button href="https://github.com/angular/material2/" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
         </mat-card-actions>
       </mat-card>
@@ -45,10 +45,10 @@ <h1 class="main-heading">Features</h1>
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://github.com/angular/angular-cli/wiki/generate" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
           <a mat-button href="https://github.com/angular/angular-cli" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
         </mat-card-actions>
       </mat-card>
@@ -61,10 +61,10 @@ <h1 class="main-heading">Features</h1>
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://github.com/ngrx/platform" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
           <a mat-button href="https://github.com/ngrx/effects/blob/master/docs/testing.md" target="_blank">
-            <i class="fa fa-code fa-lg"></i> Testing
+            <i class="fas fa-code fa-lg"></i> Testing
           </a>
         </mat-card-actions>
       </mat-card>
@@ -77,10 +77,10 @@ <h1 class="main-heading">Features</h1>
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="http://reactivex.io/rxjs/" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
           <a mat-button href="https://github.com/ReactiveX/RxJS" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
         </mat-card-actions>
       </mat-card>
@@ -93,10 +93,10 @@ <h1 class="main-heading">Features</h1>
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://v4-alpha.getbootstrap.com/layout/grid/" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
           <a mat-button href="https://github.com/twbs/bootstrap" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
         </mat-card-actions>
       </mat-card>
@@ -107,10 +107,10 @@ <h1 class="main-heading">Features</h1>
         <mat-card-subtitle>Superior developer experience, code completion, refactoring and less bugs</mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://github.com/Microsoft/TypeScript" target="_blank">
-            <i class="fa fa-github fa-lg"></i> Github
+            <i class="fab fa-github fa-lg"></i> Github
           </a>
           <a mat-button href="https://www.typescriptlang.org/docs/home.html" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
         </mat-card-actions>
       </mat-card>
@@ -121,10 +121,10 @@ <h1 class="main-heading">Features</h1>
         <mat-card-subtitle>Flexible theming support for provided and custom components</mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://material.angular.io/guide/theming" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
           <a mat-button href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1" target="_blank">
-            <i class="fa fa-medium fa-lg"></i> Blog
+            <i class="fab fa-medium-m fa-lg"></i> Blog
           </a>
         </mat-card-actions>
       </mat-card>
@@ -135,7 +135,7 @@ <h1 class="main-heading">Features</h1>
         <mat-card-subtitle>Faster startup time with lazy loaded feature modules</mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://angular.io/docs/ts/latest/guide/router.html#!#lazy-loading-route-config" target="_blank">
-            <i class="fa fa-book fa-lg"></i> Docs
+            <i class="fas fa-book fa-lg"></i> Docs
           </a>
         </mat-card-actions>
       </mat-card>

src/styles-variables.scss

@@ -1,6 +1,6 @@
 $toolbar-breakpoint: 600px;
 
-$fa-font-path: '../node_modules/font-awesome/fonts';
+$fa-font-path: '../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts';
 
 $link-hover-decoration: none;
 

src/styles.scss

@@ -2,8 +2,9 @@
 
 @import '../node_modules/bootstrap/scss/bootstrap-reboot';
 @import '../node_modules/bootstrap/scss/bootstrap-grid';
-
-@import '../node_modules/font-awesome/scss/font-awesome';
+@import '../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
+@import '../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid';
+@import '../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-brands';
 
 @import 'styles-reset';