Angular and Angular Material 6 compatibility

+ Small adjustments and polishing up in various apps and pages

src/app/fuse-fake-db/mail.ts

@@ -442,13 +442,15 @@ export class MailFakeDb
             'id'    : 0,
             'handle': 'starred',
             'title' : 'Starred',
-            'icon'  : 'star'
+            'icon'  : 'star',
+            'color' : 'amber-fg'
         },
         {
             'id'    : 1,
             'handle': 'important',
             'title' : 'Important',
-            'icon'  : 'label'
+            'icon'  : 'label',
+            'color' : 'red-fg'
         }
     ];
 

src/app/main/content/apps/academy/course/course.component.html

@@ -38,7 +38,7 @@
                     <mat-icon>menu</mat-icon>
                 </button>
 
-                <button mat--iconbutton class="mr-16" [routerLink]="'/apps/academy/courses'">
+                <button mat-icon-button class="mr-16" [routerLink]="'/apps/academy/courses'">
                     <mat-icon>arrow_back</mat-icon>
                 </button>
 

src/app/main/content/apps/chat/chat-view/chat-view.component.html

@@ -9,11 +9,11 @@
             <div fxLayout="row" fxLayoutAlign="start center">
 
                 <!-- RESPONSIVE CHATS BUTTON-->
-                <div mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
+                <button mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
                         fuseMatSidenavToggler="chat-left-sidenav"
                         aria-label="chats button">
-                    <mat-icon class="s-36">chat</mat-icon>
+                    <mat-icon>chat</mat-icon>
-                </div>
+                </button>
                 <!-- / RESPONSIVE CHATS BUTTON-->
 
                 <!-- CHAT CONTACT-->

src/app/main/content/apps/contacts/contact-list/contact-list.component.html

@@ -73,13 +73,13 @@
         <mat-cell *cdkCellDef="let contact">
             <div fxFlex="row" fxLayoutAlign="end center">
                 <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
-                    <mat-icon *ngIf="user.starred.includes(contact.id)">star</mat-icon>
+                    <mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
-                    <mat-icon *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
+                    <mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
                 </button>
 
                 <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
                         (click)="$event.stopPropagation();">
-                    <mat-icon>more_vert</mat-icon>
+                    <mat-icon class="secondary-text">more_vert</mat-icon>
                 </button>
 
                 <mat-menu #moreMenu="matMenu">

src/app/main/content/apps/contacts/contact-list/contact-list.component.ts

@@ -30,6 +30,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
     checkboxes: {};
 
     onContactsChangedSubscription: Subscription;
+    onFilterChangedSubscription: Subscription;
     onSelectedContactsChangedSubscription: Subscription;
     onUserDataChangedSubscription: Subscription;
 
@@ -72,6 +73,10 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
                 this.user = user;
             });
 
+        this.onFilterChangedSubscription =
+            this.contactsService.onFilterChanged.subscribe(() => {
+                this.contactsService.deselectContacts();
+            });
     }
 
     ngOnInit()
@@ -82,6 +87,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
     ngOnDestroy()
     {
         this.onContactsChangedSubscription.unsubscribe();
+        this.onFilterChangedSubscription.unsubscribe();
         this.onSelectedContactsChangedSubscription.unsubscribe();
         this.onUserDataChangedSubscription.unsubscribe();
     }

src/app/main/content/apps/contacts/contacts.service.ts

