Updated Fuse version

+ Removed unnecessary dev dependencies and updated couple of them

.angular-cli.json

@@ -9,6 +9,7 @@
             "outDir": "dist",
             "assets": [
                 "assets",
+                "app/main/content/components/angular-material",
                 "favicon.ico"
             ],
             "index": "index.html",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "",
   "scripts": {
     "ng": "ng",
@@ -15,49 +15,48 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "4.4.3",
+    "@agm/core": "1.0.0-beta.1",
-    "@angular/cdk": "2.0.0-beta.10",
+    "@angular/animations": "4.4.5",
-    "@angular/common": "4.4.3",
+    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/compiler": "4.4.3",
+    "@angular/common": "4.4.5",
-    "@angular/core": "4.4.3",
+    "@angular/compiler": "4.4.5",
+    "@angular/core": "4.4.5",
     "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.4.3",
+    "@angular/forms": "4.4.5",
-    "@angular/http": "4.4.3",
+    "@angular/http": "4.4.5",
-    "@angular/material": "2.0.0-beta.10",
+    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.4.3",
+    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.4.3",
+    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.4.3",
+    "@angular/router": "4.4.5",
     "@swimlane/ngx-charts": "6.0.2",
     "@swimlane/ngx-datatable": "9.3.1",
     "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.19.0",
+    "angular-calendar": "0.21.2",
-    "angular-in-memory-web-api": "0.3.2",
+    "angular-in-memory-web-api": "0.5.0",
+    "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
+    "core-js": "2.5.1",
     "d3": "4.10.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
-    "md2": "0.0.28",
+    "moment": "2.19.1",
-    "moment": "2.18.1",
+    "ngx-color-picker": "4.4.0",
-    "ngx-color-picker": "4.3.1",
+    "ngx-cookie-service": "1.0.9",
-    "ngx-cookie-service": "1.0.7",
+    "perfect-scrollbar": "1.0.3",
-    "ngx-perfect-scrollbar": "4.6.2",
-    "perfect-scrollbar": "0.8.1",
     "rxjs": "5.4.3",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.2",
+    "@angular/cli": "1.4.7",
-    "@angular/compiler-cli": "4.4.3",
+    "@angular/compiler-cli": "4.4.5",
-    "@angular/language-service": "4.4.3",
+    "@angular/language-service": "4.4.5",
     "@angularclass/hmr": "2.1.3",
-    "@ngtools/webpack": "1.7.1",
     "@types/jasmine": "2.6.0",
     "@types/jasminewd2": "2.0.2",
     "@types/node": "6.0.88",
-    "codelyzer": "3.0.1",
+    "codelyzer": "3.2.0",
     "jasmine-core": "2.6.2",
     "jasmine-spec-reporter": "4.1.0",
     "karma": "1.7.1",
@@ -66,10 +65,9 @@
     "karma-coverage-istanbul-reporter": "1.2.1",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
-    "node-sass": "4.5.3",
     "protractor": "5.1.2",
-    "ts-node": "3.0.4",
+    "ts-node": "3.2.0",
-    "tslint": "5.3.2",
+    "tslint": "5.7.0",
     "typescript": "2.3.3"
   }
 }

src/app/app.module.ts

@@ -19,6 +19,8 @@ import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
 import { ServicesModule } from './main/content/services/services.module';
