feat(icons): standardize icon usage with mat-icon component and font …

…awesome icon set - remove google material icons dependency - fix favicon to use new logo
tomastrajan · Jun 8, 2018 · 26b0cf2 · 26b0cf2
1 parent 983e532
commit 26b0cf2
Show file tree

Hide file tree

Showing 23 changed files with 154 additions and 109 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -20,7 +20,7 @@
     <div class="toolbar">
       <mat-toolbar color="primary">
         <button mat-icon-button class="d-md-none" (click)="sidenav.open()">
-          <mat-icon>menu</mat-icon>
+          <mat-icon fontSet="fas" fontIcon="fa-bars"></mat-icon>
         </button>
 
         <span routerLink="" class="branding spacer center d-inline d-sm-none">
@@ -47,17 +47,17 @@
         <button *ngIf="isAuthenticated"
                 mat-icon-button
                 [matMenuTriggerFor]="toolbarUserMenu">
-          <mat-icon>person</mat-icon>
+          <mat-icon fontSet="fas" fontIcon="fa-user-circle"></mat-icon>
         </button>
         <mat-menu #toolbarUserMenu="matMenu">
           <button mat-menu-item (click)="onLogoutClick()">
-            <mat-icon>power_settings_new</mat-icon>
+            <mat-icon fontSet="fas" fontIcon="fa-power-off"></mat-icon>
             <span>Logout</span>
           </button>
         </mat-menu>
 
         <button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
-          <mat-icon>settings</mat-icon>
+          <mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
         </button>
 
         <a matTooltip="Project Github Repository"
@@ -66,7 +66,7 @@
            class="link d-none d-sm-inline"
            href="https://github.com/tomastrajan/angular-ngrx-material-starter"
            target="_blank">
-          <i class="fab fa-github fa-2x"></i>
+          <mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
         </a>
       </mat-toolbar>
     </div>
@@ -80,28 +80,28 @@
       <div class="row">
         <div class="col-sm-12 links">
           <a href="https://www.github.com/tomastrajan" target="_blank">
-            <i class="fab fa-fw fa-github fa-2x" aria-hidden="true"></i>
+            <mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
             <span>Github</span>
           </a>
           <a href="https://www.medium.com/@tomastrajan" target="_blank">
-            <i class="fab fa-fw fa-medium-m fa-2x" aria-hidden="true"></i>
+            <mat-icon fontSet="fab" fontIcon="fa-medium-m"></mat-icon>
             <span>Medium</span>
           </a>
           <a href="https://www.twitter.com/tomastrajan" target="_blank">
-            <i class="fab fa-fw fa-twitter fa-2x" aria-hidden="true"></i>
+            <mat-icon fontSet="fab" fontIcon="fa-twitter"></mat-icon>
             <span>Twitter</span>
           </a>
           <a href="https://www.youtube.com/channel/UC7XgRHIVoqnh3U5Vmly9ofQ"
              target="_blank">
-            <i class="fab fa-fw fa-youtube fa-2x" aria-hidden="true"></i>
+            <mat-icon fontSet="fab" fontIcon="fa-youtube"></mat-icon>
             <span>Youtube</span>
           </a>
           <a href="https://www.instagram.com/tomastrajan" target="_blank">
-            <i class="fab fa-fw fa-instagram fa-2x" aria-hidden="true"></i>
+            <mat-icon fontSet="fab" fontIcon="fa-instagram"></mat-icon>
             <span>Instagram</span>
           </a>
           <a href="https://www.slides.com/tomastrajan" target="_blank">
-            <i class="fas fa-fw fa-play-circle fa-2x" aria-hidden="true"></i>
+            <mat-icon fontSet="fas" fontIcon="fa-play-circle"></mat-icon>
             <span>Slides</span>
           </a>
         </div>
@@ -113,8 +113,8 @@
           <a matTooltip="Show changelog"
              matTooltipPosition="before"
              href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CHANGELOG.md">