@@ -120,7 +120,7 @@ export class ContactsService implements Resolve<any>
      */
     toggleSelectedContact(id)
     {
-        // First, check if we already have that todo as selected...
+        // First, check if we already have that contact as selected...
         if ( this.selectedContacts.length > 0 )
         {
             const index = this.selectedContacts.indexOf(id);

src/app/main/content/apps/dashboards/analytics/analytics.component.html

@@ -41,7 +41,7 @@
 
     <div class="content">
 
-        <div class="left mr-32">
+        <div class="left mr-lg-32">
 
             <div class="pb-24 font-size-18 font-weight-300">
                 How are your active users trending over time?

src/app/main/content/apps/e-commerce/orders/orders.component.html

@@ -21,7 +21,7 @@
             <!-- / APP TITLE -->
 
             <!-- SEARCH -->
-            <div class="search-input-wrapper ml-8 m-sm-0"
+            <div class="search-input-wrapper ml-sm-16"
                  fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
                 <label for="search" class="mr-8">
                     <mat-icon class="secondary-text">search</mat-icon>

src/app/main/content/apps/e-commerce/orders/orders.component.scss

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 :host {
 
     .header {
@@ -5,6 +7,13 @@
         .search-input-wrapper {
             max-width: 480px;
         }
+
+        @include media-breakpoint-down(xs) {
+            margin: 24px 0;
+            height: 128px !important;
+            min-height: 128px !important;
+            max-height: 128px !important;
+        }
     }
 
     .mat-tab-group,

src/app/main/content/apps/e-commerce/product/product.component.html

@@ -39,14 +39,14 @@
             <!-- / APP TITLE -->
 
             <button mat-raised-button
-                    class="save-product-button mat-white-bg mt-16 mt-sm-0"
+                    class="save-product-button mat-white-bg"
                     [disabled]="productForm.invalid"
                     *ngIf="pageType ==='new'" (click)="addProduct()">
                 <span>ADD</span>
             </button>
 
             <button mat-raised-button
-                    class="save-product-button mat-white-bg mt-16 mt-sm-0"
+                    class="save-product-button mat-white-bg"
                     [disabled]="productForm.invalid || productForm.pristine"
                     *ngIf="pageType ==='edit'" (click)="saveProduct()">
                 <span>SAVE</span>

src/app/main/content/apps/e-commerce/products/products.component.html

@@ -15,13 +15,18 @@
             <!-- APP TITLE -->
             <div class="logo my-12 m-sm-0"
                  fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">shopping_basket</mat-icon>
+                <mat-icon class="logo-icon mr-16" *fuseIfOnDom
-                <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Products</span>
+                          [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+                    shopping_basket
+                </mat-icon>
+                <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
+                    Products
+                </span>
             </div>
             <!-- / APP TITLE -->
 
             <!-- SEARCH -->
-            <div class="search-input-wrapper mx-12 m-md-0"
+            <div class="search-input-wrapper mx-24 m-md-0"
                  fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
                 <label for="search" class="mr-8">
                     <mat-icon class="secondary-text">search</mat-icon>

src/app/main/content/apps/e-commerce/products/products.component.scss

@@ -9,9 +9,10 @@
         }
 
         @include media-breakpoint-down(xs) {
-            height: 176px !important;
+            margin: 8px 0;
-            min-height: 176px !important;
+            height: 192px !important;
-            max-height: 176px !important;
+            min-height: 192px !important;
+            max-height: 192px !important;
         }
     }
 

src/app/main/content/apps/file-manager/file-list/file-list.component.html

@@ -44,7 +44,7 @@
         <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
             <button mat-icon-button class="sidenav-toggle"
                     fuseMatSidenavToggler="file-manager-right-sidenav">
-                <mat-icon>info</mat-icon>
+                <mat-icon class="secondary-text">info</mat-icon>
             </button>
         </mat-cell>
     </ng-container>

src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html

@@ -25,13 +25,13 @@
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
             <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
-                <mat-icon *ngIf="mail.starred">star</mat-icon>
+                <mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
-                <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
             </button>
 
             <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
-                <mat-icon *ngIf="mail.important">label</mat-icon>
+                <mat-icon class="red-fg" *ngIf="mail.important">label</mat-icon>
-                <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.important">label_outline</mat-icon>
             </button>
         </div>
     </div>

src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html

@@ -50,7 +50,7 @@
         <div class="nav-item" *ngFor="let filter of (filters$ | async)">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
                routerLinkActive="active">
-                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
+                <mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
         </div>

src/app/main/content/apps/mail/mail-details/mail-details.component.html

@@ -27,13 +27,13 @@
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
             <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
-                <mat-icon *ngIf="mail.starred">star</mat-icon>
+                <mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
-                <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
             </button>
 
             <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
-                <mat-icon *ngIf="mail.important">label</mat-icon>
+                <mat-icon class="red-fg" *ngIf="mail.important">label</mat-icon>
-                <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.important">label_outline</mat-icon>
             </button>
         </div>
     </div>

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -49,7 +49,7 @@
 
         <div class="nav-item" *ngFor="let filter of filters">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
-                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
+                <mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
         </div>

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -326,18 +326,20 @@
 
                         <span fxFlex class="section-title">{{checklist.name}}</span>
 
-
                         <div>
+
                             <button mat-icon-button class="checklist-actions-button"
                                     [matMenuTriggerFor]="checklistActionsMenu">
                                 <mat-icon class="s-20">more_vert</mat-icon>
                             </button>
+
                             <mat-menu #checklistActionsMenu="matMenu">
                                 <button mat-menu-item (click)="removeChecklist(checklist)">
                                     <mat-icon>delete</mat-icon>
                                     <span>Remove Checklist</span>
                                 </button>
                             </mat-menu>
+
                         </div>
 
                     </div>
@@ -372,7 +374,7 @@
 
                                 <button mat-icon-button class="checklist-actions-button"
                                         (click)="removeChecklistItem(checkItem, checklist)">
-                                    <mat-icon class="s-20">delete</mat-icon>
+                                    <mat-icon class="secondary-text s-20">delete</mat-icon>
                                 </button>
 
                             </div>

src/app/main/content/apps/todo/todo-details/todo-details.component.html

@@ -20,32 +20,34 @@
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
-                <mat-icon *ngIf="todo.deleted">delete_forever</mat-icon>
-                <mat-icon *ngIf="!todo.deleted">delete</mat-icon>
-            </button>
-
             <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
-                <mat-icon *ngIf="todo.important">error</mat-icon>
+                <mat-icon class="red-fg" *ngIf="todo.important">error</mat-icon>
-                <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.important">error_outline</mat-icon>
             </button>
 
             <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
-                <mat-icon *ngIf="todo.starred">star</mat-icon>
+                <mat-icon class="amber-fg" *ngIf="todo.starred">star</mat-icon>
-                <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.starred">star_outline</mat-icon>
             </button>
 
             <button mat-icon-button [matMenuTriggerFor]="labelMenu" fxFlex="0 1 auto">
-                <mat-icon>label</mat-icon>
+                <mat-icon class="secondary-text">label</mat-icon>
             </button>
 
             <mat-menu #labelMenu="matMenu">
                 <button mat-menu-item *ngFor="let tag of tags"
                         (click)="toggleTagOnTodo(tag.id)">
-                    {{tag.title}}
+                    <mat-icon *ngIf="hasTag(tag.id)">check</mat-icon>
+                    <mat-icon *ngIf="!hasTag(tag.id)"></mat-icon>
+                    <span>{{tag.title}}</span>
                 </button>
             </mat-menu>
 
+            <button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
+                <mat-icon class="secondary-text" *ngIf="todo.deleted">delete_forever</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.deleted">delete</mat-icon>
+            </button>
+
         </div>
     </div>
 

src/app/main/content/apps/todo/todo-details/todo-details.component.ts

@@ -157,6 +157,11 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
         this.todoService.toggleTagOnTodo(tagId, this.todo);
     }
 
+    hasTag(tagId)
+    {
+        return this.todoService.hasTag(tagId, this.todo);
+    }
+
     addTodo()
     {
         this.todoService.updateTodo(this.todoForm.getRawValue());

src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html

@@ -35,19 +35,19 @@
 
             <button mat-icon-button (click)="toggleImportant($event)"
                     aria-label="Toggle important" fxHide.xs>
-                <mat-icon *ngIf="todo.important">error</mat-icon>
+                <mat-icon class="red-fg" *ngIf="todo.important">error</mat-icon>
-                <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.important">error_outline</mat-icon>
             </button>
 
             <button mat-icon-button (click)="toggleStar($event)"
                     aria-label="Toggle star" fxHide.xs>
-                <mat-icon *ngIf="todo.starred">star</mat-icon>
+                <mat-icon class="amber-fg" *ngIf="todo.starred">star</mat-icon>
-                <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.starred">star_outline</mat-icon>
             </button>
 
             <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()"
                     fxHide.xs>
-                <mat-icon>more_vert</mat-icon>
+                <mat-icon class="secondary-text">more_vert</mat-icon>
             </button>
 
             <mat-menu #moreMenu="matMenu">

src/app/main/content/apps/todo/todo.model.ts

@@ -30,7 +30,7 @@ export class Todo
             this.starred = todo.starred;
             this.important = todo.important;
             this.deleted = todo.deleted;
-            this.tags = todo.tags;
+            this.tags = todo.tags || [];
         }
     }
 