+import { FuseAngularMaterialModule } from './main/content/components/angular-material/angular-material.module';
+import { MarkdownModule } from 'angular2-markdown';
 
 const appRoutes: Routes = [
     {
@@ -66,8 +68,12 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
+        MarkdownModule.forRoot(),
 
-        InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
+        InMemoryWebApiModule.forRoot(FuseFakeDbService, {
+            delay             : 0,
+            passThruUnknownUrl: true
+        }),
 
         FuseMainModule,
 
@@ -77,6 +83,7 @@ const appRoutes: Routes = [
         UIModule,
         ServicesModule,
         ComponentsModule,
+        FuseAngularMaterialModule,
         ComponentsThirdPartyModule
     ],
     providers   : [

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -1,6 +1,6 @@
-<h1 md-dialog-title>Confirm</h1>
+<h1 matDialogTitle>Confirm</h1>
-<div md-dialog-content>{{confirmMessage}}</div>
+<div mat-dialog-content>{{confirmMessage}}</div>
-<div md-dialog-actions class="pt-24">
+<div mat-dialog-actions class="pt-24">
-    <button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
+    <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
-    <button md-button (click)="dialogRef.close(false)">Cancel</button>
+    <button mat-button (click)="dialogRef.close(false)">Cancel</button>
 </div>

src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MdDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material';
 
 @Component({
     selector   : 'fuse-confirm-dialog',
@@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit
 {
     public confirmMessage: string;
 
-    constructor(public dialogRef: MdDialogRef<FuseConfirmDialogComponent>)
+    constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
     {
     }
 

src/app/core/components/copier/copier.service.ts

@@ -0,0 +1,65 @@
+/**
+ * This class is based on the code in the following projects:
+ *
+ * - https://github.com/zenorocha/select
+ * - https://github.com/zenorocha/clipboard.js/
+ *
+ * Both released under MIT license - © Zeno Rocha
+ */
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CopierService
+{
+
+    private textarea: HTMLTextAreaElement;
+
+    /** Copy the text value to the clipboard. */
+    copyText(text: string): boolean
+    {
+        this.createTextareaAndSelect(text);
+
+        const copySuccessful = document.execCommand('copy');
+        this.removeFake();
+
+        return copySuccessful;
+    }
+
+    /**
+     * Creates a hidden textarea element, sets its value from `text` property,
+     * and makes a selection on it.
+     */
+    private createTextareaAndSelect(text: string)
+    {
+        // Create a fake element to hold the contents to copy
+        this.textarea = document.createElement('textarea');
+
+        // Prevent zooming on iOS
+        this.textarea.style.fontSize = '12pt';
+
+        // Hide the element
+        this.textarea.classList.add('cdk-visually-hidden');
+
+        // Move element to the same position vertically
+        const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+        this.textarea.style.top = yPosition + 'px';
+
+        this.textarea.setAttribute('readonly', '');
+        this.textarea.value = text;
+
+        document.body.appendChild(this.textarea);
+
+        this.textarea.select();
+        this.textarea.setSelectionRange(0, this.textarea.value.length);
+    }
+
+    /** Remove the text area from the DOM. */
+    private removeFake()
+    {
+        if ( this.textarea )
+        {
+            document.body.removeChild(this.textarea);
+            this.textarea = null;
+        }
+    }
+}

src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html

@@ -1,100 +1,100 @@
 <div class="demo-sidenav">
-    <md-list>
+    <mat-list>
-        <h3 md-subheader>Sidenav Demo</h3>
+        <h3 matSubheader>Sidenav Demo</h3>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 1</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 2</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 3</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 4</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 5</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 6</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 7</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 8</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 9</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 10</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 11</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 12</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 13</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 14</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 15</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 16</span>
-        </md-list-item>
+        </mat-list-item>
 
-    </md-list>
+    </mat-list>
 </div>

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,23 +1,23 @@
-<button md-icon-button
+<button mat-icon-button
         type="button"
         class="mat-elevation-z1"
-        [mdMenuTriggerFor]="colorMenu"
+        [matMenuTriggerFor]="colorMenu"
         (onMenuOpen)="onMenuOpen()"
-        [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
+        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
-    <md-icon>palette</md-icon>
+    <mat-icon>palette</mat-icon>
 </button>
 
-<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
+<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
 
-    <header [ngClass]="selectedColor?.class || 'md-accent-bg'"
+    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
             class="mat-elevation-z4"
             fxLayout="row"
             fxLayoutAlign="space-between center">
 
-        <button md-icon-button
+        <button mat-icon-button
                 [style.visibility]="view==='hues'?'visible':'hidden'"
                 (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
-            <md-icon class="s-20">arrow_back</md-icon>
+            <mat-icon class="s-20">arrow_back</mat-icon>
         </button>
 
         <span *ngIf="selectedColor?.palette">
@@ -28,11 +28,11 @@
             Select Color
         </span>
 
-        <button md-icon-button
+        <button mat-icon-button
                 class="remove-color-button"
                 (click)="removeColor()"
                 aria-label="Remove Color">
-            <md-icon class="s-20">delete</md-icon>
+            <mat-icon class="s-20">delete</mat-icon>
         </button>
     </header>
 
@@ -47,10 +47,10 @@
                  fxLayoutAlign="start start"
                  class="colors" fusePerfectScrollbar>
                 <div class="color"
-                     [ngClass]="'md-'+color.key+'-bg'"
+                     [ngClass]="'mat-'+color.key+'-bg'"
                      *ngFor="let color of (colors | keys)"
                      (click)="$event.stopPropagation();selectPalette(color.key)"
-                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{color.key}}
                     </span>
@@ -67,16 +67,16 @@
                 <div class="color"
                      *ngFor="let hue of hues"
                      [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
-                     [ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
+                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
                      (click)="selectHue(hue)"
-                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{hue}}
                     </span>
-                    <md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
+                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
                 </div>
             </div>
         </div>
 
     </div>
-</md-menu>
+</mat-menu>

src/app/core/components/material-color-picker/material-color-picker.component.scss

@@ -11,7 +11,7 @@
             overflow: hidden;
             min-height: 258px;
             height: 308px;
-            background-color: #f7f7f7;
+            background-color: #F7F7F7;
 
             .view {
                 position: absolute;
@@ -39,7 +39,7 @@
                             font-size: 10px;
                         }
 
-                        md-icon {
+                        mat-icon {
                             position: absolute;
                             top: 2px;
                             right: 2px;

src/app/core/components/material-color-picker/material-color-picker.component.ts

@@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             {
                 this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
                 this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
-                this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
             }
             else
             {

src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html

@@ -1,7 +1,7 @@
-<a class="nav-link" md-ripple>
+<a class="nav-link" matRipple>
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 
 <div class="children" [ngClass]="{'open': isOpen}">
@@ -11,6 +11,7 @@
         <ng-container *ngFor="let item of item.children">
             <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
             <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
         </ng-container>
 
     </div>

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html

@@ -1,6 +1,17 @@
-<a class="nav-link" md-ripple
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
-   [routerLink]="[item.url]" routerLinkActive="active">
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
 </a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

src/app/core/components/navigation/navigation.component.ts

@@ -26,7 +26,6 @@ export class FuseNavigationComponent implements OnDestroy
 
     ngOnDestroy()
     {
-        console.warn('destroyed');
         this.navigationModelChangeSubscription.unsubscribe();
     }
 

src/app/core/components/navigation/navigation.service.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 @Injectable()
 export class FuseNavigationService
 {
+    onNavCollapseToggle = new EventEmitter<any>();
     onNavCollapseToggled = new EventEmitter<any>();
     onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
     navigationModel: NavigationModel;
@@ -18,6 +19,7 @@ export class FuseNavigationService
 
     /**
      * Get navigation model
+     *
      * @returns {any[]}
      */
     getNavigationModel()
@@ -27,19 +29,125 @@ export class FuseNavigationService
 
     /**
      * Set the navigation model
+     *
      * @param model
      */
     setNavigationModel(model)
     {
-        // console.log(model);
-
         this.navigationModel = model;
-
-        console.log(this.navigationModel);
-
         this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
+    /**
+     * Add new navigation item
+     * to the given location
+     */
+    addNavigationItem(location, item)
+    {
+        // Parse the location
+        const locationArr = location.split('.');
+
+        if ( locationArr.length === 0 )
+        {
+            return;
+        }
+
+        // Find the navigation item
+        const navItem = this.findNavigationItemById(locationArr);
+
+        // Act according to the item type
+        switch ( navItem.type )
+        {
+            case 'item':
+
+                // Create a children array
+                navItem.children = [];
+
+                // Push the item
+                navItem.children.push(item);
+
+                // Change the item type to collapsable
+                navItem.type = 'collapse';
+
+                break;
+
+            case 'collapse':
+
+                // Push the item
+                navItem.children.push(item);
+
+                break;
+
+            case 'group':
+
+                // Push the item
+                navItem.children.push(item);
+
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    /**
+     * Get navigation item from
+     * given location
+     *
+     * @param location
+     */
+    getNavigationItem(location)
+    {
+        // Parse the location
+        const locationArr = location.split('.');
+
+        if ( locationArr.length === 0 )
+        {
+            return;
+        }
+
+        // Find and return the navigation item
+        return this.findNavigationItemById(locationArr);
+    }
+
+    /**
+     * Find navigation item by location
+     *
+     * @param location
+     * @param navigation
+     */
+    findNavigationItemById(location, navigation?)
+    {
+        if ( !navigation )
+        {
+            navigation = this.navigationModel.model;
+        }
+
+        // Iterate through the given navigation
+        for ( const navItem of navigation )
+        {
+            // If the nav item id equals the first location...
+            if ( navItem.id === location[0] )
+            {
+                // If there is more location to look at...
+                if ( location.length > 1 )
+                {
+                    // Remove the first item of the location
+                    location.splice(0, 1);
+
+                    // Go nested...
+                    return this.findNavigationItemById(location, navItem.children);
+                }
+
+                // Otherwise just return the nav item
+                else
+                {
+                    return navItem;
+                }
+            }
+        }
+    }
+
     /**
      * Get flattened navigation array
      * @param navigationItems

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html

@@ -1,11 +1,12 @@
-<a class="nav-link" md-ripple (click)="toggleOpen($event)">
+<a class="nav-link" matRipple (click)="toggleOpen($event)">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">
         <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
         <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
     </ng-container>
 </div>

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts

@@ -43,7 +43,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         this.navigationService.onNavCollapseToggled
             .subscribe(
                 (clickedItem) => {
-                    if ( clickedItem.children )
+                    if ( clickedItem && clickedItem.children )
                     {
                         // Check if the clicked item is one
                         // of the children of this item
@@ -82,6 +82,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
 
         // Navigation collapse toggled...
         this.navigationService.onNavCollapseToggled.emit(this.item);
+        this.navigationService.onNavCollapseToggle.emit();
     }
 
     /**
@@ -95,6 +96,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         }
 
         this.isOpen = true;
+        this.navigationService.onNavCollapseToggle.emit();
     }
 
     /**
@@ -107,6 +109,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
             return;
         }
         this.isOpen = false;
+        this.navigationService.onNavCollapseToggle.emit();
     }
 
     /**

src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts

@@ -7,7 +7,7 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
 })
 export class FuseNavVerticalGroupComponent implements OnInit
 {
-    @HostBinding('class') classes = 'nav-group';
+    @HostBinding('class') classes = 'nav-group nav-item';
     @Input() item: any;
 
     constructor()

src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html

@@ -1,6 +1,17 @@
-<a class="nav-link" md-ripple
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
-   [routerLink]="[item.url]" routerLinkActive="active">
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
 </a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

src/app/core/components/search-bar/search-bar.component.html

@@ -1,20 +1,20 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
     <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
         <label for="fuse-search-bar-input">
-            <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
-                <md-icon class="s-24">search</md-icon>
+                <mat-icon class="s-24">search</mat-icon>
             </button>
             <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
+                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
             </span>-->
         </label>
 
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
 
-        <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
+        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
                 aria-label="Collapse Search Bar">
-            <md-icon class="s-24">close</md-icon>
+            <mat-icon class="s-24">close</mat-icon>
         </button>
 
     </div>

src/app/core/components/shortcuts/shortcuts.component.html

@@ -2,8 +2,8 @@
 
     <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
          fxHide fxShow.lt-md>
-        <button md-icon-button (click)="showMobileShortcutsPanel()">
+        <button mat-icon-button (click)="showMobileShortcutsPanel()">
-            <md-icon class="amber-600-fg">star</md-icon>
+            <mat-icon class="amber-600-fg">star</mat-icon>
         </button>
     </div>
 
@@ -16,8 +16,8 @@
                 <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
                      *ngFor="let shortcutItem of shortcutItems">
 
-                    <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -25,64 +25,64 @@
 
                 </div>
 
-                <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
+                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
                         (onMenuOpen)="onMenuOpen()">
-                    <md-icon class="amber-600-fg">star</md-icon>
+                    <mat-icon class="amber-600-fg">star</mat-icon>
                 </button>
 
             </div>
 
             <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
-                <button md-icon-button (click)="hideMobileShortcutsPanel()">
+                <button mat-icon-button (click)="hideMobileShortcutsPanel()">
-                    <md-icon>close</md-icon>
+                    <mat-icon>close</mat-icon>
                 </button>
             </div>
 
         </div>
 
-        <md-menu #addMenu="mdMenu" class="w-240">
+        <mat-menu #addMenu="matMenu" class="w-240">
 
-            <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
-                <input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
+                <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
-            </md-input-container>
+            </mat-form-field>
 
-            <md-divider></md-divider>
+            <mat-divider></mat-divider>
-            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
-                <md-list-item *ngFor="let shortcutItem of shortcutItems"
+                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
                                (click)="toggleShortcut($event, shortcutItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{shortcutItem.title}}</p>
+                        <p matLine fxFlex>{{shortcutItem.title}}</p>
-                        <md-icon class="ml-8">star</md-icon>
+                        <mat-icon class="ml-8">star</mat-icon>
                     </div>
-                </md-list-item>
+                </mat-list-item>
-                <md-list-item *ngIf="shortcutItems.length === 0">
+                <mat-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
-                </md-list-item>
+                </mat-list-item>
-            </md-nav-list>
+            </mat-nav-list>
 
-            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+            <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
-                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
+                <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
                                (click)="toggleShortcut($event, navigationItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                             {{navigationItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{navigationItem.title}}</p>
+                        <p matLine fxFlex>{{navigationItem.title}}</p>
-                        <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
+                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
                     </div>
-                </md-list-item>
+                </mat-list-item>
-            </md-nav-list>
+            </mat-nav-list>
-        </md-menu>
+        </mat-menu>
 
     </div>
 

src/app/core/components/theme-options/theme-options.component.html

@@ -1,50 +1,50 @@
-<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
+<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
-    <md-icon>settings</md-icon>
+    <mat-icon>settings</mat-icon>
 </button>
 
 <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
+<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
 
-    <button md-icon-button class="close-button" (click)="closeBar()">
+    <button mat-icon-button class="close-button" (click)="closeBar()">
-        <md-icon>close</md-icon>
+        <mat-icon>close</mat-icon>
     </button>
 
     <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
         <h3>Navigation:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-        </md-radio-group>
+        </mat-radio-group>
 
         <h3 class="mt-24">Toolbar:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-        </md-radio-group>
+        </mat-radio-group>
 
         <h3 class="mt-24">Footer:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-        </md-radio-group>
+        </mat-radio-group>
 
         <h3 class="mt-24">Layout Mode:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
-        </md-radio-group>
+        </mat-radio-group>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
         <h3>Colors:</h3>
         <div class="colors">
@@ -69,30 +69,31 @@
 
         </div>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
         <h3>Router Animation:</h3>
-        <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+        <mat-form-field class="w-100-p">
-            <md-option value="none">
+            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+                <mat-option value="none">
                     None
-            </md-option>
+                </mat-option>
-            <md-option value="slideUp">
+                <mat-option value="slideUp">
                     Slide up
-            </md-option>
+                </mat-option>
-            <md-option value="slideDown">
+                <mat-option value="slideDown">
                     Slide down
-            </md-option>
+                </mat-option>
-            <md-option value="slideRight">
+                <mat-option value="slideRight">
                     Slide right
-            </md-option>
+                </mat-option>
-            <md-option value="slideLeft">
+                <mat-option value="slideLeft">
                     Slide left
-            </md-option>
+                </mat-option>
-            <md-option value="fadeIn">
+                <mat-option value="fadeIn">
                     Fade in
-            </md-option>
+                </mat-option>
-        </md-select>
+            </mat-select>
-
+        </mat-form-field>
     </div>
 
 </div>

src/app/core/components/theme-options/theme-options.component.scss

@@ -14,6 +14,7 @@
     display: block;
     right: 0;
     top: 160px;
+    z-index: 998;
 
     &.bar-closed .theme-options-panel {
         display: none;
@@ -48,7 +49,7 @@
             color: rgba(0, 0, 0, 0.54);
         }
 
-        .mat-divider{
+        .mat-divider {
             display: block !important;
             width: 100%;
             margin: 24px 0 16px 0;
@@ -102,7 +103,7 @@
         opacity: .75;
         z-index: 998;
 
-        md-icon {
+        mat-icon {
             animation: rotating 3s linear infinite;
         }
 

src/app/core/components/theme-options/theme-options.component.ts

@@ -3,6 +3,7 @@ import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/anim
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
 import { fuseAnimations } from '../../animations';
+import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -26,6 +27,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     constructor(
         private animationBuilder: AnimationBuilder,
         private fuseConfig: FuseConfigService,
+        private navigationService: FuseNavigationService,
         private renderer: Renderer2
     )
     {
@@ -38,6 +40,27 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.fuseSettings = newSettings;
                     }
                 );
+
+        // Get the nav model and add customize nav item
+        // that opens the bar programmatically
+        const navModel = this.navigationService.getNavigationModel();
+
+        navModel.push({
+            'id'      : 'custom-function',
+            'title'   : 'Custom Function',
+            'type'    : 'group',
+            'children': [
+                {
+                    'id'      : 'customize',
+                    'title'   : 'Customize',
+                    'type'    : 'item',
+                    'icon'    : 'settings',
+                    'function': () => {
+                        this.openBar();
+                    }
+                }
+            ]
+        });
     }
 
     ngOnInit()

src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts

@@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
         {
             setTimeout(() => {
                 this.viewContainer.createEmbeddedView(this.templateRef);
-            }, 350);
+            }, 300);
             this.isCreated = true;
         }
         else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )

src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import * as Ps from 'perfect-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar';
 import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
@@ -13,10 +13,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
+    ps;
 
     constructor(
         private element: ElementRef,
-        private zone: NgZone,
         private fuseConfig: FuseConfigService,
         private platform: Platform
     )
@@ -48,11 +48,8 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
             return;
         }
 
-        this.zone.runOutsideAngular(() => {
-
         // Initialize the perfect-scrollbar
-            Ps.initialize(this.element.nativeElement);
+        this.ps = new PerfectScrollbar(this.element.nativeElement);
-        });
     }
 
     ngOnDestroy()
@@ -65,7 +62,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.onSettingsChanged.unsubscribe();
 
         // Destroy the perfect-scrollbar
-        Ps.destroy(this.element.nativeElement);
+        this.ps.destroy();
     }
 
     update()
@@ -76,7 +73,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         }
 
         // Update the perfect-scrollbar
-        Ps.update(this.element.nativeElement);
+        this.ps.update();
     }
 
     destroy()
@@ -126,7 +123,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
 
             // PS has weird event sending order, this is a workaround for that
             this.update();
-
             this.update();
         }
         else if ( value !== this.element.nativeElement[target] )

src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts

@@ -0,0 +1,99 @@
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+
+@Directive({
+    selector: '[fuseMatSidenavHelper]'
+})
+export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
+{
+    matchMediaSubscription: Subscription;
+
+    @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
+    @HostBinding('class.mat-stop-transition') stopTransition = true;
+
+    @Input('fuseMatSidenavHelper') id: string;
+    @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
+
+    constructor(
+        private fuseMatSidenavService: FuseMatSidenavHelperService,
+        private fuseMatchMedia: FuseMatchMedia,
+        private observableMedia: ObservableMedia,
+        private matSidenav: MatSidenav
+    )
+    {
+    }
+
+    ngOnInit()
+    {
+        this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
+
+        if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+        {
+            setTimeout(() => {
+                this.isLockedOpen = true;
+                this.matSidenav.mode = 'side';
+                this.matSidenav.open();
+            });
+            this.stopTransition = false;
+        }
+        else
+        {
+            setTimeout(() => {
+                this.isLockedOpen = false;
+                this.matSidenav.mode = 'over';
+                this.matSidenav.close();
+            });
+
+            setTimeout(() => {
+                this.stopTransition = false;
+            }, 3000);
+        }
+
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
+            if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+            {
+                setTimeout(() => {
+                    this.isLockedOpen = true;
+                    this.matSidenav.mode = 'side';
+                    this.matSidenav.open();
+                });
+            }
+            else
+            {
+                setTimeout(() => {
+                    this.isLockedOpen = false;
+                    this.matSidenav.mode = 'over';
+                    this.matSidenav.close();
+                });
+            }
+        });
+
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaSubscription.unsubscribe();
+    }
+}
+
+@Directive({
+    selector: '[fuseMatSidenavToggler]'
+})
+export class FuseMatSidenavTogglerDirective
+{
+    @Input('fuseMatSidenavToggler') id;
+
+    constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
+    {
+    }
+
+    @HostListener('click')
+    onClick()
+    {
+        this.fuseMatSidenavService.getSidenav(this.id).toggle();
+    }
+}

src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { MdSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 @Injectable()
-export class FuseMdSidenavHelperService
+export class FuseMatSidenavHelperService
 {
-    sidenavInstances: MdSidenav[];
+    sidenavInstances: MatSidenav[];
 
     constructor()
     {

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -1,99 +0,0 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MdSidenav } from '@angular/material';
-import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
-
-@Directive({
-    selector: '[fuseMdSidenavHelper]'
-})
-export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
-{
-    matchMediaSubscription: Subscription;
-
-    @HostBinding('class.md-is-locked-open') isLockedOpen = true;
-    @HostBinding('class.md-stop-transition') stopTransition = true;
-
-    @Input('fuseMdSidenavHelper') id: string;
-    @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
-
-    constructor(
-        private fuseMdSidenavService: FuseMdSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMedia,
-        private observableMedia: ObservableMedia,
-        private mdSidenav: MdSidenav
-    )
-    {
-    }
-
-    ngOnInit()
-    {
-        this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
-
-        if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
-        {
-            setTimeout(() => {
-                this.isLockedOpen = true;
-                this.mdSidenav.mode = 'side';
-                this.mdSidenav.open();
-            });
-            this.stopTransition = false;
-        }
-        else
-        {
-            setTimeout(() => {
-                this.isLockedOpen = false;
-                this.mdSidenav.mode = 'over';
-                this.mdSidenav.close();
-            });
-
-            setTimeout(() => {
-                this.stopTransition = false;
-            }, 3000);
-        }
-
-        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
-            if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
-            {
-                setTimeout(() => {
-                    this.isLockedOpen = true;
-                    this.mdSidenav.mode = 'side';
-                    this.mdSidenav.open();
-                });
-            }
-            else
-            {
-                setTimeout(() => {
-                    this.isLockedOpen = false;
-                    this.mdSidenav.mode = 'over';
-                    this.mdSidenav.close();
-                });
-            }
-        });
-
-    }
-
-    ngOnDestroy()
-    {
-        this.matchMediaSubscription.unsubscribe();
-    }
-}
-
-@Directive({
-    selector: '[fuseMdSidenavToggler]'
-})
-export class FuseMdSidenavTogglerDirective
-{
-    @Input('fuseMdSidenavToggler') id;
-
-    constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
-    {
-    }
-
-    @HostListener('click')
-    onClick()
-    {
-        this.fuseMdSidenavService.getSidenav(this.id).toggle();
-    }
-}

src/app/core/modules/material.module.ts

@@ -1,106 +1,108 @@
 import { NgModule } from '@angular/core';
 import {
-    MdAutocompleteModule,
+    MatAutocompleteModule,
-    MdButtonModule,
+    MatButtonModule,
-    MdButtonToggleModule,
+    MatButtonToggleModule,
-    MdCheckboxModule,
+    MatCheckboxModule,
-    MdToolbarModule,
+    MatToolbarModule,
-    MdTooltipModule,
+    MatTooltipModule,
-    MdCardModule,
+    MatCardModule,
-    MdChipsModule,
+    MatChipsModule,
-    MdCoreModule,
+    MatDatepickerModule,
-    MdDatepickerModule,
+    MatDialogModule,
-    MdDialogModule,
+    MatExpansionModule,
-    MdExpansionModule,
+    MatFormFieldModule,
-    MdGridListModule,
+    MatGridListModule,
-    MdIconModule,
+    MatIconModule,
-    MdInputModule,
+    MatInputModule,
-    MdListModule,
+    MatListModule,
-    MdMenuModule,
+    MatMenuModule,
-    MdNativeDateModule,
+    MatNativeDateModule,
-    MdPaginatorModule,
+    MatPaginatorModule,
-    MdProgressBarModule,
+    MatProgressBarModule,
-    MdProgressSpinnerModule,
+    MatProgressSpinnerModule,
-    MdRadioModule,
+    MatRadioModule,
-    MdRippleModule,
+    MatRippleModule,
-    MdSelectModule,
+    MatSelectModule,
-    MdSidenavModule,
+    MatSidenavModule,
-    MdSliderModule,
+    MatSliderModule,
-    MdSlideToggleModule,
+    MatSlideToggleModule,
-    MdSnackBarModule,
+    MatSnackBarModule,
-    MdSortModule,
+    MatSortModule,
-    MdTableModule,
+    MatTableModule,
-    MdTabsModule
+    MatTabsModule,
+    MatStepperModule
 } from '@angular/material';
 import { CdkTableModule } from '@angular/cdk/table';
 
 @NgModule({
     imports: [
-        MdAutocompleteModule,
+        MatAutocompleteModule,
-        MdButtonModule,
+        MatButtonModule,
-        MdButtonToggleModule,
+        MatButtonToggleModule,
-        MdCardModule,
+        MatCardModule,
-        MdCheckboxModule,
+        MatCheckboxModule,
-        MdChipsModule,
+        MatChipsModule,
-        MdCoreModule,
+        MatDatepickerModule,
-        MdDatepickerModule,
+        MatDialogModule,
-        MdDialogModule,
+        MatExpansionModule,
-        MdExpansionModule,
+        MatFormFieldModule,
-        MdGridListModule,
+        MatGridListModule,
-        MdIconModule,
+        MatIconModule,
-        MdInputModule,
+        MatInputModule,
-        MdListModule,
+        MatListModule,
-        MdMenuModule,
+        MatMenuModule,
-        MdNativeDateModule,
+        MatNativeDateModule,
-        MdPaginatorModule,
+        MatPaginatorModule,
-        MdProgressBarModule,
+        MatProgressBarModule,
-        MdProgressSpinnerModule,
+        MatProgressSpinnerModule,
-        MdRadioModule,
+        MatRadioModule,
-        MdRippleModule,
+        MatRippleModule,
-        MdSelectModule,
+        MatSelectModule,
-        MdSidenavModule,
+        MatSidenavModule,
-        MdSliderModule,
+        MatSliderModule,
-        MdSlideToggleModule,
+        MatSlideToggleModule,
-        MdSnackBarModule,
+        MatSnackBarModule,
-        MdSortModule,
+        MatStepperModule,
-        MdTableModule,
+        MatSortModule,
-        MdTabsModule,
+        MatTableModule,
-        MdToolbarModule,
+        MatTabsModule,
-        MdTooltipModule,
+        MatToolbarModule,
+        MatTooltipModule,
         CdkTableModule
     ],
     exports: [
-        MdAutocompleteModule,
+        MatAutocompleteModule,
-        MdButtonModule,
+        MatButtonModule,
-        MdButtonToggleModule,
+        MatButtonToggleModule,
-        MdCardModule,
+        MatCardModule,
-        MdCheckboxModule,
+        MatCheckboxModule,
-        MdChipsModule,
+        MatChipsModule,
-        MdCoreModule,
+        MatDatepickerModule,
-        MdDatepickerModule,
+        MatDialogModule,
-        MdDialogModule,
+        MatExpansionModule,
-        MdExpansionModule,
+        MatGridListModule,
-        MdGridListModule,
+        MatIconModule,
-        MdIconModule,
+        MatInputModule,
-        MdInputModule,
+        MatListModule,
-        MdListModule,
+        MatMenuModule,
-        MdMenuModule,
+        MatNativeDateModule,
-        MdNativeDateModule,
+        MatPaginatorModule,
-        MdPaginatorModule,
+        MatProgressBarModule,
-        MdProgressBarModule,
+        MatProgressSpinnerModule,
-        MdProgressSpinnerModule,
+        MatRadioModule,
-        MdRadioModule,
+        MatRippleModule,
-        MdRippleModule,
+        MatSelectModule,
-        MdSelectModule,
+        MatSidenavModule,
-        MdSidenavModule,
+        MatSliderModule,
-        MdSliderModule,
+        MatSlideToggleModule,
-        MdSlideToggleModule,
+        MatSnackBarModule,
-        MdSnackBarModule,
+        MatStepperModule,
-        MdSortModule,
+        MatSortModule,
-        MdTableModule,
+        MatTableModule,
-        MdTabsModule,
+        MatTabsModule,
-        MdToolbarModule,
+        MatToolbarModule,
-        MdTooltipModule,
+        MatTooltipModule,
         CdkTableModule
     ]
 })

src/app/core/modules/shared.module.ts

@@ -8,24 +8,24 @@ import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
-import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
+import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
-import { Md2Module } from 'md2';
 import { CookieService } from 'ngx-cookie-service';
+import { MarkdownModule } from 'angular2-markdown';
 
 @NgModule({
     declarations   : [
-        FuseMdSidenavHelperDirective,
+        FuseMatSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
         FuseHljsComponent,
@@ -43,15 +43,15 @@ import { CookieService } from 'ngx-cookie-service';
         ColorPickerModule,
         NgxDnDModule,
         NgxDatatableModule,
-        Md2Module
+        MarkdownModule
     ],
     exports        : [
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
         FormsModule,
-        FuseMdSidenavHelperDirective,
+        FuseMatSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
         FuseHljsComponent,
@@ -62,7 +62,7 @@ import { CookieService } from 'ngx-cookie-service';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        Md2Module
+        MarkdownModule
     ],
     entryComponents: [
         FuseConfirmDialogComponent
@@ -71,7 +71,7 @@ import { CookieService } from 'ngx-cookie-service';
         CookieService,
         FuseMatchMedia,
         FuseNavbarVerticalService,
-        FuseMdSidenavHelperService
+        FuseMatSidenavHelperService
     ]
 })
 

src/app/core/scss/core.scss

@@ -3,7 +3,7 @@
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
 // Perfect scrollbar
-@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
 // Fuse
 @import "fuse";
 

src/app/core/scss/partials/_angular-material-fix.scss

@@ -1,3 +1,4 @@
+// Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
     .mat-button-ripple {
@@ -5,11 +6,12 @@
     }
 }
 
-md-sidenav-container {
+// Fix: "Sidenav opening with animations for the first time"
+mat-sidenav-container {
 
-    md-sidenav {
+    mat-sidenav {
 
-        &[md-is-locked-open].md-stop-transition {
+        &[mat-is-locked-open].mat-stop-transition {
             transition: none !important;
             transform: translate3d(0, 0, 0) !important;
             opacity: 0;
@@ -39,3 +41,21 @@ md-sidenav-container {
     .mat-drawer-content {
     }
 }
+
+// Fix: "Inconsistent font sizes across elements"
+.mat-input-wrapper {
+    font-size: 16px;
+}
+
+.mat-checkbox {
+    font-size: 16px;
+}
+
+.mat-radio-button {
+    font-size: 16px;
+}
+
+.mat-pseudo-checkbox-checked:after {
+    width: 14px;
+    height: 7px;
+}

src/app/core/scss/partials/_colors.scss

@@ -51,14 +51,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     // If the base text color is black...
     @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
 
-        &.secondary-text,
-        .secondary-text,
         .mat-icon,
-        .icon,
+        .icon {
-        .md2-datepicker-button {
             color: rgba(0, 0, 0, 0.54);
         }
 
+        &.secondary-text,
+        .secondary-text {
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
+
         &.hint-text,
         .hint-text,
         &.disabled-text,
@@ -80,8 +82,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     @else {
 
         .mat-icon,
-        .icon,
+        .icon {
-        .md2-datepicker-button {
             color: rgba(255, 255, 255, 1);
         }
 
@@ -111,49 +112,60 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 @mixin generateMaterialElementColors($contrastColor) {
 
     // If the contrast color is white...
-    $foreground: $mat-dark-theme-foreground;
+    $fuseForeground: (
+        base: white,
+        text: white,
+        hint-text: rgba(white, 0.5),
+        divider: rgba(white, 0.12),
+    );
 
     // If the contrast color is black...
     @if (rgba(black, 1) == rgba($contrastColor, 1)) {
-        $foreground: $mat-light-theme-foreground;
+
+        $fuseForeground: (
+            base: black,
+            hint-text: rgba(black, 0.38),
+            divider: rgba(black, 0.12),
+        );
     }
 
     // Native Input
     input[type="text"] {
-        color: mat-color($foreground, base);
+        color: map_get($fuseForeground, base);
     }
 
     // Input
     .mat-input-placeholder {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
     .mat-input-underline {
-        background-color: mat-color($foreground, divider);
+        background-color: map_get($fuseForeground, divider);
     }
 
     // Select
     .mat-select-trigger,
     .mat-select-arrow {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
     .mat-select-underline {
-        background-color: mat-color($foreground, divider);
+        background-color: map_get($fuseForeground, divider);
     }
 
     .mat-select-disabled .mat-select-value,
     .mat-select-arrow,
     .mat-select-trigger {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
-    .mat-select-content, .mat-select-panel-done-animating {
+    .mat-select-content,
-        background: mat-color($background, card);
+    .mat-select-panel-done-animating {
+        background: map_get($background, card);
     }
 
     .mat-select-value {
-        color: mat-color($foreground, text);
+        color: map_get($fuseForeground, text);
     }
 }
 
@@ -164,7 +176,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         background-color: $color !important;
     }
 
-    .md-#{$colorName}#{$hue}-bg {
+    .mat-#{$colorName}#{$hue}-bg {
         background-color: $color !important;
         color: $contrastColor !important;
 

src/app/core/scss/partials/_global.scss

@@ -1,6 +1,6 @@
 body {
 
-    > md-sidenav-container {
+    > mat-sidenav-container {
         height: 100%;
     }
 }

src/app/core/scss/partials/_icons.scss

@@ -1,5 +1,5 @@
 i,
-md-icon {
+mat-icon {
     color: rgba(0, 0, 0, 0.54);
     font-size: 24px;
     width: 24px;

src/app/core/scss/partials/_material.scss

@@ -46,14 +46,14 @@
         margin-top: 0;
         margin-bottom: 0;
     }
-    md-icon.status {
+    mat-icon.status {
         position: absolute;
         top: 28px;
         left: 28px;
     }
 }
 
-md-icon.status {
+mat-icon.status {
     border-radius: 50%;
 
     &.online {
@@ -116,7 +116,7 @@ md-icon.status {
         max-height: 48px;
         height: 48px;
 
-        md-icon {
+        mat-icon {
             margin: 0 16px 0 0;
         }
 
@@ -142,7 +142,7 @@ md-icon.status {
         }
     }
 
-    md-divider {
+    mat-divider {
         margin: 8px 0;
     }
 }
@@ -196,7 +196,7 @@ md-icon.status {
         background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
-        margin: 24px 24px 0 0;
+        margin: 12px;
         overflow: hidden;
 
         &.style-1 {
@@ -234,7 +234,7 @@ md-icon.status {
                 }
             }
 
-            md-divider {
+            mat-divider {
                 margin: 16px 32px;
             }
 

src/app/core/scss/partials/_navigation.scss

@@ -12,6 +12,7 @@
     }
 
     .nav-group {
+        display: block;
 
         > .group-title {
             position: relative;
@@ -103,7 +104,9 @@
 
                 > .nav-item {
 
-                    > .nav-link {
+                    > .nav-link,
+                    &.nav-group > .group-title,
+                    &.nav-group > .group-items > .nav-item > .nav-link {
                         padding-left: 56px;
                     }
 
@@ -111,7 +114,9 @@
 
                         > .nav-item {
 
-                            > .nav-link {
+                            > .nav-link,
+                            &.nav-group > .group-title,
+                            &.nav-group > .group-items > .nav-item > .nav-link {
                                 padding-left: 72px;
                             }
                         }

src/app/core/scss/partials/_page-layouts.scss

@@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex: 1;
                 background: none;
@@ -132,11 +132,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     min-width: 240px;
                     max-width: 240px;
                     height: auto;
-                    z-index: 2;
+                    z-index: 4;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         background: none;
                         box-shadow: none;
                     }
@@ -145,6 +145,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         height: $carded-header-height;
                         min-height: $carded-header-height;
                         max-height: $carded-header-height;
+
+                        @include media-breakpoint-down('sm') {
+                            height: $carded-header-height-sm;
+                            min-height: $carded-header-height-sm;
+                            max-height: $carded-header-height-sm;
+                        }
                     }
 
                     .content {
@@ -175,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                             height: $carded-header-height-without-toolbar;
                             min-height: $carded-header-height-without-toolbar;
                             max-height: $carded-header-height-without-toolbar;
+
+                            @include media-breakpoint-down('sm') {
+                                height: $carded-header-height-without-toolbar-sm;
+                                min-height: $carded-header-height-without-toolbar-sm;
+                                max-height: $carded-header-height-without-toolbar-sm;
+                            }
                         }
 
                         .content-card {
@@ -216,11 +228,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.left-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
@@ -238,12 +250,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.right-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
                     order: 999;
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
@@ -295,7 +307,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
 
                     > .mat-sidenav-content,
@@ -309,7 +321,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Inner Sidenav
             &.inner-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1;
 
                     .sidenav {
@@ -338,10 +350,9 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex-direction: column;
-                //flex-direction: row;
                 flex: 1;
                 background: none;
                 z-index: 2;
@@ -354,7 +365,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     z-index: 51;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         width: 220px;
                         min-width: 220px;
                         max-width: 220px;
@@ -440,7 +451,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
@@ -458,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto !important;
 
                     > .mat-sidenav-content,
@@ -483,7 +494,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
 
                     > .mat-sidenav-content,
                     > .mat-drawer-content {

src/app/core/scss/partials/_print.scss

@@ -4,8 +4,9 @@
 
 @media all {
 
-    /* Never show page break in normal view */
+    /* Never show page breaks in normal view */
-    .page-break {
+    .page-break-after,
+    .page-break-before {
         display: none;
     }
 
@@ -13,22 +14,30 @@
 
 @media print {
 
-    /* Page Styles */
+    /* html and body tweaks */
-    @page {
+    html, body {
-        //margin: 0.5cm;
+        height: auto !important;
+        overflow: initial !important;
     }
 
-    /* Page break */
+    /* Page breaks */
-    .page-break {
+    .page-break-after {
         display: block;
-        break-after: always;
         page-break-after: always;
+        position: relative;
+    }
+
+    .page-break-before {
+        display: block;
+        page-break-before: always;
+        position: relative;
     }
 
     /* General styles */
     fuse-root {
 
-        fuse-navbar,
+        fuse-navbar-vertical,
+        fuse-navbar-horizontal,
         fuse-toolbar,
         fuse-footer,
         fuse-quick-panel,
@@ -41,11 +50,16 @@
         .ps {
             overflow: visible !important;
         }
-    }
 
-    /* Printable page specific styles */
+        .mat-drawer-container,
-    .printable {
+        .mat-sidenav-container {
-        overflow: visible !important;
+            background-color: white !important;
-        height: auto !important;
+
+            .mat-drawer-content,
+            .mat-sidenav-content {
+                overflow: initial !important;
+                height: auto !important
+            }
+        }
     }
 }

src/app/core/scss/partials/_reset.scss

@@ -28,7 +28,7 @@ html, body {
 }
 
 // Reset non angular-material input's default browser/os styles
-*:not(md-input-container) {
+*:not(mat-input-container) {
 
     > input {
         border: none;
@@ -55,7 +55,7 @@ html, body {
     }
 }
 
-*:not(md-input-container) {
+*:not(mat-input-container) {
 
     > input[type="button"],
     > button,

src/app/core/scss/partials/plugins/_perfect-scrollbar.scss

@@ -1,11 +1,12 @@
 .ps {
     position: relative;
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-x {
         z-index: 99999;
     }
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-y {
         z-index: 99999;
+        left: auto !important;
     }
 }

src/app/core/scss/partials/plugins/_plugins.scss

@@ -1,4 +1,5 @@
 @import "highlight";
+@import "prism";
 @import "perfect-scrollbar";
 @import "ngx-datatable";
 @import "ngx-color-picker";

src/app/core/scss/partials/plugins/_prism.scss

@@ -0,0 +1,269 @@
+// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
+
+$base00: #263238;
+$base01: #2C393F;
+$base02: #37474F;
+$base03: #707880;
+$base04: #C9CCD3;
+$base05: #CDD3DE;
+$base06: #D5DBE5;
+$base07: #FFFFFF;
+$base08: #EC5F67;
+$base09: #EA9560;
+$base0A: #FFCC00;
+$base0B: #8BD649;
+$base0C: #80CBC4;
+$base0D: #89DDFF;
+$base0E: #82AAFF;
+$base0F: #EC5F67;
+
+$red: $base08;
+$orange: $base09;
+$yellow: $base0A;
+$green: $base0B;
+$cyan: $base0C;
+$blue: $base0D;
+$violet: $base0E;
+$magenta: $base0F;
+
+$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+$code-font-size: 14px;
+$code-line-height: 1.6;
+$code-background: $base00;
+$code-color: $base05;
+$code-color-fade: $base05;
+// $code-text-shadow: none; 
+$code-color-comment: $base02;
+$code-color-keyword: $base0B;
+$code-color-value: $base0C;
+$code-color-attr-name: $base09;
+$code-color-string: $base0C;
+$code-color-name: $base0A;
+$code-color-number: $base09;
+$code-color-variable: $base0D;
+$code-color-selector: $base0E;
+$code-color-property: $base0A;
+$code-color-important: $base08;
+$code-color-tag: $base0D;
+$code-color-atrule: $base0C;
+
+// @import "../partials/prism"; 
+/**
+ * Prism base code highlighter theme using Sass 
+ *
+ * @author @MoOx
+ * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
+ * slightly adapted by me, Bram de Haan
+ */
+
+// prism selector
+$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
+$code-selector-block: "pre[class*=\"language-\"]";
+$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
+
+// generic stuff
+$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
+$code-font-size: 14px !default;
+$code-line-height: 1.6 !default;
+
+$code-tab-size: 4 !default;
+$code-hyphens: none !default;
+
+$code-block-padding: 12px !default;
+$code-inline-padding: 2px 6px !default;
+$code-border-radius: 0 !default;
+
+$code-border: none !default;
+$code-background: #2A2A2A !default;
+$code-color: #FFF !default;
+$code-color-fade: #BEBEC5 !default;
+// $code-text-shadow: 0 1px 0 #000 !default;
+$code-box-shadow: none !default;
+$code-color-property: #B58900 !default;
+$code-color-important: #CB4B16 !default;
+$code-color-tag: #268BD2 !default;
+$code-color-atrule: #2AA198 !default;
+$code-color-attr-name: #B65611 !default;
+
+// $code-linenums-padding:		7px !default;
+// $code-linenums-width: 			40px !default;
+// $code-linenums-background:		#444 !default;
+// $code-linenums-border-color:	#555 !default;
+// $code-linenums-border-width:	1px !default;
+
+@if $code-selector != null {
+    #{$code-selector} {
+        -moz-tab-size: $code-tab-size;
+        -o-tab-size: $code-tab-size;
+        tab-size: $code-tab-size;
+
+        -webkit-hyphens: $code-hyphens;
+        -moz-hyphens: $code-hyphens;
+        -ms-hyphens: $code-hyphens;
+        hyphens: $code-hyphens;
+
+        // whitespace management
+        white-space: pre; // fallback
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+
+        font-family: $code-font-family;
+        font-size: $code-font-size;
+        line-height: $code-line-height;
+
+        color: $code-color;
+        // text-shadow: $code-text-shadow;
+        background: $code-background;
+    }
+}
+
+%code-background {
+    border-radius: $code-border-radius;
+    border: $code-border;
+    box-shadow: $code-box-shadow;
+}
+
+@if $code-selector-block != null {
+    #{$code-selector-block} {
+        @extend %code-background;
+        padding: $code-block-padding;
+    }
+}
+
+@if $code-selector-inline != null {
+    #{$code-selector-inline} {
+        @extend %code-background;
+        padding: $code-inline-padding;
+    }
+}
+
+// pre[class*="language-"],
+// :not(pre) > code[class*="language-"] {
+// 	background: $code-background;
+// }
+
+// prism tokens
+// 
+$code-color-comment: null !default;
+$code-color-keyword: null !default;
+$code-color-value: null !default;
+$code-color-string: null !default;
+$code-color-name: null !default;
+$code-color-number: null !default;
+$code-color-variable: null !default;
+$code-color-selector: null !default;
+$code-color-punctuation: $code-color-fade !default;
+
+#{$code-selector} {
+    .namespace {
+        opacity: .7;
+    }
+
+    .token {
+        &.comment,
+        &.prolog,
+        &.doctype,
+        &.cdata {
+            color: $code-color-comment;
+        }
+
+        &.null,
+        &.operator,
+        &.boolean,
+        &.number {
+            color: $code-color-number;
+        }
+
+        &.string {
+            color: $code-color-string;
+        }
+        &.attr-name {
+            color: $code-color-attr-name;
+        }
+
+        &.entity,
+        &.url,
+        .language-css &.string,
+        .style &.string {
+            color: $code-color-string;
+        }
+
+        &.selector {
+            color: $code-color-selector;
+        }
+
+        &.attr-value,
+        &.keyword,
+        &.control,
+        &.directive,
+        &.unit {
+            color: $code-color-keyword;
+        }
+        &.important {
+            color: $code-color-important;
+        }
+        &.atrule {
+            color: $code-color-atrule;
+        }
+
+        &.regex,
+        &.statement {
+            color: $code-color-value;
+        }
+
+        &.placeholder,
+        &.variable {
+            color: $code-color-variable;
+        }
+
+        &.property,
+        &.tag {
+            // font-style: italic;
+        }
+
+        &.property {
+            color: $code-color-property;
+        }
+        &.tag {
+            color: $code-color-tag;
+        }
+
+        &.important,
+        &.statement {
+            font-weight: bold;
+        }
+
+        // todo ?
+        // &.mixin
+        // &.gradient
+        // &.abslength
+        // &.easing
+        // &.time
+        // &.angle
+        // &.fontfamily
+
+        // ruby/vim https://github.com/LeaVerou/prism/pull/18
+        // &.inst-var
+        // &.builtin
+        // &.const
+        // &.symbol
+        //
+        // php https://github.com/LeaVerou/prism/pull/20
+        // &.deliminator
+        // &.function
+
+        &.punctuation {
+            color: $code-color-punctuation;
+        }
+
+        &.entity {
+            cursor: help;
+        }
+
+        // for dev :)
+        &.debug {
+            color: red
+        }
+    }
+}

src/app/core/services/config.service.ts

@@ -28,12 +28,12 @@ export class FuseConfigService
                 mode      : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
-                toolbar: 'md-white-500-bg',
+                toolbar: 'mat-white-500-bg',
-                navbar : 'md-fuse-dark-500-bg',
+                navbar : 'mat-fuse-dark-700-bg',
-                footer : 'md-fuse-dark-700-bg'
+                footer : 'mat-fuse-dark-900-bg'
             },
             customScrollbars: true,
-            routerAnimation : 'fadeIn'
+            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
         };
 
         /**

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

@@ -0,0 +1,61 @@
+export class FaqFakeDb
+{
+    public static data = [
+        {
+            'question': 'Proident tempor est nulla irure ad est?',
+            'answer': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.'
+        },
+        {
+            'question': 'Ullamco duis commodo sint ad aliqua aute?',
+            'answer': 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.'
+        },
+        {
+            'question': 'Eiusmod non occaecat pariatur Lorem in ex?',
+            'answer': 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.'
+        },
+        {
+            'question': 'Lorem magna cillum consequat consequat mollit?',
+            'answer': 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.'
+        },
+        {
+            'question': 'Quis irure cupidatat ad consequat reprehenderit excepteur?',
+            'answer': 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.'
+        },
+        {
+            'question': 'Officia voluptate tempor ut mollit ea cillum?',
+            'answer': 'Deserunt veniam reprehenderit do elit magna ut.'
+        },
+        {
+            'question': 'Sunt fugiat officia nisi minim sunt duis?',
+            'answer': 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.'
+        },
+        {
+            'question': 'Non cupidatat enim quis aliquip minim laborum?',
+            'answer': 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.'
+        },
+        {
+            'question': 'Dolor ex occaecat magna labore laboris qui?',
+            'answer': 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.'
+        },
+        {
+            'question': 'Nisi et ullamco minim ea proident tempor?',
+            'answer': 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.'
+        },
+        {
+            'question': 'Amet sunt et quis amet commodo quis?',
+            'answer': 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.'
+        },
+        {
+            'question': 'Ut eiusmod ex ea eiusmod culpa incididunt?',
+            'answer': 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.'
+        },
+        {
+            'question': 'Proident reprehenderit laboris pariatur ut et nisi?',
+            'answer': 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.'
+        },
+        {
+            'question': 'Aliqua aliquip aliquip aliquip et exercitation aute?',
+            'answer': 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.'
+        }
+    ];
+}

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

@@ -13,6 +13,7 @@ import { QuickPanelFakeDb } from './quick-panel';
 import { IconsFakeDb } from './icons';
 import { ProjectsDashboardDb } from './projects-dashboard';
 import { ScrumboardFakeDb } from './scrumboard';
+import { FaqFakeDb } from './faq';
 
 export class FuseFakeDbService implements InMemoryDbService
 {
@@ -44,7 +45,8 @@ export class FuseFakeDbService implements InMemoryDbService
             'icons'                      : IconsFakeDb.icons,
             'projects-dashboard-projects': ProjectsDashboardDb.projects,
             'projects-dashboard-widgets' : ProjectsDashboardDb.widgets,
-            'scrumboard-boards'          : ScrumboardFakeDb.boards
+            'scrumboard-boards'          : ScrumboardFakeDb.boards,
+            'faq'                        : FaqFakeDb.data
         };
     }
 }

src/app/fuse-fake-db/projects-dashboard.ts

@@ -1622,7 +1622,7 @@ export class ProjectsDashboardDb
                     [
                         {
                             'value'  : 'Wireframing',
-                            'classes': 'md-primary-bg',
+                            'classes': 'mat-primary-bg',
                             'icon'   : ''
                         },
                         {
@@ -1654,7 +1654,7 @@ export class ProjectsDashboardDb
                     [
                         {
                             'value'  : 'Design',
-                            'classes': 'md-green-bg',
+                            'classes': 'mat-green-bg',
                             'icon'   : ''
                         },
                         {
@@ -1686,7 +1686,7 @@ export class ProjectsDashboardDb
                     [
                         {
                             'value'  : 'Coding',
-                            'classes': 'md-red-bg',
+                            'classes': 'mat-red-bg',
                             'icon'   : ''
                         },
                         {
@@ -1718,7 +1718,7 @@ export class ProjectsDashboardDb
                     [
                         {
                             'value'  : 'Marketing',
-                            'classes': 'md-accent-bg',
+                            'classes': 'mat-accent-bg',
                             'icon'   : ''
                         },
                         {
@@ -1750,7 +1750,7 @@ export class ProjectsDashboardDb
                     [
                         {
                             'value'  : 'Extra',
-                            'classes': 'md-orange-bg',
+                            'classes': 'mat-orange-bg',
                             'icon'   : ''
                         },
                         {

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

@@ -181,7 +181,7 @@ export class ScrumboardFakeDb
                             'time'    : '45 mins. ago'
                         }
                     ],
-                    'due'              : 'Tue Aug 29 2017 13:16:34 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2017-08-29T10:16:34.000Z'
                 },
                 {
                     'id'               : '5637273da9b93bb84743a0f9',
@@ -274,7 +274,7 @@ export class ScrumboardFakeDb
                         }
                     ],
                     'activities'       : [],
-                    'due'              : 'Fri Sep 07 2018 15:00:00 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2018-09-07T12:00:00.000Z'
                 },
                 {
                     'id'               : 'f6b9d7a9247e5d794a081927',
@@ -365,7 +365,7 @@ export class ScrumboardFakeDb
                     'checkItemsChecked': 0,
                     'comments'         : [],
                     'activities'       : [],
-                    'due'              : 'Wed Mar 08 2017 12:00:00 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2017-03-08T09:00:00.000Z'
                 },
                 {
                     'id'               : '80ed.24ad3b18e2668.f28fbbceeeff9.5a834620a42f1.5909be19a2bf2.6c4a54947ce2d.da356b0c1',
@@ -536,7 +536,7 @@ export class ScrumboardFakeDb
                     'checkItemsChecked': 3,
                     'comments'         : [],
                     'activities'       : [],
-                    'due'              : 'Fri Feb 02 2017 14:20:34 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2017-02-02T11:20:34.000Z'
                 }
             ],
             'members' : [
@@ -565,22 +565,22 @@ export class ScrumboardFakeDb
                 {
                     'id'   : '26022e4129ad3a5sc28b36cd',
                     'name' : 'High Priority',
-                    'color': 'md-red-500-bg'
+                    'color': 'mat-red-500-bg'
                 },
                 {
                     'id'   : '56027e4119ad3a5dc28b36cd',
                     'name' : 'Design',
-                    'color': 'md-orange-400-bg'
+                    'color': 'mat-orange-400-bg'
                 },
                 {
                     'id'   : '5640635e19ad3a5dc21416b2',
                     'name' : 'App',
-                    'color': 'md-blue-600-bg'
+                    'color': 'mat-blue-600-bg'
                 },
                 {
                     'id'   : '6540635g19ad3s5dc31412b2',
                     'name' : 'Feature',
-                    'color': 'md-green-400-bg'
+                    'color': 'mat-green-400-bg'
                 }
             ]
         },
@@ -769,17 +769,17 @@ export class ScrumboardFakeDb
                 {
                     'id'   : '56027e4119ad3a5dc28b36cd',
                     'name' : 'Design',
-                    'color': 'md-red-500-bg'
+                    'color': 'mat-red-500-bg'
                 },
                 {
                     'id'   : '5640635e19ad3a5dc21416b2',
                     'name' : 'App',
-                    'color': 'md-blue-500-bg'
+                    'color': 'mat-blue-500-bg'
                 },
                 {
                     'id'   : '6540635g19ad3s5dc31412b2',
                     'name' : 'Feature',
-                    'color': 'md-green-400-bg'
+                    'color': 'mat-green-400-bg'
                 }
             ]
         }

src/app/main/content/apps/calendar/calendar.component.html

@@ -9,7 +9,7 @@
 
                 <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
 
-                    <md-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</md-icon>
+                    <mat-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</mat-icon>
 
                     <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span>
 
@@ -18,32 +18,32 @@
                 <!-- TOOLBAR -->
                 <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
 
-                    <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
+                    <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
-                        <md-icon>search</md-icon>
+                        <mat-icon>search</mat-icon>
                     </button>
 
-                    <button md-button class="mat-icon-button"
+                    <button mat-button class="mat-icon-button"
                             mwlCalendarToday
                             [(viewDate)]="viewDate"
                             (viewDateChange)="selectedDay = {date:$event}"
-                            aria-label="Today" md-tooltip="Today">
+                            aria-label="Today" matTooltip="Today">
                         <!--(click)="selectedDay = viewDate"-->
-                        <md-icon>today</md-icon>
+                        <mat-icon>today</mat-icon>
                     </button>
 
-                    <button md-button class="mat-icon-button" (click)="view='day'"
+                    <button mat-button class="mat-icon-button" (click)="view='day'"
-                            aria-label="Day" md-tooltip="Day">
+                            aria-label="Day" matTooltip="Day">
-                        <md-icon>view_day</md-icon>
+                        <mat-icon>view_day</mat-icon>
                     </button>
 
-                    <button md-button class="mat-icon-button" (click)="view='week'"
+                    <button mat-button class="mat-icon-button" (click)="view='week'"
-                            aria-label="Week" md-tooltip="Week">
+                            aria-label="Week" matTooltip="Week">
-                        <md-icon>view_week</md-icon>
+                        <mat-icon>view_week</mat-icon>
                     </button>
 
-                    <button md-button class="mat-icon-button" (click)="view='month'"
+                    <button mat-button class="mat-icon-button" (click)="view='month'"
-                            aria-label="Month" md-tooltip="Month">
+                            aria-label="Month" matTooltip="Month">
-                        <md-icon>view_module</md-icon>
+                        <mat-icon>view_module</mat-icon>
                     </button>
                 </div>
             </div>
@@ -53,35 +53,35 @@
             <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
                  *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">
 
-                <button md-button class="mat-icon-button arrow"
+                <button mat-button class="mat-icon-button arrow"
                         mwlCalendarPreviousView
                         [view]="view"
                         [(viewDate)]="viewDate"
                         (viewDateChange)="selectedDay = {date:$event}"
                         aria-label="Previous">
-                    <md-icon>chevron_left</md-icon>
+                    <mat-icon>chevron_left</mat-icon>
                 </button>
 
                 <div class="title">
                     {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
                 </div>
 
-                <button md-button class="mat-icon-button arrow"
+                <button mat-button class="mat-icon-button arrow"
                         mwlCalendarNextView
                         [view]="view"
                         [(viewDate)]="viewDate"
                         (viewDateChange)="selectedDay = {date:$event}"
                         aria-label="Next">
-                    <md-icon>chevron_right</md-icon>
+                    <mat-icon>chevron_right</mat-icon>
                 </button>
             </div>
             <!-- / HEADER BOTTOM -->
         </div>
 
         <!-- ADD EVENT BUTTON -->
-        <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
+        <button mat-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
                 *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
-            <md-icon>add</md-icon>
+            <mat-icon>add</mat-icon>
         </button>
         <!-- / ADD EVENT BUTTON -->
     </div>

src/app/main/content/apps/calendar/calendar.component.scss

@@ -303,7 +303,7 @@
             z-index: 10;
         }
 
-        md-icon {
+        mat-icon {
             color: #FFFFFF;
         }
     }

src/app/main/content/apps/calendar/calendar.component.ts

@@ -1,7 +1,7 @@
 import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
-import { MdDialog, MdDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material';
 import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
 import { FormGroup } from '@angular/forms';
 import { CalendarEventModel } from './event.model';
@@ -38,12 +38,12 @@ export class FuseCalendarComponent implements OnInit
 
     dialogRef: any;
 
-    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
+    confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
 
     selectedDay: any;
 
     constructor(
-        public dialog: MdDialog,
+        public dialog: MatDialog,
         public calendarService: CalendarService
     )
     {

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

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
 import { Subject } from 'rxjs/Subject';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class CalendarService implements Resolve<any>
@@ -10,7 +10,7 @@ export class CalendarService implements Resolve<any>
     events: any;
     onEventsUpdated = new Subject<any>();
 
-    constructor(private http: Http)
+    constructor(private http: HttpClient)
     {
 
     }
@@ -34,8 +34,8 @@ export class CalendarService implements Resolve<any>
         return new Promise((resolve, reject) => {
 
             this.http.get('api/calendar/events')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.events = response.json().data.data;
+                    this.events = response.data;
                     this.onEventsUpdated.next(this.events);
                     resolve(this.events);
                 }, reject);
@@ -49,7 +49,7 @@ export class CalendarService implements Resolve<any>
                 id  : 'events',
                 data: [...events]
             })
-                .subscribe(response => {
+                .subscribe((response: any) => {
                     this.getEvents();
                 }, reject);
         });

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -1,40 +1,40 @@
 <div class="dialog-content-wrapper">
-    <md-toolbar md-dialog-title class="mat-accent m-0">
+    <mat-toolbar matDialogTitle class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
-            <button md-button class="mat-icon-button"
+            <button mat-button class="mat-icon-button"
                     (click)="dialogRef.close()"
                     aria-label="Close dialog">
-                <md-icon>close</md-icon>
+                <mat-icon>close</mat-icon>
             </button>
         </div>
-    </md-toolbar>
+    </mat-toolbar>
 
-    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
         <form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
 
-            <md-input-container class="w-100-p">
+            <mat-form-field class="w-100-p">
-                <input mdInput
+                <input matInput
                        name="title"
                        formControlName="title"
                        placeholder="Title"
                        required>
-            </md-input-container>
+            </mat-form-field>
 
             <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
-                <md-slide-toggle
+                <mat-slide-toggle
                     name="allDay"
                     formControlName="allDay"
                     class="mr-24"
                     aria-label="All day">
                     All Day
-                </md-slide-toggle>
+                </mat-slide-toggle>
             </div>
 
             <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
-                <md-input-container class="mr-24" fxFlex>
+                <mat-form-field class="mr-24" fxFlex>
-                    <input mdInput
+                    <input matInput
                            name="primary color"
                            formControlName="primary"
                            placeholder="Primary color"
@@ -43,9 +43,9 @@
                            [cpPresetColors]="presetColors"
                            [style.background]="event.color.primary"
                            (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
-                </md-input-container>
+                </mat-form-field>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input mdInput
+                    <input matInput
                            name="secondary color"
                            formControlName="secondary"
                            placeholder="Secondary color"
@@ -54,62 +54,66 @@
                            [cpPresetColors]="presetColors"
                            [style.background]="event.color.secondary"
                            (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div fxFlex="1 0 auto" fxLayout="row">
 
-                <md-form-field class="mr-24" fxFlex>
+                <mat-form-field class="mr-24" fxFlex>
-                    <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
+                    <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
-                    <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
+                           name="start"
-                    <md-datepicker #startDatePicker></md-datepicker>
+                           formControlName="start">
-                </md-form-field>
+                    <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+                    <mat-datepicker #startDatePicker></mat-datepicker>
+                </mat-form-field>
 
-                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                <mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
-                    <input mdInput placeholder="Start Time">
+                    <input matInput placeholder="Start Time">
-                </md-input-container>
+                </mat-form-field>
 
             </div>
 
             <div fxFlex="1 0 auto" fxLayout="row">
 
-                <md-form-field class="mr-24" fxFlex>
+                <mat-form-field class="mr-24" fxFlex>
-                    <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
+                    <input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
-                    <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
+                           name="end"
-                    <md-datepicker #endDatePicker></md-datepicker>
+                           formControlName="end">
-                </md-form-field>
+                    <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+                    <mat-datepicker #endDatePicker></mat-datepicker>
+                </mat-form-field>
 
-                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                <mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
-                    <input mdInput placeholder="End Time">
+                    <input matInput placeholder="End Time">
-                </md-input-container>
+                </mat-form-field>
 
             </div>
 
-            <md-input-container formGroupName="meta" class="w-100-p">
+            <mat-form-field formGroupName="meta" class="w-100-p">
-                <input mdInput
+                <input matInput
                        name="location"
                        formControlName="location"
                        placeholder="Location">
-            </md-input-container>
+            </mat-form-field>
 
-            <md-input-container formGroupName="meta" class="w-100-p">
+            <mat-form-field formGroupName="meta" class="w-100-p">
 
-            <textarea mdInput
+            <textarea matInput
                       formControlName="notes"
                       placeholder="Notes"
-                      md-maxlength="250"
+                      mat-maxlength="250"
                       max-rows="4">
             </textarea>
-            </md-input-container>
+            </mat-form-field>
 
         </form>
 
     </div>
 
-    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
 
         <button *ngIf="action !=='edit'"
-                md-raised-button
+                mat-raised-button
                 (click)="dialogRef.close(eventForm)"
                 class="save-button mat-accent"
                 [disabled]="eventForm.invalid"
@@ -118,7 +122,7 @@
         </button>
 
         <button *ngIf="action ==='edit'"
-                md-raised-button
+                mat-raised-button
                 (click)="dialogRef.close(['save',eventForm])"
                 class="save-button mat-accent"
                 [disabled]="eventForm.invalid"
@@ -127,12 +131,12 @@
         </button>
 
         <button *ngIf="action ==='edit'"
-                md-button
+                mat-button
                 class="mat-icon-button"
                 (click)="dialogRef.close(['delete',eventForm])"
                 aria-label="Delete"
-                md-tooltip="Delete">
+                matTooltip="Delete">
-            <md-icon>delete</md-icon>
+            <mat-icon>delete</mat-icon>
         </button>
     </div>
 </div>

src/app/main/content/apps/calendar/event-form/event-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { CalendarEvent } from 'angular-calendar';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { CalendarEventModel } from '../event.model';
@@ -22,8 +22,8 @@ export class FuseCalendarEventFormDialogComponent implements OnInit
     presetColors = MatColors.presets;
 
     constructor(
-        public dialogRef: MdDialogRef<FuseCalendarEventFormDialogComponent>,
+        public dialogRef: MatDialogRef<FuseCalendarEventFormDialogComponent>,
-        @Inject(MD_DIALOG_DATA) private data: any,
+        @Inject(MAT_DIALOG_DATA) private data: any,
         private formBuilder: FormBuilder
     )
     {

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

@@ -3,7 +3,7 @@
     <div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
          *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
 
-        <md-icon class="s-64 s-md-128">chat</md-icon>
+        <mat-icon class="s-64 s-mat-128">chat</mat-icon>
 
     </div>
 
@@ -11,7 +11,7 @@
 
     <span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span>
 
-    <button md-raised-button fxHide.gt-md class="" fuseMdSidenavToggler="chat-left-sidenav">
+    <button mat-raised-button fxHide.gt-md class="" fuseMatSidenavToggler="chat-left-sidenav">
         Select contact to start the chat!..
     </button>
 

src/app/main/content/apps/chat/chat-start/chat-start.component.scss

@@ -19,7 +19,7 @@
             line-height: 160px;
         }
 
-        md-icon {
+        mat-icon {
             color: mat-color($accent);
         }
     }

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

@@ -2,23 +2,23 @@
 <div class="chat" fxFlex fxLayout="column">
 
     <!-- CHAT TOOLBAR -->
-    <md-toolbar class="chat-toolbar">
+    <mat-toolbar class="chat-toolbar">
 
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
 
             <div fxLayout="row" fxLayoutAlign="start center">
 
                 <!-- RESPONSIVE CHATS BUTTON-->
-                <div md-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16"
+                <div mat-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16"
-                     fuseMdSidenavToggler="chat-left-sidenav"
+                     fuseMatSidenavToggler="chat-left-sidenav"
                      aria-label="chats button">
-                    <md-icon class="s-36">chat</md-icon>
+                    <mat-icon class="s-36">chat</mat-icon>
                 </div>
                 <!-- / RESPONSIVE CHATS BUTTON-->
 
                 <!-- CHAT CONTACT-->
                 <div class="chat-contact" fxLayout="row" fxLayoutAlign="start center"
-                     fuseMdSidenavToggler="chat-right-sidenav" (click)="selectContact()">
+                     fuseMatSidenavToggler="chat-right-sidenav" (click)="selectContact()">
 
                     <div class="avatar-wrapper">
 
@@ -26,9 +26,9 @@
                              class="avatar"
                              alt="{{contact.name}}"/>
 
-                        <md-icon class="s-16 status"
+                        <mat-icon class="s-16 status"
                                   [ngClass]="contact.status">
-                        </md-icon>
+                        </mat-icon>
                     </div>
 
                     <div class="chat-contact-name">
@@ -40,20 +40,20 @@
             </div>
 
             <div>
-                <button md-button class="mat-icon-button" [mdMenuTriggerFor]="contactMenu"
+                <button mat-button class="mat-icon-button" [matMenuTriggerFor]="contactMenu"
                         aria-label="more">
-                    <md-icon>more_vert</md-icon>
+                    <mat-icon>more_vert</mat-icon>
                 </button>
 
-                <md-menu #contactMenu="mdMenu">
+                <mat-menu #contactMenu="matMenu">
-                    <button md-menu-item fuseMdSidenavToggler="chat-right-sidenav" (click)="selectContact()">
+                    <button mat-menu-item fuseMatSidenavToggler="chat-right-sidenav" (click)="selectContact()">
                         Contact Info
                     </button>
-                </md-menu>
+                </mat-menu>
             </div>
 
         </div>
-    </md-toolbar>
+    </mat-toolbar>
     <!-- / CHAT TOOLBAR -->
 
     <!-- CHAT CONTENT -->
@@ -98,13 +98,13 @@
               fxLayout="row"
               fxLayoutAlign="start center">
 
-            <md-input-container class="" fxFlex floatPlaceholder="never">
+            <mat-form-field class="" fxFlex floatPlaceholder="never">
-                <textarea mdInput #replyInput placeholder="Type and hit enter to send message"
+                <textarea matInput #replyInput placeholder="Type and hit enter to send message"
                           ngModel name="message"></textarea>
-            </md-input-container>
+            </mat-form-field>
 
-            <button md-fab class="" type="submit" aria-label="Send message">
+            <button mat-fab class="" type="submit" aria-label="Send message">
-                <md-icon>send</md-icon>
+                <mat-icon>send</mat-icon>
             </button>
 
         </form>

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

@@ -32,6 +32,7 @@
 
         #chat-content {
             background: transparent;
+            overflow: auto;
 
             .message-row {
                 padding: 16px;
@@ -107,7 +108,7 @@
 
             .reply-form {
 
-                md-input-container {
+                mat-form-field {
                     margin: 0;
                     padding-right: 16px;
 
@@ -120,12 +121,12 @@
                         }
                     }
 
-                    .md-errors-spacer {
+                    .mat-errors-spacer {
                         display: none;
                     }
                 }
 
-                .md-button {
+                .mat-button {
                     margin: 0;
                 }
             }

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

@@ -1,7 +1,7 @@
 <div id="chat" class="page-layout carded fullwidth">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg md-accent-bg"></div>
+    <div class="top-bg mat-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <!-- CENTER -->
@@ -10,13 +10,13 @@
         <!-- CONTENT CARD -->
         <div class="content-card">
 
-            <md-sidenav-container>
+            <mat-sidenav-container>
 
                 <!-- LEFT SIDENAV -->
-                <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
-                            fuseMdSidenavHelper="chat-left-sidenav" md-is-locked-open="gt-md">
+                             fuseMatSidenavHelper="chat-left-sidenav" mat-is-locked-open="gt-md">
                     <fuse-chat-left-sidenav></fuse-chat-left-sidenav>
-                </md-sidenav>
+                </mat-sidenav>
                 <!-- / LEFT SIDENAV -->
 
                 <!-- CONTENT -->
@@ -26,13 +26,13 @@
                 <!-- / CONTENT -->
 
                 <!-- RIGHT SIDENAV -->
-                <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="false" mode="over"
+                <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="false" mode="over"
-                            fuseMdSidenavHelper="chat-right-sidenav">
+                             fuseMatSidenavHelper="chat-right-sidenav">
                     <fuse-chat-right-sidenav></fuse-chat-right-sidenav>
-                </md-sidenav>
+                </mat-sidenav>
                 <!-- / RIGHT SIDENAV -->
 
-            </md-sidenav-container>
+            </mat-sidenav-container>
 
         </div>
         <!-- / CONTENT CARD -->

src/app/main/content/apps/chat/chat.component.scss

@@ -37,7 +37,7 @@
                     max-width: 100%;
                 }
 
-                md-sidenav {
+                mat-sidenav {
                     display: flex;
                     flex-direction: column;
                     width: 400px;

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Subject } from 'rxjs/Subject';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { FuseUtils } from '../../../../core/fuseUtils';
@@ -19,7 +19,7 @@ export class ChatService implements Resolve<any>
     onLeftSidenavViewChanged = new Subject<any>();
     onRightSidenavViewChanged = new Subject<any>();
 
-    constructor(private http: Http)
+    constructor(private http: HttpClient)
     {
     }
 
@@ -47,8 +47,8 @@ export class ChatService implements Resolve<any>
 
         return new Promise((resolve, reject) => {
             this.http.get('api/chat-chats/' + chatItem.id)
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    const chat = response.json().data;
+                    const chat = response;
 
                     const chatContact = this.contacts.find((contact) => {
                         return contact.id === contactId;
@@ -105,7 +105,7 @@ export class ChatService implements Resolve<any>
              * Post the created chat
              */
             this.http.post('api/chat-chats', {...chat})
-                .subscribe(response => {
+                .subscribe((response: any) => {
 
                     /**
                      * Post the new the user data
@@ -150,7 +150,7 @@ export class ChatService implements Resolve<any>
     updateUserData(userData)
     {
         this.http.post('api/chat-user/' + this.user.id, userData)
-            .subscribe(response => {
+            .subscribe((response: any) => {
                     this.user = userData;
                 }
             );
@@ -211,8 +211,8 @@ export class ChatService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/chat-contacts')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    resolve(response.json().data);
+                    resolve(response);
                 }, reject);
         });
     }
@@ -225,8 +225,8 @@ export class ChatService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/chat-chats')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    resolve(response.json().data);
+                    resolve(response);
                 }, reject);
         });
     }
@@ -239,8 +239,8 @@ export class ChatService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/chat-user')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    resolve(response.json().data[0]);
+                    resolve(response[0]);
                 }, reject);
         });
     }

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html

@@ -1,7 +1,7 @@
 <!-- SIDENAV HEADER -->
 <div class="sidenav-header">
     <!-- CHATS TOOLBAR -->
-    <md-toolbar>
+    <mat-toolbar>
 
         <!-- TOOLBAR TOP -->
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@@ -12,75 +12,75 @@
                 <!-- USER AVATAR -->
                 <img (click)="changeLeftSidenavView('user')"
                      src="{{user.avatar}}"
-                     class="md-avatar avatar"
+                     class="mat-avatar avatar"
                      alt="{{user.name}}"/>
                 <!-- / USER AVATAR -->
 
-                <md-icon class="s-16 status" [ngClass]="user.status" [mdMenuTriggerFor]="userStatusMenu"></md-icon>
+                <mat-icon class="s-16 status" [ngClass]="user.status" [matMenuTriggerFor]="userStatusMenu"></mat-icon>
 
                 <!-- USER STATUS -->
-                <md-menu id="user-status-menu" #userStatusMenu="mdMenu">
+                <mat-menu id="user-status-menu" #userStatusMenu="matMenu">
 
-                    <button md-menu-item (click)="setUserStatus('online')">
+                    <button mat-menu-item (click)="setUserStatus('online')">
                         <div fxLayout="row" fxLayoutAlign="start center">
-                            <md-icon class="s-16 status online"></md-icon>
+                            <mat-icon class="s-16 status online"></mat-icon>
                             <span>Online</span>
                         </div>
                     </button>
 
-                    <button md-menu-item (click)="setUserStatus('away')">
+                    <button mat-menu-item (click)="setUserStatus('away')">
                         <div fxLayout="row" fxLayoutAlign="start center">
-                            <md-icon class="s-16 status away"></md-icon>
+                            <mat-icon class="s-16 status away"></mat-icon>
                             <span>Away</span>
                         </div>
                     </button>
 
-                    <button md-menu-item (click)="setUserStatus('do-not-disturb')">
+                    <button mat-menu-item (click)="setUserStatus('do-not-disturb')">
                         <div fxLayout="row" fxLayoutAlign="start center">
-                            <md-icon class="s-16 status do-not-disturb"></md-icon>
+                            <mat-icon class="s-16 status do-not-disturb"></mat-icon>
                             <span>Do not disturb</span>
                         </div>
                     </button>
 
-                    <button md-menu-item (click)="setUserStatus('offline')">
+                    <button mat-menu-item (click)="setUserStatus('offline')">
                         <div fxLayout="row" fxLayoutAlign="start center">
-                            <md-icon class="s-16 status offline"></md-icon>
+                            <mat-icon class="s-16 status offline"></mat-icon>
                             <span>Offline</span>
                         </div>
                     </button>
-                </md-menu>
+                </mat-menu>
                 <!-- / USER STATUS -->
 
             </div>
             <!-- / USER AVATAR -->
 
             <div>
-                <button md-button class="mat-icon-button"
+                <button mat-button class="mat-icon-button"
-                        [mdMenuTriggerFor]="userMenu"
+                        [matMenuTriggerFor]="userMenu"
                         aria-label="more">
-                    <md-icon>more_vert</md-icon>
+                    <mat-icon>more_vert</mat-icon>
                 </button>
-                <md-menu #userMenu="mdMenu">
+                <mat-menu #userMenu="matMenu">
-                    <button md-menu-item (click)="changeLeftSidenavView('user')">
+                    <button mat-menu-item (click)="changeLeftSidenavView('user')">
                         Profile
                     </button>
-                    <button md-menu-item (click)="logout()">
+                    <button mat-menu-item (click)="logout()">
                         Logout
                     </button>
-                </md-menu>
+                </mat-menu>
             </div>
         </div>
         <!-- / TOOLBAR TOP -->
 
         <!-- TOOLBAR BOTTOM -->
-        <md-toolbar-row>
+        <mat-toolbar-row>
 
             <!-- SEARCH -->
             <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
                 <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-                    <md-icon>search</md-icon>
+                    <mat-icon>search</mat-icon>
 
                     <input [(ngModel)]="searchText" type="text" placeholder="Search or start new chat" fxFlex>
 
@@ -88,10 +88,10 @@
             </div>
             <!-- / SEARCH -->
 
-        </md-toolbar-row>
+        </mat-toolbar-row>
         <!-- / TOOLBAR BOTTOM -->
 
-    </md-toolbar>
+    </mat-toolbar>
     <!-- / CHATS TOOLBAR -->
 
 </div>
@@ -106,11 +106,11 @@
         <!-- CHATS LIST-->
         <div class="chat-list" fxLayout="column">
 
-            <div md-subheader *ngIf="(user.chatList | filter: searchText).length > 0">
+            <div matSubheader *ngIf="(user.chatList | filter: searchText).length > 0">
                 Chats
             </div>
 
-            <button md-button class="contact"
+            <button mat-button class="contact"
                     *ngFor="let chat of user.chatList | filter: searchText"
                     (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}"
                     [@animate]="{value:'*',params:{y:'100%'}}">
@@ -121,7 +121,7 @@
                         <img [src]="contacts |getById:chat.contactId:'avatar'"
                              class="avatar"
                              alt="{{contacts |getById:chat.contactId:'name'}}"/>
-                        <md-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></md-icon>
+                        <mat-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></mat-icon>
                     </div>
 
                     <div fxLayout="row" fxFlex>
@@ -146,19 +146,19 @@
         <!-- CONTACTS LIST-->
         <div class="contact-list" fxLayout="column">
 
-            <div md-subheader *ngIf="(contacts| filter: searchText).length > 0">
+            <div matSubheader *ngIf="(contacts| filter: searchText).length > 0">
                 Contacts
             </div>
 
-            <button md-button class="contact"
+            <button mat-button class="contact"
                     *ngFor="let contact of contacts| filter: searchText"
                     (click)="getChat(contact.id)"
                     [@animate]="{value:'*',params:{y:'100%'}}">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
                     <div class="avatar-wrapper" fxFlex="0 1 auto">
-                        <img src="{{contact.avatar}}" class="md-avatar avatar" alt="{{contact.name}}"/>
+                        <img src="{{contact.avatar}}" class="mat-avatar avatar" alt="{{contact.name}}"/>
-                        <md-icon class="s-16 status" [ngClass]="contact.status"></md-icon>
+                        <mat-icon class="s-16 status" [ngClass]="contact.status"></mat-icon>
                     </div>
 
                     <div class="" fxLayout="column" fxLayoutAlign="center start">

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss

@@ -7,7 +7,7 @@
 
     .sidenav-header {
 
-        md-toolbar {
+        mat-toolbar {
             border-bottom: 1px solid rgba(0, 0, 0, .08);
 
             .avatar-wrapper {

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ChatService } from '../../../chat.service';
-import { FuseMdSidenavHelperService } from '../../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service';
+import { FuseMatSidenavHelperService } from '../../../../../../../core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
 import { ObservableMedia } from '@angular/flex-layout';
 import { fuseAnimations } from '../../../../../../../core/animations';
 
@@ -20,7 +20,7 @@ export class FuseChatChatsSidenavComponent implements OnInit
 
     constructor(
         private chatService: ChatService,
-        private fuseMdSidenavService: FuseMdSidenavHelperService,
+        private fuseMatSidenavService: FuseMatSidenavHelperService,
         public media: ObservableMedia
     )
     {
@@ -50,7 +50,7 @@ export class FuseChatChatsSidenavComponent implements OnInit
 
         if ( !this.media.isActive('gt-md') )
         {
-            this.fuseMdSidenavService.getSidenav('chat-left-sidenav').toggle();
+            this.fuseMatSidenavService.getSidenav('chat-left-sidenav').toggle();
         }
     }
 

src/app/main/content/apps/chat/sidenavs/left/user/user.component.html

@@ -2,29 +2,29 @@
 <div class="sidenav-header">
 
     <!-- USER TOOLBAR -->
-    <md-toolbar>
+    <mat-toolbar>
 
         <!-- TOOLBAR TOP -->
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
 
-            <button md-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
+            <button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
-                <md-icon>arrow_back</md-icon>
+                <mat-icon>arrow_back</mat-icon>
             </button>
 
         </div>
         <!-- / TOOLBAR TOP -->
 
         <!-- TOOLBAR BOTTOM -->
-        <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
+        <mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
 
             <img [src]="user.avatar" class="avatar user-avatar huge" alt="{{user.name}}"/>
 
             <div class="user-name my-8">{{user.name}}</div>
 
-        </md-toolbar-row>
+        </mat-toolbar-row>
         <!-- / TOOLBAR BOTTOM -->
 
-    </md-toolbar>
+    </mat-toolbar>
     <!-- / USER TOOLBAR -->
 </div>
 
@@ -32,47 +32,47 @@
 <div class="sidenav-content p-16" fusePerfectScrollbar fxFlex>
 
     <!-- USER MOOD -->
-    <md-card>
+    <mat-card>
 
         <form [formGroup]="userForm" fxLayout="column">
 
-            <md-input-container class="mb-24" fxFlex="0 1 auto">
+            <mat-form-field class="mb-24" fxFlex="0 1 auto">
-                <textarea mdInput placeholder="Mood" name="mood"
+                <textarea matInput placeholder="Mood" name="mood"
                           formControlName="mood" rows="3"></textarea>
-            </md-input-container>
+            </mat-form-field>
 
-            <md-radio-group formControlName="status" fxLayout="column">
+            <mat-radio-group formControlName="status" fxLayout="column">
 
-                <md-radio-button value="online" class="py-8">
+                <mat-radio-button value="online" class="py-8">
                     <div fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon class="status online mr-8"></md-icon>
+                        <mat-icon class="status online mr-8"></mat-icon>
                         <span class="mat-h4 m-0">Online</span>
                     </div>
-                </md-radio-button>
+                </mat-radio-button>
 
-                <md-radio-button value="away" class="py-8">
+                <mat-radio-button value="away" class="py-8">
                     <div fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon class="status away mr-8"></md-icon>
+                        <mat-icon class="status away mr-8"></mat-icon>
                         <span class="mat-h4 m-0">Away</span>
                     </div>
-                </md-radio-button>
+                </mat-radio-button>
 
-                <md-radio-button value="do-not-disturb" class="py-8">
+                <mat-radio-button value="do-not-disturb" class="py-8">
                     <div fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon class="status do-not-disturb mr-8"></md-icon>
+                        <mat-icon class="status do-not-disturb mr-8"></mat-icon>
                         <span class="mat-h4 m-0">Do not disturb</span>
                     </div>
-                </md-radio-button>
+                </mat-radio-button>
 
-                <md-radio-button value="offline" class="py-8">
+                <mat-radio-button value="offline" class="py-8">
                     <div fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon class="status offline mr-8"></md-icon>
+                        <mat-icon class="status offline mr-8"></mat-icon>
                         <span class="mat-h4 m-0">Offline</span>
                     </div>
-                </md-radio-button>
+                </mat-radio-button>
-            </md-radio-group>
+            </mat-radio-group>
 
         </form>
-    </md-card>
+    </mat-card>
     <!-- / USER MOOD -->
 </div>

src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss

@@ -5,7 +5,7 @@
     flex: 1;
     flex-direction: column;
 
-    md-toolbar {
+    mat-toolbar {
         background-color: mat-color($accent);
         color: map-get($accent, default-contrast);
 

src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html

@@ -2,31 +2,31 @@
 <div class="sidenav-header" *ngIf="contact">
 
     <!-- CONTACT TOOLBAR -->
-    <md-toolbar>
+    <mat-toolbar>
 
         <!-- TOOLBAR TOP -->
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
 
             <div>Contact Info</div>
 
-            <button md-button class="mat-icon-button" fuseMdSidenavToggler="chat-right-sidenav" aria-label="close">
+            <button mat-button class="mat-icon-button" fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
-                <md-icon>close</md-icon>
+                <mat-icon>close</mat-icon>
             </button>
 
         </div>
         <!-- / TOOLBAR TOP -->
 
         <!-- TOOLBAR BOTTOM -->
-        <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
+        <mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
 
             <img [src]="contact.avatar" class="avatar contact-avatar huge" alt="{{contact.name}}"/>
 
             <div class="contact-name my-8">{{contact.name}}</div>
 
-        </md-toolbar-row>
+        </mat-toolbar-row>
         <!-- / TOOLBAR BOTTOM -->
 
-    </md-toolbar>
+    </mat-toolbar>
     <!-- / CONTACT TOOLBAR -->
 </div>
 
@@ -34,14 +34,14 @@
 <div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">
 
     <!-- CONTACT MOOD -->
-    <md-card>
+    <mat-card>
 
-        <md-input-container fxFlex>
+        <mat-form-field fxFlex>
-                <textarea mdInput placeholder="Mood" name="mood"
+                <textarea matInput placeholder="Mood" name="mood"
                           [value]="contact.mood" rows="3" disabled>
                 </textarea>
-        </md-input-container>
+        </mat-form-field>
 
-    </md-card>
+    </mat-card>
     <!-- / CONTACT MOOD -->
 </div>

src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss

@@ -5,7 +5,7 @@
     flex: 1;
     flex-direction: column;
 
-    md-toolbar {
+    mat-toolbar {
         background-color: mat-color($accent);
         color: map-get($accent, default-contrast);
 

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

@@ -1,104 +1,104 @@
 <div class="dialog-content-wrapper">
-    <md-toolbar md-dialog-title class="mat-accent m-0">
+    <mat-toolbar matDialogTitle class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
-            <button md-button class="mat-icon-button"
+            <button mat-button class="mat-icon-button"
                     (click)="dialogRef.close()"
                     aria-label="Close dialog">
-                <md-icon>close</md-icon>
+                <mat-icon>close</mat-icon>
             </button>
         </div>
 
-        <md-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
+        <mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
             <img [src]="contact.avatar" class=" avatar contact-avatar huge"
                  [alt]="contact.name"/>
             <div class="contact-name">{{contact.name}}</div>
-        </md-toolbar-row>
+        </mat-toolbar-row>
-    </md-toolbar>
+    </mat-toolbar>
 
-    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
         <form [formGroup]="contactForm">
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">account_circle</md-icon>
+                <mat-icon class="mr-12 mt-12">account_circle</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="name" formControlName="name" placeholder="Name" mdInput required>
+                    <input name="name" formControlName="name" placeholder="Name" matInput required>
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12"></md-icon>
+                <mat-icon class="mr-12 mt-12"></mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
+                    <input name="lastName" formControlName="lastName" placeholder="Lastname" matInput>
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">star</md-icon>
+                <mat-icon class="mr-12 mt-12">star</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
+                    <input name="nickname" formControlName="nickname" matInput placeholder="Nickname">
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">phone</md-icon>
+                <mat-icon class="mr-12 mt-12">phone</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input formControlName="phone" mdInput placeholder="Phone number">
+                    <input formControlName="phone" matInput placeholder="Phone number">
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">email</md-icon>
+                <mat-icon class="mr-12 mt-12">email</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="email" formControlName="email" mdInput type="email" placeholder="Email">
+                    <input name="email" formControlName="email" matInput type="email" placeholder="Email">
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">domain</md-icon>
+                <mat-icon class="mr-12 mt-12">domain</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="company" formControlName="company" mdInput placeholder="Company">
+                    <input name="company" formControlName="company" matInput placeholder="Company">
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">work</md-icon>
+                <mat-icon class="mr-12 mt-12">work</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
+                    <input name="jobTitle" formControlName="jobTitle" matInput placeholder="Job title">
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-form-field class="mr-24" fxFlex>
+                <mat-form-field class="mr-24" fxFlex>
-                    <input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
+                    <input matInput [matDatepicker]="birthdayDatePicker" placeholder="Birthday">
-                    <md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
+                    <mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
-                    <md-datepicker #birthdayDatePicker></md-datepicker>
+                    <mat-datepicker #birthdayDatePicker></mat-datepicker>
-                </md-form-field>
+                </mat-form-field>
             </div>
 
             <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">home</md-icon>
+                <mat-icon class="mr-12 mt-12">home</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <input name="address" formControlName="address" mdInput placeholder="Address">
+                    <input name="address" formControlName="address" matInput placeholder="Address">
-                </md-input-container>
+                </mat-form-field>
             </div>
 
             <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
-                <md-icon class="mr-12 mt-12">note</md-icon>
+                <mat-icon class="mr-12 mt-12">note</mat-icon>
-                <md-input-container fxFlex>
+                <mat-form-field fxFlex>
-                    <textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
+                    <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text" max-rows="4"></textarea>
-                </md-input-container>
+                </mat-form-field>
             </div>
 
         </form>
 
     </div>
 
-    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
 
         <button *ngIf="action !=='edit'"
-                md-raised-button
+                mat-raised-button
                 (click)="dialogRef.close(contactForm)"
                 class="save-button mat-accent"
                 [disabled]="contactForm.invalid"
@@ -107,7 +107,7 @@
         </button>
 
         <button *ngIf="action ==='edit'"
-                md-raised-button
+                mat-raised-button
                 (click)="dialogRef.close(['save',contactForm])"
                 class="save-button mat-accent"
                 [disabled]="contactForm.invalid"
@@ -116,12 +116,12 @@
         </button>
 
         <button *ngIf="action ==='edit'"
-                md-button
+                mat-button
                 class="mat-icon-button"
                 (click)="dialogRef.close(['delete',contactForm])"
                 aria-label="Delete"
-                md-tooltip="Delete">
+                matTooltip="Delete">
-            <md-icon>delete</md-icon>
+            <mat-icon>delete</mat-icon>
         </button>
 
     </div>

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

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { CalendarEvent } from 'angular-calendar';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import 'rxjs/Rx';
@@ -21,8 +21,8 @@ export class FuseContactsContactFormDialogComponent implements OnInit
     contact: Contact;
 
     constructor(
-        public dialogRef: MdDialogRef<FuseContactsContactFormDialogComponent>,
+        public dialogRef: MatDialogRef<FuseContactsContactFormDialogComponent>,
-        @Inject(MD_DIALOG_DATA) private data: any,
+        @Inject(MAT_DIALOG_DATA) private data: any,
         private formBuilder: FormBuilder
     )
     {

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

@@ -1,106 +1,106 @@
-<md-table #table [dataSource]="dataSource"
+<mat-table #table [dataSource]="dataSource"
            [@animateStagger]="{value:'50'}">
     <!-- Checkbox Column -->
     <ng-container cdkColumnDef="checkbox">
-        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <md-cell *cdkCellDef="let contact">
+        <mat-cell *cdkCellDef="let contact">
-            <md-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
+            <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
                           (click)="$event.stopPropagation()">
-            </md-checkbox>
+            </mat-checkbox>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Avatar Column -->
     <ng-container cdkColumnDef="avatar">
-        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <md-cell *cdkCellDef="let contact">
+        <mat-cell *cdkCellDef="let contact">
             <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                  [src]="contact.avatar"/>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Name Column -->
     <ng-container cdkColumnDef="name">
-        <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-        <md-cell *cdkCellDef="let contact">
+        <mat-cell *cdkCellDef="let contact">
             <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Email Column -->
     <ng-container cdkColumnDef="email">
-        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
-        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
             <p class="email text-truncate">
                 {{contact.email}}
             </p>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Phone Column -->
     <ng-container cdkColumnDef="phone">
-        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
-        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
             <p class="phone text-truncate">
                 {{contact.phone}}
             </p>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Job Title Column -->
     <ng-container cdkColumnDef="jobTitle">
-        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
-        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
             <p class="job-title text-truncate">
                 {{contact.jobTitle}}
             </p>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Company Column -->
     <ng-container cdkColumnDef="company">
-        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
-        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
             <p class="company text-truncate">
                 {{contact.company}}
             </p>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Buttons Column -->
     <ng-container cdkColumnDef="buttons">
-        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <md-cell *cdkCellDef="let contact">
+        <mat-cell *cdkCellDef="let contact">
             <div fxFlex="row" fxLayoutAlign="end center">
-                <button md-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
+                <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
-                    <md-icon *ngIf="user.starred.includes(contact.id)">star</md-icon>
+                    <mat-icon *ngIf="user.starred.includes(contact.id)">star</mat-icon>
-                    <md-icon *ngIf="!user.starred.includes(contact.id)">star_outline</md-icon>
+                    <mat-icon *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
                 </button>
 
-                <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="More"
+                <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
                         (click)="$event.stopPropagation();">
-                    <md-icon>more_vert</md-icon>
+                    <mat-icon>more_vert</mat-icon>
                 </button>
 
-                <md-menu #moreMenu="mdMenu">
+                <mat-menu #moreMenu="matMenu">
-                    <button md-menu-item aria-label="remove" (click)="deleteContact(contact)">
+                    <button mat-menu-item aria-label="remove" (click)="deleteContact(contact)">
-                        <md-icon>delete</md-icon>
+                        <mat-icon>delete</mat-icon>
                         <span>Remove</span>
                     </button>
-                </md-menu>
+                </mat-menu>
             </div>
 
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
-    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
+    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-    <md-row *cdkRowDef="let contact; columns: displayedColumns;"
+    <mat-row *cdkRowDef="let contact; columns: displayedColumns;"
              class="contact"
              (click)="editContact(contact)"
-            [ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}"
+             [ngClass]="{'mat-light-blue-50-bg':checkboxes[contact.id]}"
-            md-ripple
+             matRipple
              [@animate]="{value:'*',params:{y:'100%'}}">
-    </md-row>
+    </mat-row>
-</md-table>
+</mat-table>
 
 

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

@@ -22,7 +22,7 @@
         .mat-row {
             position: relative;
             cursor: pointer;
-            padding-right: 8px;
+            padding: 8px 8px 8px 24px;
 
             .mat-cell {
                 min-width: 0;

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

@@ -2,7 +2,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ContactsService } from '../contacts.service';
 import { Observable } from 'rxjs/Observable';
 import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
-import { MdDialog, MdDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material';
 import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 import { FormGroup } from '@angular/forms';
 import { DataSource } from '@angular/cdk/collections';
@@ -27,11 +27,11 @@ export class FuseContactsContactListComponent implements OnInit
 
     dialogRef: any;
 
-    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
+    confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
 
     constructor(
         private contactsService: ContactsService,
-        public dialog: MdDialog
+        public dialog: MatDialog
     )
     {
         this.contactsService.onContactsChanged.subscribe(contacts => {

src/app/main/content/apps/contacts/contacts.component.html

@@ -1,20 +1,20 @@
 <div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
+    <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
          fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
         <!-- APP TITLE -->
         <div fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="mat-icon-button sidenav-toggle mr-12"
+            <button mat-button class="mat-icon-button sidenav-toggle mr-12"
-                    fuseMdSidenavToggler="contacts-main-sidenav"
+                    fuseMatSidenavToggler="contacts-main-sidenav"
                     fxHide.gt-md>
-                <md-icon>menu</md-icon>
+                <mat-icon>menu</mat-icon>
             </button>
 
             <div class="logo" fxLayout="row" fxLayoutAlign="start center">
-                <md-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</md-icon>
+                <mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</mat-icon>
                 <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
             </div>
 
@@ -24,11 +24,11 @@
         <!-- SEARCH -->
         <div class="search-input-wrapper mt-16 ml-8 m-sm-0" fxLayout="row" fxLayoutAlign="start center">
             <label for="search" class="mr-8">
-                <md-icon>search</md-icon>
+                <mat-icon>search</mat-icon>
             </label>
-            <md-input-container md-no-float class="m-0" floatPlaceholder="never">
+            <mat-form-field mat-no-float class="m-0" floatPlaceholder="never">
-                <input mdInput [formControl]="searchInput" id="search" placeholder="Search for anything">
+                <input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
-            </md-input-container>
+            </mat-form-field>
         </div>
         <!-- / SEARCH -->
 
@@ -36,25 +36,25 @@
     <!-- / HEADER -->
 
     <!-- SELECTED BAR -->
-    <fuse-selected-bar class="md-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></fuse-selected-bar>
+    <fuse-selected-bar class="mat-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></fuse-selected-bar>
     <!-- / SELECTED BAR -->
 
-    <md-sidenav-container>
+    <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
-                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-sm">
+                     fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">
 
             <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
 
-        </md-sidenav>
+        </mat-sidenav>
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
         <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
 
             <!-- CONTENT -->
-            <div class="content md-white-bg mat-elevation-z4">
+            <div class="content mat-white-bg mat-elevation-z4">
 
                 <fuse-contacts-contact-list></fuse-contacts-contact-list>
 
@@ -64,13 +64,13 @@
         </div>
         <!-- / CENTER -->
 
-    </md-sidenav-container>
+    </mat-sidenav-container>
 
 </div>
 
 <!-- ADD CONTACT BUTTON -->
-<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
+<button mat-fab class="mat-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
         *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
-    <md-icon>person_add</md-icon>
+    <mat-icon>person_add</mat-icon>
 </button>
 <!-- / ADD CONTACT BUTTON -->

src/app/main/content/apps/contacts/contacts.component.scss

@@ -4,6 +4,7 @@
         overflow: hidden;
     }
 }
+
 #add-contact-button {
     position: absolute;
     bottom: 12px;

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

@@ -3,7 +3,7 @@ import { ContactsService } from './contacts.service';
 import { fuseAnimations } from '../../../../core/animations';
 import { FormControl, FormGroup } from '@angular/forms';
 import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
-import { MdDialog } from '@angular/material';
+import { MatDialog } from '@angular/material';
 
 @Component({
     selector     : 'fuse-contacts',
@@ -20,7 +20,7 @@ export class FuseContactsComponent implements OnInit
 
     constructor(
         private contactsService: ContactsService,
-        public dialog: MdDialog
+        public dialog: MatDialog
     )
     {
         this.searchInput = new FormControl('');

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Contact } from './contact.model';
 import { FuseUtils } from '../../../../core/fuseUtils';
@@ -23,7 +23,7 @@ export class ContactsService implements Resolve<any>
     searchText: string;
     filterBy: string;
 
-    constructor(private http: Http)
+    constructor(private http: HttpClient)
     {
     }
 
@@ -65,9 +65,9 @@ export class ContactsService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
                 this.http.get('api/contacts-contacts')
-                    .subscribe(response => {
+                    .subscribe((response: any) => {
 
-                        this.contacts = response.json().data;
+                        this.contacts = response;
 
                         if ( this.filterBy === 'starred' )
                         {
@@ -103,8 +103,8 @@ export class ContactsService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
                 this.http.get('api/contacts-user/5725a6802d10e277a0f35724')
-                    .subscribe(response => {
+                    .subscribe((response: any) => {
-                        this.user = response.json().data;
+                        this.user = response;
                         this.onUserDataChanged.next(this.user);
                         resolve(this.user);
                     }, reject);

src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html

@@ -1,8 +1,8 @@
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24">
 
     <div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()">
-        <button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center">
+        <button class="p-8" mat-button fxLayout="row" fxLayoutAlign="start center">
-            <md-icon class="mr-8">arrow_back</md-icon>
+            <mat-icon class="mr-8">arrow_back</mat-icon>
             <span class="text-uppercase">Back</span>
         </button>
     </div>
@@ -15,19 +15,19 @@
                 <span>selected</span>
             </span>
 
-            <button md-icon-button [mdMenuTriggerFor]="selectMenu">
+            <button mat-icon-button [matMenuTriggerFor]="selectMenu">
-                <md-icon>arrow_drop_down</md-icon>
+                <mat-icon>arrow_drop_down</mat-icon>
             </button>
-            <md-menu #selectMenu="mdMenu">
+            <mat-menu #selectMenu="matMenu">
-                <button md-menu-item (click)="selectAll()">Select all</button>
+                <button mat-menu-item (click)="selectAll()">Select all</button>
-                <button md-menu-item (click)="deselectAll()">Deselect all</button>
+                <button mat-menu-item (click)="deselectAll()">Deselect all</button>
-            </md-menu>
+            </mat-menu>
 
         </div>
 
         <div class="multi-select-actions">
-            <button md-icon-button (click)="deleteSelectedContacts()" aria-label="delete selected">
+            <button mat-icon-button (click)="deleteSelectedContacts()" aria-label="delete selected">
-                <md-icon>delete</md-icon>
+                <mat-icon>delete</mat-icon>
             </button>
         </div>
 

src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ContactsService } from '../contacts.service';
-import { MdDialog, MdDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material';
 import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
@@ -13,11 +13,11 @@ export class FuseContactsSelectedBarComponent implements OnInit
     selectedContacts: string[];
     hasSelectedContacts: boolean;
     isIndeterminate: boolean;
-    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
+    confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
 
     constructor(
         private contactsService: ContactsService,
-        public dialog: MdDialog
+        public dialog: MatDialog
     )
     {
         this.contactsService.onSelectedContactsChanged

src/app/main/content/apps/contacts/sidenavs/main/main.component.html

@@ -1,6 +1,6 @@
 <div class="sidenav-content">
 
-    <div class="card md-white-bg">
+    <div class="card mat-white-bg">
         <!-- SIDENAV HEADER -->
         <div class="header p-24" fxLayout="row" fxLayoutAlign="start center">
 
@@ -18,19 +18,19 @@
             <div class="nav">
 
                 <div class="nav-item" aria-label="inbox">
-                    <a class="nav-link" md-ripple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}">
+                    <a class="nav-link" matRipple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}">
                         <span class="title">All Contacts</span>
                     </a>
                 </div>
 
                 <div class="nav-item" aria-label="frequently contacted" (click)="changeFilter('frequent')">
-                    <a class="nav-link" md-ripple [ngClass]="{'active':filterBy ==='frequent'}">
+                    <a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='frequent'}">
                         <div class="title">Freequently contacted</div>
                     </a>
                 </div>
 
                 <div class="nav-item" aria-label="starred" (click)="changeFilter('starred')">
-                    <a class="nav-link" md-ripple [ngClass]="{'active':filterBy ==='starred'}">
+                    <a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='starred'}">
                         <div class="title">Starred Contacts</div>
                     </a>
                 </div>

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

@@ -1,19 +1,19 @@
 <div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">
 
-    <md-sidenav-container>
+    <mat-sidenav-container>
 
         <!-- CENTER -->
         <div class="center" fxFlex fusePerfectScrollbar>
 
             <!-- HEADER -->
-            <div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
+            <div class="header mat-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
 
                 <div fxLayout="row" fxLayoutAlign="space-between start">
 
                     <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span>
 
-                    <button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
+                    <button mat-icon-button fuseMatSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
-                        <md-icon>menu</md-icon>
+                        <mat-icon>menu</mat-icon>
                     </button>
                 </div>
 
@@ -21,15 +21,15 @@
 
                     <div class="selected-project">{{selectedProject.name}}</div>
 
-                    <button md-icon-button class="project-selector" [mdMenuTriggerFor]="projectsMenu" aria-label="Select project">
+                    <button mat-icon-button class="project-selector" [matMenuTriggerFor]="projectsMenu" aria-label="Select project">
-                        <md-icon>more_horiz</md-icon>
+                        <mat-icon>more_horiz</mat-icon>
                     </button>
 
-                    <md-menu #projectsMenu="mdMenu">
+                    <mat-menu #projectsMenu="matMenu">
-                        <button md-menu-item *ngFor="let project of projects" (click)="selectedProject = project">
+                        <button mat-menu-item *ngFor="let project of projects" (click)="selectedProject = project">
                             <span>{{project.name}}</span>
                         </button>
-                    </md-menu>
+                    </mat-menu>
                 </div>
             </div>
             <!-- / HEADER -->
@@ -37,9 +37,9 @@
             <!-- CONTENT -->
             <div class="content">
 
-                <md-tab-group dynamicHeight>
+                <mat-tab-group dynamicHeight>
 
-                    <md-tab label="Home">
+                    <mat-tab label="Home">
 
                         <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
@@ -47,20 +47,20 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
-                                        <md-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
+                                        <mat-form-field>
+                                            <mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
                                                         aria-label="Change range">
-                                            <md-option *ngFor="let range of widgets.widget1.ranges | keys"
+                                                <mat-option *ngFor="let range of widgets.widget1.ranges | keys"
                                                             [value]="range.key">
                                                     {{range.value}}
-                                            </md-option>
+                                                </mat-option>
-                                        </md-select>
+                                            </mat-select>
-
+                                        </mat-form-field>
-                                        <button md-icon-button fuseWidgetToggle aria-label="more">
+                                        <button mat-icon-button fuseWidgetToggle aria-label="more">
-                                            <md-icon>more_vert</md-icon>
+                                            <mat-icon>more_vert</mat-icon>
                                         </button>
-
                                     </div>
 
                                     <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
@@ -78,10 +78,10 @@
                                 <!-- / Front -->
 
                                 <!-- Back -->
-                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                    <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
                                             aria-label="Flip widget">
-                                        <md-icon class="s-16">close</md-icon>
+                                        <mat-icon class="s-16">close</mat-icon>
                                     </button>
 
                                     <div>
@@ -97,12 +97,12 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget2.title}}</div>
 
-                                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
+                                        <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
-                                            <md-icon>more_vert</md-icon>
+                                            <mat-icon>more_vert</mat-icon>
                                         </button>
                                     </div>
 
@@ -121,10 +121,10 @@
                                 <!-- / Front -->
 
                                 <!-- Back -->
-                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                    <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
                                             aria-label="Flip widget">
-                                        <md-icon class="s-16">close</md-icon>
+                                        <mat-icon class="s-16">close</mat-icon>
                                     </button>
 
                                     <div>
@@ -140,12 +140,12 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget3.title}}</div>
 
-                                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
+                                        <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
-                                            <md-icon>more_vert</md-icon>
+                                            <mat-icon>more_vert</mat-icon>
                                         </button>
                                     </div>
 
@@ -164,10 +164,10 @@
                                 <!-- / Front -->
 
                                 <!-- Back -->
-                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                    <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
                                             aria-label="Flip widget">
-                                        <md-icon class="s-16">close</md-icon>
+                                        <mat-icon class="s-16">close</mat-icon>
                                     </button>
 
                                     <div>
@@ -183,12 +183,12 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget4.title}}</div>
 
-                                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
+                                        <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
-                                            <md-icon>more_vert</md-icon>
+                                            <mat-icon>more_vert</mat-icon>
                                         </button>
                                     </div>
 
@@ -206,10 +206,10 @@
                                 <!-- / Front -->
 
                                 <!-- Back -->
-                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                    <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
                                             aria-label="Flip widget">
-                                        <md-icon class="s-16">close</md-icon>
+                                        <mat-icon class="s-16">close</mat-icon>
                                     </button>
 
                                     <div>
@@ -226,14 +226,14 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap>
 
                                         <div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div>
 
                                         <div fxFlex="0 1 auto" class="py-8" fxLayout="row">
-                                            <button md-button class="px-16"
+                                            <button mat-button class="px-16"
                                                     *ngFor="let range of widgets.widget5.ranges | keys"
                                                     (click)="widget5.currentRange = range.key"
                                                     [disabled]="widget5.currentRange == range.key">
@@ -302,18 +302,18 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget6.title}}</div>
-                                        <div class="py-16">
+                                        <mat-form-field>
-                                            <md-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
+                                            <mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
-                                                <md-option *ngFor="let range of widgets.widget6.ranges | keys"
+                                                <mat-option *ngFor="let range of widgets.widget6.ranges | keys"
                                                             [value]="range.key">
                                                     {{range.value}}
-                                                </md-option>
+                                                </mat-option>
-                                            </md-select>
+                                            </mat-select>
-                                        </div>
+                                        </mat-form-field>
                                     </div>
 
                                     <div class="h-400">
@@ -352,20 +352,19 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget7.title}}</div>
-
+                                        <mat-form-field>
-                                        <div class="py-16">
+                                            <mat-select class="simplified" [(ngModel)]="widget7.currentRange"
-                                            <md-select class="simplified" [(ngModel)]="widget7.currentRange"
                                                         aria-label="Change range">
-                                                <md-option *ngFor="let range of widgets.widget7.ranges | keys"
+                                                <mat-option *ngFor="let range of widgets.widget7.ranges | keys"
                                                             [value]="range.key">
                                                     {{range.value}}
-                                                </md-option>
+                                                </mat-option>
-                                            </md-select>
+                                            </mat-select>
-                                        </div>
+                                        </mat-form-field>
                                     </div>
 
                                     <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
@@ -378,8 +377,8 @@
                                             </div>
                                         </div>
 
-                                        <button md-icon-button aria-label="More information">
+                                        <button mat-icon-button aria-label="More information">
-                                            <md-icon>more_vert</md-icon>
+                                            <mat-icon>more_vert</mat-icon>
                                         </button>
                                     </div>
 
@@ -393,9 +392,9 @@
                         <!-- / WIDGET GROUP -->
 
 
-                    </md-tab>
+                    </mat-tab>
 
-                    <md-tab label="Budget Summary">
+                    <mat-tab label="Budget Summary">
 
                         <!-- WIDGET GROUP -->
                         <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
@@ -404,12 +403,12 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="h3 p-16">
                                         {{widgets.widget8.title}}
                                     </div>
 
-                                    <md-divider></md-divider>
+                                    <mat-divider></mat-divider>
 
                                     <div class="h-400">
                                         <ngx-charts-pie-chart
@@ -435,19 +434,17 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget9.title}}</div>
-
+                                        <mat-form-field>
-                                        <div class="py-16">
+                                            <mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
-                                            <md-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
+                                                <mat-option *ngFor="let range of widgets.widget9.ranges | keys"
-                                                <md-option *ngFor="let range of widgets.widget9.ranges | keys"
                                                             [value]="range.key">
                                                     {{range.value}}
-                                                </md-option>
+                                                </mat-option>
-                                            </md-select>
+                                            </mat-select>
-
+                                        </mat-form-field>
-                                        </div>
                                     </div>
 
                                     <div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
@@ -549,7 +546,7 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
                                     <div class="simple-table-container" ms-responsive-table>
                                         <div class=" table-title">
@@ -572,7 +569,7 @@
                                                         <span class="p-4" [class]="cell.classes">
                                                             {{cell.value}}
                                                         </span>
-                                                        <md-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</md-icon>
+                                                        <mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</mat-icon>
                                                     </td>
                                                 </tr>
                                             </tbody>
@@ -588,9 +585,9 @@
                         </div>
                         <!-- / WIDGET GROUP -->
 
-                    </md-tab>
+                    </mat-tab>
 
-                    <md-tab label="Team Members">
+                    <mat-tab label="Team Members">
 
                         <!-- WIDGET GROUP -->
                         <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
@@ -599,7 +596,7 @@
                             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
 
                                 <!-- Front -->
-                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
                                     <div class="p-24 mb-8 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h2">{{widgets.widget11.title}}</div>
@@ -608,70 +605,70 @@
                                         </div>
                                     </div>
 
-                                    <md-table #table [dataSource]="widget11.dataSource">
+                                    <mat-table #table [dataSource]="widget11.dataSource">
 
                                         <!-- Avatar Column -->
                                         <ng-container cdkColumnDef="avatar">
-                                            <md-header-cell fxFlex="64px" *cdkHeaderCellDef></md-header-cell>
+                                            <mat-header-cell fxFlex="64px" *cdkHeaderCellDef></mat-header-cell>
-                                            <md-cell fxFlex="64px" *cdkCellDef="let contact">
+                                            <mat-cell fxFlex="64px" *cdkCellDef="let contact">
                                                 <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                                                      [src]="contact.avatar"/>
-                                            </md-cell>
+                                            </mat-cell>
                                         </ng-container>
 
                                         <!-- Name Column -->
                                         <ng-container cdkColumnDef="name">
-                                            <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
+                                            <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-                                            <md-cell *cdkCellDef="let contact">
+                                            <mat-cell *cdkCellDef="let contact">
                                                 <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
-                                            </md-cell>
+                                            </mat-cell>
                                         </ng-container>
 
                                         <!-- Position Column -->
                                         <ng-container cdkColumnDef="position">
-                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</md-header-cell>
+                                            <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</mat-header-cell>
-                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+                                            <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
                                                 <p class="position text-truncate">
                                                     {{contact.position}}
                                                 </p>
-                                            </md-cell>
+                                            </mat-cell>
                                         </ng-container>
 
                                         <!-- Office Column -->
                                         <ng-container cdkColumnDef="office">
-                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</md-header-cell>
+                                            <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</mat-header-cell>
-                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+                                            <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
                                                 <p class="office text-truncate">
                                                     {{contact.office}}
                                                 </p>
-                                            </md-cell>
+                                            </mat-cell>
                                         </ng-container>
 
 
                                         <!-- Email Column -->
                                         <ng-container cdkColumnDef="email">
-                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell>
+                                            <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
-                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+                                            <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
                                                 <p class="email text-truncate">
                                                     {{contact.email}}
                                                 </p>
-                                            </md-cell>
+                                            </mat-cell>
                                         </ng-container>
 
                                         <!-- Phone Column -->
                                         <ng-container cdkColumnDef="phone">
-                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell>
+                                            <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
-                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+                                            <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
                                                 <p class="phone text-truncate">
                                                     {{contact.phone}}
                                                 </p>
-                                            </md-cell>
+                                            </mat-cell>
                                         </ng-container>
 
-                                        <md-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></md-header-row>
+                                        <mat-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
-                                        <md-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
+                                        <mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
-                                        </md-row>
+                                        </mat-row>
-                                    </md-table>
+                                    </mat-table>
                                 </div>
                                 <!-- / Front -->
 
@@ -681,8 +678,8 @@
                         </div>
                         <!-- / WIDGET GROUP -->
 
-                    </md-tab>
+                    </mat-tab>
-                </md-tab-group>
+                </mat-tab-group>
 
             </div>
             <!-- / CONTENT -->
@@ -691,7 +688,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">
 
             <div class="sidenav-content" fusePerfectScrollbar>
 
@@ -709,15 +706,15 @@
                                 <div class="h3">{{dateNow | date: 'EEEE, h:m:ss'}}</div>
 
                                 <div>
-                                    <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
+                                    <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
-                                        <md-icon>more_vert</md-icon>
+                                        <mat-icon>more_vert</mat-icon>
                                     </button>
 
-                                    <md-menu #moreMenu="mdMenu">
+                                    <mat-menu #moreMenu="matMenu">
-                                        <button md-menu-item aria-label="Flip widget">
+                                        <button mat-menu-item aria-label="Flip widget">
                                             Details
                                         </button>
-                                    </md-menu>
+                                    </mat-menu>
                                 </div>
                             </div>
 
@@ -735,7 +732,7 @@
                                 </div>
                             </div>
 
-                            <md-divider></md-divider>
+                            <mat-divider></mat-divider>
                         </div>
                         <!-- / Front -->
 
@@ -751,28 +748,28 @@
                             <div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
 
                                 <div class="h4" fxLayout="row" fxLayoutAlign="start center">
-                                    <md-icon class="mr-8">place</md-icon>
+                                    <mat-icon class="mr-8">place</mat-icon>
                                     {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
                                 </div>
 
                                 <div>
-                                    <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
+                                    <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
-                                        <md-icon>more_vert</md-icon>
+                                        <mat-icon>more_vert</mat-icon>
                                     </button>
 
-                                    <md-menu #moreMenu="mdMenu">
+                                    <mat-menu #moreMenu="matMenu">
-                                        <button md-menu-item aria-label="Flip widget">
+                                        <button mat-menu-item aria-label="Flip widget">
                                             Details
                                         </button>
-                                    </md-menu>
+                                    </mat-menu>
                                 </div>
                             </div>
 
                             <div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
 
                                 <div fxLayout="row" fxLayoutAlign="center center">
-                                    <md-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
+                                    <mat-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
-                                             class="icon s-40 mr-16"></md-icon>
+                                              class="icon s-40 mr-16"></mat-icon>
                                     <span class="mat-display-2 m-0 font-weight-300 secondary-text">
                                         {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
                                     </span>
@@ -783,7 +780,7 @@
 
                             <div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                 <div fxLayout="row" fxLayoutAlign="start center">
-                                    <md-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></md-icon>
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></mat-icon>
                                     <span>
                                         {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
                                     </span>
@@ -791,12 +788,12 @@
                                 </div>
 
                                 <div fxLayout="row" fxLayoutAlign="start center">
-                                    <md-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></md-icon>
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></mat-icon>
                                     <span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span>
                                 </div>
 
                                 <div fxLayout="row" fxLayoutAlign="start center">
-                                    <md-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></md-icon>
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></mat-icon>
                                     <span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span>
                                 </div>
                             </div>
@@ -806,7 +803,7 @@
                                      *ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
                                     <span class="h4">{{day.name}}</span>
                                     <div fxLayout="row" fxLayoutAlign="start center">
-                                        <md-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></md-icon>
+                                        <mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></mat-icon>
                                         <span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
                                         <span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
                                         <span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span>
@@ -814,7 +811,7 @@
                                 </div>
                             </div>
 
-                            <md-divider></md-divider>
+                            <mat-divider></mat-divider>
 
                         </div>
                         <!-- / Front -->
@@ -826,9 +823,9 @@
                 <!-- / WIDGET GROUP -->
             </div>
 
-        </md-sidenav>
+        </mat-sidenav>
         <!-- / SIDENAV -->
 
-    </md-sidenav-container>
+    </mat-sidenav-container>
 
 </div>

src/app/main/content/apps/dashboards/project/project.component.scss

@@ -1,6 +1,6 @@
 #dashboard-project {
 
-    md-sidenav-container {
+    mat-sidenav-container {
 
         .center {
 
@@ -23,7 +23,7 @@
                     border-radius: 0;
                     background: rgba(0, 0, 0, 0.12);
 
-                    md-icon {
+                    mat-icon {
                         color: #FFFFFF;
                     }
                 }
@@ -32,7 +32,7 @@
             > .content {
                 flex: 1;
 
-                md-tab-group {
+                mat-tab-group {
                     height: 100%;
 
                     .mat-tab-body-wrapper {

src/app/main/content/apps/dashboards/project/projects.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class ProjectsDashboardService implements Resolve<any>
@@ -10,7 +10,7 @@ export class ProjectsDashboardService implements Resolve<any>
     widgets: any[];
 
     constructor(
-        private http: Http
+        private http: HttpClient
     )
     {
     }
@@ -42,9 +42,9 @@ export class ProjectsDashboardService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/projects-dashboard-projects')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.projects = response.json().data;
+                    this.projects = response;
-                    resolve(response.json().data);
+                    resolve(response);
                 }, reject);
         });
     }
@@ -53,9 +53,9 @@ export class ProjectsDashboardService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/projects-dashboard-widgets')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.widgets = response.json().data;
+                    this.widgets = response;
-                    resolve(response.json().data);
+                    resolve(response);
                 }, reject);
         });
     }

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

@@ -1,60 +1,60 @@
-<md-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">
+<mat-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
     <!-- Type Column -->
     <ng-container cdkColumnDef="icon">
-        <md-header-cell *cdkHeaderCellDef fxFlex="64px"></md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
-        <md-cell *cdkCellDef="let row" fxFlex="64px">
+        <mat-cell *cdkCellDef="let row" fxFlex="64px">
-            <md-icon class="type-icon" [class]="row.type"></md-icon>
+            <mat-icon class="type-icon" [class]="row.type"></mat-icon>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
     <!-- Name Column -->
     <ng-container cdkColumnDef="name">
-        <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-        <md-cell *cdkCellDef="let row"> {{row.name}}</md-cell>
+        <mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
     </ng-container>
 
     <!-- Type Column -->
     <ng-container cdkColumnDef="type">
-        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
-        <md-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</md-cell>
+        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
     </ng-container>
 
     <!-- Owner Column -->
     <ng-container cdkColumnDef="owner">
-        <md-header-cell *cdkHeaderCellDef fxHide.xs>Owner</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell>
-        <md-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</md-cell>
+        <mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
     </ng-container>
 
     <!-- Size Column -->
     <ng-container cdkColumnDef="size">
-        <md-header-cell *cdkHeaderCellDef fxHide.xs>Size</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell>
-        <md-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</md-cell>
+        <mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
     </ng-container>
 
     <!-- Modified Column -->
     <ng-container cdkColumnDef="modified">
-        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
-        <md-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</md-cell>
+        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
     </ng-container>
 
     <!-- Detail Button Column -->
     <ng-container cdkColumnDef="detail-button">
-        <md-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></md-header-cell>
+        <mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
-        <md-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
+        <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
-            <button md-icon-button class="sidenav-toggle"
+            <button mat-icon-button class="sidenav-toggle"
-                    fuseMdSidenavToggler="file-manager-right-sidenav">
+                    fuseMatSidenavToggler="file-manager-right-sidenav">
-                <md-icon>info</md-icon>
+                <mat-icon>info</mat-icon>
             </button>
-        </md-cell>
+        </mat-cell>
     </ng-container>
 
-    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
+    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-    <md-row *cdkRowDef="let row; columns: displayedColumns;"
+    <mat-row *cdkRowDef="let row; columns: displayedColumns;"
              (click)="onSelect(row)"
-            [ngClass]="{'md-light-blue-50-bg':row == selected}"
+             [ngClass]="{'mat-light-blue-50-bg':row == selected}"
-            md-ripple
+             matRipple
              [@animate]="{value:'*',params:{y:'100%'}}"
     >
-    </md-row>
+    </mat-row>
-</md-table>
+</mat-table>

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

@@ -1,33 +1,33 @@
 <div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar>
 
-    <md-sidenav-container>
+    <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
+        <mat-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
-                    fuseMdSidenavHelper="file-manager-left-sidenav">
+                     fuseMatSidenavHelper="file-manager-left-sidenav">
             <fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav>
-        </md-sidenav>
+        </mat-sidenav>
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
         <div class="center" fxFlex>
 
             <!-- HEADER -->
-            <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
+            <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
 
                 <!-- TOOLBAR -->
                 <div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
 
                     <div class="left-side" fxLayout="row">
-                        <button md-icon-button class="sidenav-toggle"
+                        <button mat-icon-button class="sidenav-toggle"
-                                fuseMdSidenavToggler="file-manager-left-sidenav">
+                                fuseMatSidenavToggler="file-manager-left-sidenav">
-                            <md-icon>menu</md-icon>
+                            <mat-icon>menu</mat-icon>
                         </button>
                     </div>
 
                     <div class="right-side" fxLayout="row">
-                        <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
+                        <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
-                            <md-icon>search</md-icon>
+                            <mat-icon>search</mat-icon>
                         </button>
                     </div>
                 </div>
@@ -38,7 +38,7 @@
                      *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
                     <div *ngFor="let path of pathArr; last  as isLast" fxLayout="row" fxLayoutAlign="start center">
                         <span>{{path}}</span>
-                        <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
+                        <mat-icon *ngIf="!isLast" class="separator">chevron_right</mat-icon>
                     </div>
                 </div>
                 <!-- / BREADCRUMB -->
@@ -46,12 +46,12 @@
                 <!-- ADD FILE BUTTON -->
                 <div class="file-uploader">
                     <input hidden type="file" #fileInput/>
-                    <button md-fab
+                    <button mat-fab
                             class="add-file-button mat-warn"
                             (click)="fileInput.click()"
                             aria-label="Add file"
                             *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
-                        <md-icon>add</md-icon>
+                        <mat-icon>add</mat-icon>
                     </button>
                 </div>
                 <!-- / ADD FILE BUTTON -->
@@ -60,7 +60,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content md-white-bg" fusePerfectScrollbar>
+            <div class="content mat-white-bg" fusePerfectScrollbar>
                 <fuse-file-list></fuse-file-list>
             </div>
             <!-- / CONTENT -->
@@ -69,11 +69,11 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
-                    fuseMdSidenavHelper="file-manager-right-sidenav" md-is-locked-open="gt-md">
+                     fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md">
             <fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
-        </md-sidenav>
+        </mat-sidenav>
         <!-- / SIDENAV -->
 
-    </md-sidenav-container>
+    </mat-sidenav-container>
 </div>

src/app/main/content/apps/file-manager/file-manager.component.scss

@@ -2,7 +2,7 @@
 
 #file-manager {
 
-    md-sidenav-container {
+    mat-sidenav-container {
 
         .sidenav {
             width: 320px !important;

src/app/main/content/apps/file-manager/file-manager.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
@@ -10,7 +10,7 @@ export class FileManagerService implements Resolve<any>
     onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({});
     onFileSelected: BehaviorSubject<any> = new BehaviorSubject({});
 
-    constructor(private http: Http)
+    constructor(private http: HttpClient)
     {
     }
 
@@ -40,10 +40,10 @@ export class FileManagerService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/file-manager')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.onFilesChanged.next(response.json().data);
+                    this.onFilesChanged.next(response);
-                    this.onFileSelected.next(response.json().data[0]);
+                    this.onFileSelected.next(response[0]);
-                    resolve(response.json().data);
+                    resolve(response);
                 }, reject);
         });
     }

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

@@ -1,18 +1,18 @@
 <!-- SIDENAV HEADER -->
-<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between">
+<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between">
 
     <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">
 
-        <button md-icon-button class="mat-icon-button" md-tooltip="Delete">
+        <button mat-icon-button class="mat-icon-button" matTooltip="Delete">
-            <md-icon>delete</md-icon>
+            <mat-icon>delete</mat-icon>
         </button>
 
-        <button md-icon-button class="" aria-label="Download" md-tooltip="Download">
+        <button mat-icon-button class="" aria-label="Download" matTooltip="Download">
-            <md-icon>file_download</md-icon>
+            <mat-icon>file_download</mat-icon>
         </button>
 
-        <button md-icon-button class="mat-icon-button" aria-label="More" md-tooltip="More">
+        <button mat-icon-button class="mat-icon-button" aria-label="More" matTooltip="More">
-            <md-icon>more_vert</md-icon>
+            <mat-icon>more_vert</mat-icon>
         </button>
     </div>
 
@@ -27,17 +27,17 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content p-24 md-white-bg" fusePerfectScrollbar>
+<div class="content p-24 mat-white-bg" fusePerfectScrollbar>
 
     <div class="file-details"
          *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
 
         <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
-            <md-icon class="type-icon s-48" [class]="selected.type"></md-icon>
+            <mat-icon class="type-icon s-48" [class]="selected.type"></mat-icon>
         </div>
 
         <div class="offline-switch">
-            <md-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</md-slide-toggle>
+            <mat-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</mat-slide-toggle>
         </div>
 
         <div class="title">Info</div>

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

@@ -2,7 +2,7 @@
 <div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
 
     <div class="logo" fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon mr-16">folder</md-icon>
+        <mat-icon class="logo-icon mr-16">folder</mat-icon>
         <span class="logo-text h1">File Manager</span>
     </div>
 
@@ -15,36 +15,36 @@
     <div class="nav">
 
         <div class="nav-item" aria-label="inbox">
-            <a class="nav-link" md-ripple>
+            <a class="nav-link" matRipple>
-                <md-icon class="nav-link-icon">folder</md-icon>
+                <mat-icon class="nav-link-icon">folder</mat-icon>
                 <span class="title">My Files</span>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
-            <a class="nav-link" md-ripple>
+            <a class="nav-link" matRipple>
-                <md-icon class="nav-link-icon">star</md-icon>
+                <mat-icon class="nav-link-icon">star</mat-icon>
                 <div class="title">Starred</div>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
-            <a class="nav-link" md-ripple>
+            <a class="nav-link" matRipple>
-                <md-icon class="nav-link-icon">folder_shared</md-icon>
+                <mat-icon class="nav-link-icon">folder_shared</mat-icon>
                 <div class="title">Sharred with me</div>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
-            <a class="nav-link" md-ripple>
+            <a class="nav-link" matRipple>
-                <md-icon class="nav-link-icon">access_time</md-icon>
+                <mat-icon class="nav-link-icon">access_time</mat-icon>
                 <div class="title">Recent</div>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
-            <a class="nav-link" md-ripple>
+            <a class="nav-link" matRipple>
-                <md-icon class="nav-link-icon">not_interested</md-icon>
+                <mat-icon class="nav-link-icon">not_interested</mat-icon>
                 <div class="title">Offline</div>
             </a>
         </div>

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -1,62 +1,62 @@
 <div class="dialog-content-wrapper">
-    <md-toolbar md-dialog-title class="mat-accent m-0">
+    <mat-toolbar matDialogTitle class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">New Message</span>
-            <button md-button class="mat-icon-button"
+            <button mat-button class="mat-icon-button"
                     (click)="dialogRef.close()"
                     aria-label="Close dialog">
-                <md-icon>close</md-icon>
+                <mat-icon>close</mat-icon>
             </button>
         </div>
-    </md-toolbar>
+    </mat-toolbar>
 
-    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
         <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
 
-            <md-input-container>
+            <mat-form-field>
-                <input mdInput name="from"
+                <input matInput name="from"
                        placeholder="From"
                        formControlName="from"
                        type="email">
-            </md-input-container>
+            </mat-form-field>
 
-            <md-input-container>
+            <mat-form-field>
-                <input mdInput name="to"
+                <input matInput name="to"
                        placeholder="To"
                        formControlName="to"
                        type="email" required>
-            </md-input-container>
+            </mat-form-field>
 
-            <md-input-container>
+            <mat-form-field>
-                <input mdInput
+                <input matInput
                        name="cc"
                        placeholder="Cc"
                        formControlName="cc"
                        type="email">
-            </md-input-container>
+            </mat-form-field>
 
-            <md-input-container>
+            <mat-form-field>
-                <input mdInput
+                <input matInput
                        name="bcc"
                        placeholder="Bcc"
                        formControlName="bcc"
                        type="email">
-            </md-input-container>
+            </mat-form-field>
 
-            <md-input-container>
+            <mat-form-field>
-                <input mdInput name="subject"
+                <input matInput name="subject"
                        placeholder="Subject"
                        formControlName="subject">
-            </md-input-container>
+            </mat-form-field>
 
-            <md-input-container>
+            <mat-form-field>
-            <textarea mdInput name="message"
+            <textarea matInput name="message"
                       placeholder="Message"
                       formControlName="message"
                       rows="6">
             </textarea>
-            </md-input-container>
+            </mat-form-field>
 
             <div class="attachment-list">
 
@@ -66,8 +66,8 @@
                         <span class="size">(12 Kb)</span>
                     </div>
 
-                    <button md-icon-button aria-label="Delete attachment">
+                    <button mat-icon-button aria-label="Delete attachment">
-                        <md-icon class="s-16">close</md-icon>
+                        <mat-icon class="s-16">close</mat-icon>
                     </button>
                 </div>
 
@@ -77,17 +77,17 @@
                         <span class="size">(350 Kb)</span>
                     </div>
 
-                    <button md-icon-button aria-label="Delete attachment">
+                    <button mat-icon-button aria-label="Delete attachment">
-                        <md-icon class="s-16">close</md-icon>
+                        <mat-icon class="s-16">close</mat-icon>
                     </button>
                 </div>
             </div>
         </form>
     </div>
 
-    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
         <div>
-            <button md-raised-button
+            <button mat-raised-button
                     (click)="dialogRef.close(['send',composeForm])"
                     class="save-button mat-accent"
                     [disabled]="composeForm.invalid"
@@ -95,17 +95,17 @@
                 SEND
             </button>
 
-            <button md-icon-button md-tooltip="Attach a file">
+            <button mat-icon-button matTooltip="Attach a file">
-                <md-icon>attach_file</md-icon>
+                <mat-icon>attach_file</mat-icon>
             </button>
         </div>
 
-        <button md-button
+        <button mat-button
                 class="mat-icon-button"
                 (click)="dialogRef.close(['delete',composeForm])"
                 aria-label="Delete"
-                md-tooltip="Delete">
+                matTooltip="Delete">
-            <md-icon>delete</md-icon>
+            <mat-icon>delete</mat-icon>
         </button>
     </div>
 </div>

src/app/main/content/apps/mail/dialogs/compose/compose.component.scss

@@ -5,7 +5,7 @@
 
         .compose-form {
 
-            .mat-input-container {
+            .mat-form-field {
                 width: 100%;
             }
 

src/app/main/content/apps/mail/dialogs/compose/compose.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
@@ -13,8 +13,8 @@ export class FuseMailComposeDialogComponent implements OnInit
     composeForm: FormGroup;
 
     constructor(
-        public dialogRef: MdDialogRef<FuseMailComposeDialogComponent>,
+        public dialogRef: MatDialogRef<FuseMailComposeDialogComponent>,
-        @Inject(MD_DIALOG_DATA) private data: any
+        @Inject(MAT_DIALOG_DATA) private data: any
     )
     {
         this.composeForm = this.createComposeForm();

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

@@ -1,5 +1,5 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <md-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</md-icon>
+    <mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</mat-icon>
     <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span>
 </div>
 
@@ -21,14 +21,14 @@
         </div>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                <md-icon *ngIf="mail.starred">star</md-icon>
+                <mat-icon *ngIf="mail.starred">star</mat-icon>
-                <md-icon *ngIf="!mail.starred">star_outline</md-icon>
+                <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
             </button>
 
-            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
+            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
-                <md-icon *ngIf="mail.important">label</md-icon>
+                <mat-icon *ngIf="mail.important">label</mat-icon>
-                <md-icon *ngIf="!mail.important">label_outline</md-icon>
+                <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
             </button>
         </div>
     </div>
@@ -84,27 +84,27 @@
                 </div>
             </div>
 
-            <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
+            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
                     (click)="$event.stopPropagation()">
-                <md-icon>more_vert</md-icon>
+                <mat-icon>more_vert</mat-icon>
             </button>
 
-            <md-menu #moreMenu="mdMenu">
+            <mat-menu #moreMenu="matMenu">
-                <button md-menu-item aria-label="Reply">
+                <button mat-menu-item aria-label="Reply">
-                    <md-icon>reply</md-icon>
+                    <mat-icon>reply</mat-icon>
                     <span>Reply</span>
                 </button>
 
-                <button md-menu-item aria-label="Forward">
+                <button mat-menu-item aria-label="Forward">
-                    <md-icon>forward</md-icon>
+                    <mat-icon>forward</mat-icon>
                     <span>Forward</span>
                 </button>
 
-                <button md-menu-item aria-label="Print">
+                <button mat-menu-item aria-label="Print">
-                    <md-icon>print</md-icon>
+                    <mat-icon>print</mat-icon>
                     <span>Print</span>
                 </button>
-            </md-menu>
+            </mat-menu>
         </div>
 
         <div [innerHTML]="mail.message"></div>

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

@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="start center">
 
-    <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
+    <mat-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
-                 (click)="$event.stopPropagation();"></md-checkbox>
+                  (click)="$event.stopPropagation();"></mat-checkbox>
 
     <div class="info" fxFlex FlexLayout="column">
 
@@ -11,7 +11,7 @@
                 <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
                 <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
                 <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
-                <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
+                <mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
             </div>
 
             <div fxLayout="row" fxLayoutAlign="start center">
@@ -20,15 +20,15 @@
 
                 <!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm>
 
-                    <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+                    <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                        <md-icon *ngIf="mail.starred">star</md-icon>
+                        <mat-icon *ngIf="mail.starred">star</mat-icon>
-                        <md-icon *ngIf="!mail.starred">star_outline</md-icon>
+                        <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
                     </button>
 
-                    <button md-button class="mat-icon-button" (click)="toggleImportant($event)"
+                    <button mat-button class="mat-icon-button" (click)="toggleImportant($event)"
                             aria-label="Toggle important">
-                        <md-icon *ngIf="mail.important">label</md-icon>
+                        <mat-icon *ngIf="mail.important">label</mat-icon>
-                        <md-icon *ngIf="!mail.important">label_outline</md-icon>
+                        <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
                     </button>
 
                 </div>-->

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

@@ -1,9 +1,9 @@
-<div *ngIf="mails.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+<div *ngIf="mails.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
     <span class="no-messages-text hint-text">There are no messages!</span>
 </div>
 
 <div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
-    <fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
+    <fuse-mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
                          [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
                          [@animate]="{value:'*',params:{y:'100%'}}">
     </fuse-mail-list-item>

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

@@ -1,16 +1,16 @@
 <div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg md-accent-bg"></div>
+    <div class="top-bg mat-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
-    <md-sidenav-container>
+    <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" mode="side" opened="true"
-                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
+                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
             <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
-        </md-sidenav>
+        </mat-sidenav>
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
@@ -21,14 +21,14 @@
 
                 <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-                    <button md-button class="mat-icon-button sidenav-toggle"
+                    <button mat-button class="mat-icon-button sidenav-toggle"
-                            fuseMdSidenavToggler="carded-left-sidenav"
+                            fuseMatSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md aria-label="Toggle Sidenav">
-                        <md-icon>menu</md-icon>
+                        <mat-icon>menu</mat-icon>
                     </button>
 
-                    <div class="search md-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
+                    <div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon>search</md-icon>
+                        <mat-icon>search</mat-icon>
                         <input [formControl]="searchInput" placeholder="Search for an e-mail or contact" fxFlex>
                     </div>
                 </div>
@@ -37,57 +37,57 @@
             <!-- / CONTENT HEADER -->
 
             <!-- CONTENT CARD -->
-            <div class="content-card md-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
+            <div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
 
                     <div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
-                        <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
+                        <mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
-                                     [indeterminate]="isIndeterminate"></md-checkbox>
+                                      [indeterminate]="isIndeterminate"></mat-checkbox>
 
-                        <button md-icon-button [mdMenuTriggerFor]="selectMenu">
+                        <button mat-icon-button [matMenuTriggerFor]="selectMenu">
-                            <md-icon>arrow_drop_down</md-icon>
+                            <mat-icon>arrow_drop_down</mat-icon>
                         </button>
-                        <md-menu #selectMenu="mdMenu">
+                        <mat-menu #selectMenu="matMenu">
-                            <button md-menu-item (click)="selectMails()">All</button>
+                            <button mat-menu-item (click)="selectMails()">All</button>
-                            <button md-menu-item (click)="deselectMails()">None</button>
+                            <button mat-menu-item (click)="deselectMails()">None</button>
-                            <button md-menu-item (click)="selectMails('read', true)">Read</button>
+                            <button mat-menu-item (click)="selectMails('read', true)">Read</button>
-                            <button md-menu-item (click)="selectMails('read', false)">Unread</button>
+                            <button mat-menu-item (click)="selectMails('read', false)">Unread</button>
-                            <button md-menu-item (click)="selectMails('starred', true)">Starred</button>
+                            <button mat-menu-item (click)="selectMails('starred', true)">Starred</button>
-                            <button md-menu-item (click)="selectMails('starred', false)">Unstarred</button>
+                            <button mat-menu-item (click)="selectMails('starred', false)">Unstarred</button>
-                            <button md-menu-item (click)="selectMails('important', true)">Important</button>
+                            <button mat-menu-item (click)="selectMails('important', true)">Important</button>
-                            <button md-menu-item (click)="selectMails('important', false)">Unimportant</button>
+                            <button mat-menu-item (click)="selectMails('important', false)">Unimportant</button>
-                        </md-menu>
+                        </mat-menu>
 
                         <div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
 
-                        <button md-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
+                        <button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
-                            <md-icon>delete</md-icon>
+                            <mat-icon>delete</mat-icon>
                         </button>
 
-                        <button md-icon-button [mdMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
+                        <button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
-                            <md-icon>folder</md-icon>
+                            <mat-icon>folder</mat-icon>
                         </button>
-                        <md-menu #folderMenu="mdMenu">
+                        <mat-menu #folderMenu="matMenu">
-                            <button md-menu-item *ngFor="let folder of folders"
+                            <button mat-menu-item *ngFor="let folder of folders"
                                     (click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
                             </button>
-                        </md-menu>
+                        </mat-menu>
 
-                        <button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
+                        <button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
-                            <md-icon>label</md-icon>
+                            <mat-icon>label</mat-icon>
                         </button>
-                        <md-menu #labelMenu="mdMenu">
+                        <mat-menu #labelMenu="matMenu">
-                            <button md-menu-item *ngFor="let label of labels"
+                            <button mat-menu-item *ngFor="let label of labels"
                                     (click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
                             </button>
-                        </md-menu>
+                        </mat-menu>
                     </div>
 
                     <div *ngIf="currentMail" fxHide.gt-lg>
-                        <button md-icon-button (click)="deSelectCurrentMail()">
+                        <button mat-icon-button (click)="deSelectCurrentMail()">
-                            <md-icon>arrow_back</md-icon>
+                            <mat-icon>arrow_back</mat-icon>
                         </button>
                     </div>
                 </div>
@@ -109,6 +109,6 @@
         </div>
         <!-- / CENTER -->
 
-    </md-sidenav-container>
+    </mat-sidenav-container>
 
 </div>

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Mail } from './mail.model';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { FuseUtils } from 'app/core/fuseUtils';
@@ -28,7 +28,7 @@ export class MailService implements Resolve<any>
     onLabelsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
     onSearchTextChanged: BehaviorSubject<any> = new BehaviorSubject('');
 
-    constructor(private http: Http)
+    constructor(private http: HttpClient)
     {
         this.selectedMails = [];
     }
@@ -88,8 +88,8 @@ export class MailService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/mail-folders')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.folders = response.json().data;
+                    this.folders = response;
                     this.onFoldersChanged.next(this.folders);
                     resolve(this.folders);
                 }, reject);
@@ -104,8 +104,8 @@ export class MailService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/mail-filters')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.filters = response.json().data;
+                    this.filters = response;
                     this.onFiltersChanged.next(this.filters);
                     resolve(this.filters);
                 }, reject);
@@ -120,8 +120,8 @@ export class MailService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/mail-labels')
-                .subscribe(response => {
+                .subscribe((response: any) => {
-                    this.labels = response.json().data;
+                    this.labels = response;
                     this.onLabelsChanged.next(this.labels);
                     resolve(this.labels);
                 }, reject);
@@ -157,14 +157,14 @@ export class MailService implements Resolve<any>
         return new Promise((resolve, reject) => {
 
             this.http.get('api/mail-folders?handle=' + handle)
-                .subscribe(folders => {
+                .subscribe((folders: any) => {
 
-                    const folderId = folders.json().data[0].id;
+                    const folderId = folders[0].id;
 
                     this.http.get('api/mail-mails?folder=' + folderId)
-                        .subscribe(mails => {
+                        .subscribe((mails: any) => {
 
-                            this.mails = mails.json().data.map(mail => {
+                            this.mails = mails.map(mail => {
                                 return new Mail(mail);
                             });
 
@@ -189,9 +189,9 @@ export class MailService implements Resolve<any>
         return new Promise((resolve, reject) => {
 
             this.http.get('api/mail-mails?' + handle + '=true')
-                .subscribe(mails => {
+                .subscribe((mails: any) => {
 
-                    this.mails = mails.json().data.map(mail => {
+                    this.mails = mails.map(mail => {
                         return new Mail(mail);
                     });
 
@@ -214,14 +214,14 @@ export class MailService implements Resolve<any>
     {
         return new Promise((resolve, reject) => {
             this.http.get('api/mail-labels?handle=' + handle)
-                .subscribe(labels => {
+                .subscribe((labels: any) => {
 
-                    const labelId = labels.json().data[0].id;
+                    const labelId = labels[0].id;
 
                     this.http.get('api/mail-mails?labels=' + labelId)
-                        .subscribe(mails => {
+                        .subscribe((mails: any) => {
 
-                            this.mails = mails.json().data.map(mail => {
+                            this.mails = mails.map(mail => {
                                 return new Mail(mail);
                             });
 

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

@@ -1,20 +1,22 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
+     class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
+
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon>
+        <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
         <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
     </div>
 
     <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
-        <md-select class="account-selection" placeholder="Mail Selection"
+        <mat-form-field floatPlaceholder="never">
-                   floatPlaceholder="never"
+            <mat-select class="account-selection" placeholder="Mail Selection"
                         [ngModel]="selectedAccount">
-            <md-option *ngFor="let account of (accounts | keys)" [value]="account.key">
+                <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
                     {{account.value}}
-            </md-option>
+                </mat-option>
-        </md-select>
+            </mat-select>
+        </mat-form-field>
     </div>
 
 </div>
@@ -24,7 +26,7 @@
 <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
 
     <div class="p-24">
-        <button md-raised-button fxFlex
+        <button mat-raised-button fxFlex
                 class="mat-accent compose-dialog-button"
                 (click)="composeDialog()"
                 aria-label="Compose">
@@ -37,8 +39,8 @@
         <div class="nav-subheader">FOLDERS</div>
 
         <div class="nav-item" *ngFor="let folder of folders">
-            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
-                <md-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</md-icon>
+                <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
                 <span>{{folder.title}}</span>
             </a>
         </div>
@@ -46,8 +48,8 @@
         <div class="nav-subheader">FILTERS</div>
 
         <div class="nav-item" *ngFor="let filter of filters">
-            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
-                <md-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</md-icon>
+                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
         </div>
@@ -55,8 +57,8 @@
         <div class="nav-subheader">LABELS</div>
 
         <div class="nav-item" *ngFor="let label of labels">
-            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
-                <md-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</md-icon>
+                <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
                 <span>{{label.title}}</span>
             </a>
         </div>

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

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MailService } from '../../mail.service';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
-import { MdDialog } from '@angular/material';
+import { MatDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
 import { fuseAnimations } from '../../../../../../core/animations';
 
@@ -27,7 +27,7 @@ export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
 
     constructor(
         private mailService: MailService,
-        public dialog: MdDialog
+        public dialog: MatDialog
     )
     {
         // Data