-            <i class="fas fa-rocket"></i> {{version}} <span
-            *ngIf="!isProd">[{{envName}}]</span>
+            <mat-icon fontSet="fas" fontIcon="fa-rocket"></mat-icon>
+            {{version}} <span *ngIf="!isProd">[{{envName}}]</span>
           </a>
         </div>
       </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -17,6 +17,7 @@ mat-sidenav-container {
     flex-direction: column;
     position: relative;
     overflow-y: auto;
+    overflow-x: hidden;
 
     .toolbar {
       position: fixed;
@@ -28,6 +29,10 @@ mat-sidenav-container {
         margin: 0 10px 0 0;
       }
 
+      mat-icon {
+        font-size: 24px;
+      }
+
       .branding {
         cursor: pointer;
         padding-top: 4px;
@@ -91,12 +96,17 @@ mat-sidenav-container {
           a {
             transition: padding 0.5s;
             display: inline-block;
-            padding: 20px 0;
+            padding: 20px 5px;
 
             &:hover {
               text-decoration: none;
             }
 
+            mat-icon {
+              font-size: 30px;
+              width: 35px;
+            }
+
             span {
               display: inline-block;
               width: 75px;
@@ -157,7 +167,8 @@ mat-sidenav {
     font-weight: 500;
 
     img {
-      margin: 0 10px 0 0;
+      height: 48px;
+      margin: 2px 10px 0 0;
     }
 
     span {

diff --git a/src/app/examples/examples/examples.component.html b/src/app/examples/examples/examples.component.html
@@ -1,31 +1,12 @@
 <nav mat-tab-nav-bar >
   <a mat-tab-link
-     class="d-none d-md-inline-flex"
      *ngFor="let e of examples"
      [routerLink]="e.link"
      routerLinkActive #rla="routerLinkActive"
      [active]="rla.isActive">
     {{e.label}}
   </a>
-  <span class="nav-responsive d-md-none"
-        *ngFor="let e of examples"
-        [routerLink]="e.link"
-        routerLinkActive #rla="routerLinkActive"
-        [matMenuTriggerFor]="examplesMenu">
-    <a *ngIf="rla.isActive"
-        mat-tab-link>
-      <mat-icon>menu</mat-icon> {{e.label}}
-    </a>
-  </span>
 </nav>
-<mat-menu #examplesMenu="matMenu" [overlapTrigger]="false" class="nav-responsive-overlay">
-  <button mat-menu-item
-          *ngFor="let e of examples"
-          [routerLink]="e.link"
-          routerLinkActive="active">
-    {{e.label}}
-  </button>
-</mat-menu>
 
 <div [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
   <router-outlet #o="outlet"></router-outlet>

diff --git a/src/app/examples/examples/examples.component.scss b/src/app/examples/examples/examples.component.scss
@@ -1,23 +1,17 @@
+@import '../../../styles-variables';
+
 nav {
   margin-bottom: 20px;
+  position: relative;
 
   .mat-tab-link {
     min-width: 130px;
   }
-}
-
-.nav-responsive {
-  padding: 0 0 24px 0;
-
-  a {
-    width: 100%;
-    display: inline-block;
-    padding-top: 14px;
 
-    mat-icon {
-      float: left;
-      position: relative;
-      top: -1px;
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    .mat-tab-link {
+      min-width: 0;
+      padding: 0 15px;
     }
   }
 }
diff --git a/src/app/examples/stock-market/stock-market.component.html b/src/app/examples/stock-market/stock-market.component.html
@@ -23,16 +23,19 @@ <h1 class="main-heading">Stock Market</h1>
       <mat-card *ngIf="stocks.stock">
         <mat-card-title>{{stocks.stock.symbol}} <span>{{stocks.stock.last}} {{stocks.stock.ccy}}</span></mat-card-title>
         <mat-card-subtitle>
-          {{stocks.stock.exchange}}
-          <span [ngClass]="{ negative: stocks.stock.changeNegative }">
-            <i class="fas fa-caret-up" *ngIf="stocks.stock.changePositive"></i>
-            <i class="fas fa-caret-down" *ngIf="stocks.stock.changeNegative"></i>
+          <p [ngClass]="{ negative: stocks.stock.changeNegative }">
+            <mat-icon fontSet="fas" fontIcon="fa-caret-up"
+                      *ngIf="stocks.stock.changePositive"></mat-icon>
+            <mat-icon fontSet="fas" fontIcon="fa-caret-down"
+                      *ngIf="stocks.stock.changeNegative"></mat-icon>
             {{stocks.stock.change}} ({{stocks.stock.changePercent}})
-          </span>
+          </p>
         </mat-card-subtitle>
+        <mat-card-content>{{stocks.stock.exchange}}</mat-card-content>
       </mat-card>
       <p *ngIf="stocks.error" class="error">
-        <i class="fas fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br><br>
+        <mat-icon fontSet="fas" fontIcon="fa-exclamation-triangle"></mat-icon>
+        <br><br>
         <span>Stock <span class="symbol">{{stocks.symbol}}</span> not found</span>
       </p>
       <br>

diff --git a/src/app/examples/stock-market/stock-market.component.scss b/src/app/examples/stock-market/stock-market.component.scss
@@ -10,11 +10,23 @@ mat-form-field {
 mat-card {
   span {
     float: right;
+  }
+
+  mat-card-title {
+    margin-bottom: 5px;
+  }
+
+  mat-card-subtitle {
+    text-align: right;
 
-    i {
-      margin: 0 5px 0 0;
+    mat-icon {
+      width: 8px;
     }
   }
+
+  mat-card-content {
+    text-align: center;
+  }
 }
 
 mat-spinner {
@@ -25,6 +37,11 @@ mat-spinner {
   text-align: center;
   padding: 20px;
 
+  mat-icon {
+    width: 54px;
+    font-size: 48px;
+  }
+
   > span {
     opacity: 0.4;
   }

diff --git a/src/app/examples/stock-market/stock-market.component.scss-theme.scss b/src/app/examples/stock-market/stock-market.component.scss-theme.scss
@@ -5,15 +5,13 @@
 
   anms-stock-market {
     mat-card {
-      span {
-        &.negative {
-          color: mat-color($warn);
-        }
+      .negative {
+        color: mat-color($warn);
       }
     }
 
     .error {
-      i {
+      mat-icon {
         color: mat-color($warn);
       }
     }

diff --git a/src/app/examples/todos/todos.component.html b/src/app/examples/todos/todos.component.html
@@ -6,12 +6,12 @@
                       (keyup)="onNewTodoChange($event.target.value)"
                       (keyup.enter)="!isAddTodoDisabled && onAddTodo()"
                       (keyup.escape)="onNewTodoClear()">
-        <anms-big-input-action icon="add" color="accent"
+        <anms-big-input-action fontSet="fas" fontIcon="fa-plus" color="accent"
                                (action)="onAddTodo()"
                                [disabled]="isAddTodoDisabled"
                                matTooltip="Add new todo" matTooltipPosition="before">
         </anms-big-input-action>
-        <anms-big-input-action icon="delete_forever" color="warn"
+        <anms-big-input-action fontSet="fas" fontIcon="fa-trash" color="warn"
                                (action)="onRemoveDoneTodos()"
                                [disabled]="isRemoveDoneTodosDisabled"
                                matTooltip="Remove done todos" matTooltipPosition="after">
@@ -24,19 +24,19 @@
       <h2>
         Todo List
         <button class="todos-filter" mat-icon-button [matMenuTriggerFor]="todosFilter">
-          <mat-icon>filter_list</mat-icon>
+          <mat-icon fontSet="fas" fontIcon="fa-filter"></mat-icon>
         </button>
         <mat-menu class="todos-filter-menu-overlay" #todosFilter="matMenu" xPosition="before">
           <button mat-menu-item (click)="onFilterTodos('ALL')" [ngClass]="{ active: todos.filter === 'ALL' }">
-            <mat-icon>assignment</mat-icon>
+            <mat-icon fontSet="fas" fontIcon="fa-tasks"></mat-icon>
             <span>All</span>
           </button>
           <button mat-menu-item (click)="onFilterTodos('DONE')" [ngClass]="{ active: todos.filter === 'DONE' }">
-            <mat-icon>done</mat-icon>
+            <mat-icon fontSet="fas" fontIcon="fa-check"></mat-icon>
             <span>Done</span>
           </button>
           <button mat-menu-item (click)="onFilterTodos('ACTIVE')" [ngClass]="{ active: todos.filter === 'ACTIVE' }">
-            <mat-icon>check_box_outline_blank</mat-icon>
+            <mat-icon fontSet="fas" fontIcon="fa-square"></mat-icon>
             <span>Active</span>
           </button>
         </mat-menu>

diff --git a/src/app/examples/todos/todos.component.spec.ts b/src/app/examples/todos/todos.component.spec.ts
@@ -6,12 +6,12 @@ import {
   tick
 } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { Store, StoreModule } from '@ngrx/store';
 
 import { CoreModule } from '@app/core';
 import { SharedModule } from '@app/shared';
 
 import { TodosComponent } from './todos.component';
-import { Store, StoreModule } from '@ngrx/store';
 
 import {
   todosReducer,
@@ -31,11 +31,11 @@ describe('TodosComponent', () => {
   const getTodos = () => fixture.debugElement.queryAll(By.css('.todo'));
   const deleteDoneTodosBtn = () =>
     fixture.debugElement.query(
-      By.css('anms-big-input-action[icon="delete_forever"] > button')
+      By.css('anms-big-input-action[fontIcon="fa-trash"] > button')
     );
   const addTodoBtn = () =>
     fixture.debugElement.query(
-      By.css('anms-big-input-action[icon="add"] > button')
+      By.css('anms-big-input-action[fontIcon="fa-plus"] > button')
     );
 
   const setTodosFromArray = function(

diff --git a/src/app/settings/settings/settings.component.html b/src/app/settings/settings/settings.component.html
@@ -7,7 +7,7 @@
     <div class="col-md-6 group">
       <h2>Themes</h2>
       <div class="icon-form-field">
-        <mat-icon color="accent">color_lens</mat-icon>
+        <mat-icon fontSet="fas" fontIcon="fa-paint-brush" color="accent"></mat-icon>
         <mat-form-field>
           <mat-select placeholder="Color theme"
                       [ngModel]="settings?.theme"
@@ -19,7 +19,7 @@ <h2>Themes</h2>
         </mat-form-field>
       </div>
       <div class="icon-form-field">
-        <mat-icon color="accent">lightbulb_outline</mat-icon>
+        <mat-icon fontSet="fas" fontIcon="fa-lightbulb" color="accent"></mat-icon>
         <mat-placeholder>Auto night mode (from 21:00 to 7:00)</mat-placeholder>
         <mat-slide-toggle
           [checked]="settings?.autoNightMode"
@@ -30,7 +30,7 @@ <h2>Themes</h2>
     <div class="col-md-6 group">
       <h2>Animations</h2>
       <div class="icon-form-field">
-        <mat-icon color="accent">panorama</mat-icon>
+        <mat-icon fontSet="fas" fontIcon="fa-window-maximize" color="accent"></mat-icon>
         <mat-placeholder>Navigation whole page transition</mat-placeholder>
         <mat-slide-toggle
           matTooltip="Sorry, this feature is disabled in IE and EDGE"
@@ -45,7 +45,7 @@ <h2>Animations</h2>
         </mat-slide-toggle>
       </div>
       <div class="icon-form-field">
-        <mat-icon color="accent">dashboard</mat-icon>
+        <mat-icon fontSet="fas" fontIcon="fa-stream" color="accent"></mat-icon>
         <mat-placeholder>Navigation page elements slide up</mat-placeholder>
         <mat-slide-toggle
           [checked]="settings?.elementsAnimations"

diff --git a/src/app/settings/settings/settings.component.scss b/src/app/settings/settings/settings.component.scss
@@ -28,7 +28,8 @@ h2 {
 }
 
 mat-icon {
-  margin: 0 10px 0 0;
+  margin: 5px 5px 0 0;
+  font-size: 20px;
 }
 
 mat-form-field {

diff --git a/src/app/shared/big-input/big-input-action.component.html b/src/app/shared/big-input/big-input-action.component.html
@@ -1,4 +1,5 @@
 <button mat-raised-button color="color" [disabled]="disabled" (click)="onClick()">
-  <mat-icon *ngIf="icon">{{icon}}</mat-icon>
+  <mat-icon *ngIf="fontSet && fontIcon" [fontSet]="fontSet"
+            [fontIcon]="fontIcon"></mat-icon>
   <span *ngIf="label">{{label}}</span>
 </button>