src/app/main/content/apps/todo/todo.service.ts

@@ -368,6 +368,16 @@ export class TodoService implements Resolve<any>
         this.updateTodo(todo);
     }
 
+    hasTag(tagId, todo)
+    {
+        if ( !todo.tags )
+        {
+            return false;
+        }
+
+        return todo.tags.indexOf(tagId) !== -1;
+    }
+
     /**
      * Update the todo
      * @param todo

src/app/main/content/components-third-party/datatable/ngx-datatable.component.html

@@ -14,7 +14,7 @@
         <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
            href="https://github.com/swimlane/ngx-datatable"
            target="_blank">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="mr-8">link</mat-icon>
             <span>Reference</span>
         </a>
     </div>

src/app/main/content/components-third-party/google-maps/google-maps.component.html

@@ -14,7 +14,7 @@
         <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
            href="https://angular-maps.com"
            target="_blank">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="mr-8">link</mat-icon>
             <span>Reference</span>
         </a>
     </div>

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html

@@ -5,7 +5,7 @@
         <div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
-                <mat-icon class="s-96">email</mat-icon>
+                <mat-icon class="blue-fg s-96">email</mat-icon>
             </div>
 
             <div class="title">Confirm your email address!</div>

src/app/main/content/pages/faq/faq.component.scss

@@ -23,7 +23,7 @@
             h1 {
                 color: white;
                 font-size: 48px;
-                font-weight: 300;
+                font-weight: 400;
                 letter-spacing: 0.01em;
                 text-align: center;
                 margin-top: 0;
@@ -39,7 +39,7 @@
                 max-width: 480px;
                 text-align: center;
                 font-weight: 300;
-                letter-spacing: 0.03em;
+                letter-spacing: 0.075em;
                 margin: 0;
 
                 @include media-breakpoint-down('xs') {

src/app/main/content/pages/knowledge-base/knowledge-base.component.html

@@ -22,7 +22,7 @@
 
                 <a mat-list-item *ngFor="let article of category.featuredArticles"
                    (click)="readArticle(article)">
-                    <mat-icon class="mr-8">note</mat-icon>
+                    <mat-icon class="secondary-text mr-8">note</mat-icon>
                     {{ article.title }}
                 </a>
 

src/app/main/content/pages/knowledge-base/knowledge-base.component.scss

@@ -19,7 +19,7 @@
             h1 {
                 color: white;
                 font-size: 48px;
-                font-weight: 300;
+                font-weight: 400;
                 letter-spacing: 0.01em;
                 text-align: center;
                 margin-top: 0;
@@ -35,7 +35,7 @@
                 max-width: 480px;
                 text-align: center;
                 font-weight: 300;
-                letter-spacing: 0.03em;
+                letter-spacing: 0.075em;
                 margin: 0;
 
                 @include media-breakpoint-down('xs') {

src/app/main/content/pages/pricing/style-1/style-1.component.scss

@@ -26,7 +26,7 @@
                 .h1 {
                     color: white;
                     font-size: 48px;
-                    font-weight: 300;
+                    font-weight: 400;
                     letter-spacing: 0.01em;
                     text-align: center;
 
@@ -41,7 +41,7 @@
                     text-align: center;
                     margin-top: 16px;
                     font-weight: 300;
-                    letter-spacing: 0.03em;
+                    letter-spacing: 0.05em;
 
                     @include media-breakpoint-down('xs') {
                         font-size: 14px;

src/app/main/content/pages/pricing/style-2/style-2.component.scss

@@ -26,7 +26,7 @@
                 .h1 {
                     color: white;
                     font-size: 48px;
-                    font-weight: 300;
+                    font-weight: 400;
                     letter-spacing: 0.01em;
                     text-align: center;
 
@@ -41,7 +41,7 @@
                     text-align: center;
                     margin-top: 16px;
                     font-weight: 300;
-                    letter-spacing: 0.03em;
+                    letter-spacing: 0.05em;
 
                     @include media-breakpoint-down('xs') {
                         font-size: 14px;

src/app/main/content/pages/pricing/style-3/style-3.component.scss

@@ -26,7 +26,7 @@
                 .h1 {
                     color: white;
                     font-size: 48px;
-                    font-weight: 300;
+                    font-weight: 400;
                     letter-spacing: 0.01em;
                     text-align: center;
 
@@ -41,7 +41,7 @@
                     text-align: center;
                     margin-top: 16px;
                     font-weight: 300;
-                    letter-spacing: 0.03em;
+                    letter-spacing: 0.05em;
 
                     @include media-breakpoint-down('xs') {
                         font-size: 14px;

src/app/main/content/pages/search/tabs/classic/classic.component.html

@@ -5,19 +5,17 @@
 
         <span class="result-count h3 secondary-text">
             <span>54</span>
-            <span>Results</span>
+            <span class="ml-4">Results</span>
         </span>
 
         <div class="pager" fxLayout="row" fxLayoutAlign="start center">
-            <span class="secondary-text">
+            <span class="mr-4 secondary-text">Results:</span>
-                <span>Results:&nbsp;</span>
-            </span>
 
             <span class="page-info">
                 <span>1</span>
-                <span>-</span>
+                <span class="mx-4">-</span>
                 <span>10</span>
-                <span>of</span>
+                <span class="mx-4">of</span>
                 <span>54</span>
             </span>
 

src/app/main/content/ui/colors/colors.component.html

@@ -15,7 +15,7 @@
         <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
            href="https://www.google.com/design/spec/style/color.html#color-color-palette"
            target="_blank">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="mr-8">link</mat-icon>
             <span>Reference</span>
         </a>
 

src/app/main/content/ui/icons/icons.component.html

@@ -1,7 +1,8 @@
 <div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
@@ -12,8 +13,9 @@
             <div class="h1 mt-16">Icons</div>
         </div>
 
-        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io" target="_blank">
+        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io"
-            <mat-icon>link</mat-icon>
+           target="_blank">
+            <mat-icon class="mr-8">link</mat-icon>
             <span>Reference</span>
         </a>
 
@@ -41,7 +43,7 @@
 
                     <div class="icon-holder m-16" fxLayout="column" fxLayoutAlign="center center"
                          *ngFor="let icon of filteredIcons">
-                        <mat-icon class="s-48">{{icon}}</mat-icon>
+                        <mat-icon class="secondary-text s-48">{{icon}}</mat-icon>
                         <div class="icon-name secondary-text mt-8">{{icon}}</div>
                     </div>