Angular and Angular Material 6 compatibility (wip)

src/@fuse/components/search-bar/search-bar.component.html

@@ -15,7 +15,7 @@
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
                fxFlex>
 
-        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
+        <button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
                 aria-label="Collapse Search Bar">
             <mat-icon class="s-24">close</mat-icon>
         </button>

src/@fuse/components/shortcuts/shortcuts.component.html

@@ -17,7 +17,7 @@
                      *ngFor="let shortcutItem of shortcutItems">
 
                     <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+                        <mat-icon class="secondary-text" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -42,11 +42,12 @@
 
         <mat-menu #addMenu="matMenu" class="w-240">
 
-            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatLabel="never">
                 <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
             </mat-form-field>
 
             <mat-divider></mat-divider>
+
             <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
                 <mat-list-item *ngFor="let shortcutItem of shortcutItems"

src/@fuse/components/widget/widget.component.scss

@@ -67,16 +67,16 @@ fuse-widget {
 
         &.mat-form-field-type-mat-select {
 
-            .mat-input-wrapper {
+            .mat-form-field-wrapper {
                 padding: 16px 0;
 
-                .mat-input-infix {
+                .mat-form-field-infix {
                     border: none;
                     padding: 0;
                 }
             }
 
-            .mat-input-underline {
+            .mat-form-field-underline {
                 display: none;
             }
         }

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -7,7 +7,7 @@
 }
 
 // Fix: "Inconsistent font sizes across elements"
-.mat-input-wrapper {
+.mat-form-field-wrapper {
     font-size: 16px;
 }
 
@@ -34,7 +34,7 @@
 
     &.mat-form-field-type-mat-select {
 
-        .mat-input-infix {
+        .mat-form-field-infix {
             display: inline-flex;
             width: auto;
 
@@ -57,7 +57,7 @@
     }
 }
 
-// Fix: "Stepper icons are broken due to Fuse's icon helpers"
+// Fix: Stepper icons are broken due to Fuse's icon helpers
 mat-horizontal-stepper,
 mat-vertical-stepper {
 
@@ -68,11 +68,20 @@ mat-vertical-stepper {
             width: 16px !important;
             min-width: 0 !important;
             min-height: 0 !important;
-            color: rgba(255, 255, 255, 0.87) !important;
+            color: inherit !important;
         }
     }
 }
 
 mat-vertical-stepper {
     padding: 16px 0;
+}
+
+// Fix: Chip remove icon is broken due to Fuse's icon helpers
+mat-chip {
+
+    mat-icon {
+        min-width: 0 !important;
+        min-height: 0 !important;
+    }
 }

src/@fuse/scss/partials/_colors.scss

@@ -1,6 +1,6 @@
 .secondary-text,
-.mat-icon,
-.icon {
+.icon,
+i {
     color: rgba(0, 0, 0, 0.54);
 }
 
@@ -51,7 +51,7 @@ $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)) {
 
-        .mat-icon,
+        i,
         .icon {
             color: rgba(0, 0, 0, 0.54);
         }
@@ -81,7 +81,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         // If the base text color is white...
     @else {
 
-        .mat-icon,
+        i,
         .icon {
             color: rgba(255, 255, 255, 1);
         }
@@ -135,11 +135,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     }
 
     // Input
-    .mat-input-placeholder {
+    .mat-form-field-label {
         color: map_get($fuseForeground, hint-text);
     }
 
-    .mat-input-underline {
+    .mat-form-field-underline {
         background-color: map_get($fuseForeground, divider);
     }
 

src/@fuse/scss/partials/_icons.scss

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

src/@fuse/scss/partials/_reset.scss

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

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

@@ -33,12 +33,12 @@
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-                <button mat-button class="mat-icon-button mr-16 sidenav-toggle"
+                <button mat-icon-button class="mr-16 sidenav-toggle"
                         fuseMatSidenavToggler="academy-left-sidenav" fxHide.gt-md>
                     <mat-icon>menu</mat-icon>
                 </button>
 
-                <button mat-button class="mat-icon-button mr-16" [routerLink]="'/apps/academy/courses'">
+                <button mat--iconbutton class="mr-16" [routerLink]="'/apps/academy/courses'">
                     <mat-icon>arrow_back</mat-icon>
                 </button>
 

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

@@ -33,7 +33,7 @@
                 <mat-form-field class="category-selector">
 
                     <mat-select placeholder="Select Category" [(ngModel)]="currentCategory"
-                                (change)="filterCoursesByCategory()">
+                                (selectionChange)="filterCoursesByCategory()">
                         <mat-option [value]="'all'">
                             All
                         </mat-option>
@@ -46,10 +46,11 @@
 
             </div>
 
-            <div class="courses" fxLayout="row wrap" fxLayoutAlign="center">
+            <div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}"
+                 *fuseIfOnDom>
 
                 <div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50"
-                     fxFlex.gt-sm="33" [ngClass]="course.category">
+                     fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}">
 
                     <div class="course-content" fxLayout="column">
 

src/app/main/content/apps/academy/courses/courses.component.ts

@@ -1,12 +1,15 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
+import { fuseAnimations } from '@fuse/animations';
+
 import { AcademyCoursesService } from '../courses.service';
 
 @Component({
     selector   : 'fuse-academy-courses',
     templateUrl: './courses.component.html',
-    styleUrls  : ['./courses.component.scss']
+    styleUrls  : ['./courses.component.scss'],
+    animations   : fuseAnimations
 })
 export class FuseAcademyCoursesComponent implements OnInit, OnDestroy
 {

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

@@ -15,31 +15,27 @@
                 <!-- TOOLBAR -->
                 <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
+                    <button mat-icon-button aria-label="Search" matTooltip="Search">
                         <mat-icon>search</mat-icon>
                     </button>
 
-                    <button mat-button class="mat-icon-button"
+                    <button mat-icon-button
                             mwlCalendarToday
                             [(viewDate)]="viewDate"
                             (viewDateChange)="selectedDay = {date:$event}"
                             aria-label="Today" matTooltip="Today">
-                        <!--(click)="selectedDay = viewDate"-->
                         <mat-icon>today</mat-icon>
                     </button>
 
-                    <button mat-button class="mat-icon-button" (click)="view='day'"
-                            aria-label="Day" matTooltip="Day">
+                    <button mat-icon-button (click)="view='day'" aria-label="Day" matTooltip="Day">
                         <mat-icon>view_day</mat-icon>
                     </button>
 
-                    <button mat-button class="mat-icon-button" (click)="view='week'"
-                            aria-label="Week" matTooltip="Week">
+                    <button mat-icon-button (click)="view='week'" aria-label="Week" matTooltip="Week">
                         <mat-icon>view_week</mat-icon>
                     </button>
 
-                    <button mat-button class="mat-icon-button" (click)="view='month'"
-                            aria-label="Month" matTooltip="Month">
+                    <button mat-icon-button (click)="view='month'" aria-label="Month" matTooltip="Month">
                         <mat-icon>view_module</mat-icon>
                     </button>
                 </div>
@@ -50,7 +46,7 @@
             <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
                  *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">
 
-                <button mat-button class="mat-icon-button arrow"
+                <button mat-icon-button class="arrow"
                         mwlCalendarPreviousView
                         [view]="view"
                         [(viewDate)]="viewDate"
@@ -63,7 +59,7 @@
                     {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
                 </div>
 
-                <button mat-button class="mat-icon-button arrow"
+                <button mat-icon-button class="arrow"
                         mwlCalendarNextView
                         [view]="view"
                         [(viewDate)]="viewDate"

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

@@ -1,10 +1,8 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar matDialogTitle class="mat-accent m-0">
+    <mat-toolbar class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
         </div>
@@ -136,8 +134,7 @@
         </button>
 
         <button *ngIf="action ==='edit'"
-                mat-button
-                class="mat-icon-button"
+                mat-icon-button
                 (click)="dialogRef.close(['delete',eventForm])"
                 aria-label="Delete"
                 matTooltip="Delete">

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

@@ -9,7 +9,7 @@
             <div fxLayout="row" fxLayoutAlign="start center">
 
                 <!-- RESPONSIVE CHATS BUTTON-->
-                <div mat-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16"
+                <div mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
                      fuseMatSidenavToggler="chat-left-sidenav"
                      aria-label="chats button">
                     <mat-icon class="s-36">chat</mat-icon>
@@ -40,8 +40,7 @@
             </div>
 
             <div>
-                <button mat-button class="mat-icon-button" [matMenuTriggerFor]="contactMenu"
-                        aria-label="more">
+                <button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
 
@@ -98,7 +97,7 @@
               fxLayout="row"
               fxLayoutAlign="start center">
 
-            <mat-form-field class="" fxFlex floatPlaceholder="never">
+            <mat-form-field class="" fxFlex floatLabel="never">
                 <textarea matInput #replyInput placeholder="Type and hit enter to send message"
                           ngModel name="message"></textarea>
             </mat-form-field>

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

@@ -56,7 +56,7 @@
             <!-- / USER AVATAR -->
 
             <div>
-                <button mat-button class="mat-icon-button"
+                <button mat-icon-button
                         [matMenuTriggerFor]="userMenu"
                         aria-label="more">
                     <mat-icon>more_vert</mat-icon>

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

@@ -7,7 +7,7 @@
         <!-- TOOLBAR TOP -->
         <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
 
-            <button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
+            <button mat-icon-button (click)="changeLeftSidenavView('chats')" aria-label="back">
                 <mat-icon>arrow_back</mat-icon>
             </button>
 

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

@@ -9,7 +9,7 @@
 
             <div>Contact Info</div>
 
-            <button mat-button class="mat-icon-button" fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
+            <button mat-icon-button fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
                 <mat-icon>close</mat-icon>
             </button>
 
@@ -36,7 +36,7 @@
     <!-- CONTACT MOOD -->
     <mat-card>
 
-        <mat-form-field fxFlex>
+        <mat-form-field class="w-100-p">
             <textarea matInput placeholder="Mood" name="mood"
                       [value]="contact.mood" rows="3" disabled>
             </textarea>

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

@@ -2,9 +2,7 @@
     <mat-toolbar matDialogTitle class="mat-accent m-0">
         <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
         </mat-toolbar-row>
@@ -116,8 +114,7 @@
         </button>
 
         <button *ngIf="action ==='edit'"
-                mat-button
-                class="mat-icon-button"
+                mat-icon-button
                 (click)="dialogRef.close(['delete',contactForm])"
                 aria-label="Delete"
                 matTooltip="Delete">

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

@@ -8,11 +8,8 @@ fuse-contacts-contact-list {
         box-shadow: none;
 
         .mat-column-checkbox {
-            flex: 0 1 48px;
-
-            .mat-checkbox-ripple {
-                display: none !important; //fix for broken rendering
-            }
+            flex: 0 1 64px;
+            padding-left: 18px;
         }
 
         .mat-column-avatar {
@@ -26,7 +23,7 @@ fuse-contacts-contact-list {
         .mat-row {
             position: relative;
             cursor: pointer;
-            padding: 8px 8px 8px 24px;
+            padding: 8px;
 
             .mat-cell {
                 min-width: 0;
@@ -34,6 +31,7 @@ fuse-contacts-contact-list {
                 &.mat-column-detail-button {
                     flex: 0 1 auto;
                     padding: 0 24px 0 0;
+
                     @include media-breakpoint('gt-md') {
                         display: none;
                     }

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

@@ -7,7 +7,7 @@
         <!-- APP TITLE -->
         <div fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-button class="mat-icon-button sidenav-toggle mr-12"
+            <button mat-icon-button class="sidenav-toggle mr-12"
                     fuseMatSidenavToggler="contacts-main-sidenav"
                     fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
@@ -26,7 +26,7 @@
             <label for="search" class="mr-8">
                 <mat-icon>search</mat-icon>
             </label>
-            <mat-form-field mat-no-float class="m-0" floatPlaceholder="never">
+            <mat-form-field mat-no-float class="m-0" floatLabel="never">
                 <input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
             </mat-form-field>
         </div>

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

@@ -11,7 +11,7 @@
 
         <div>
             <span class="selected-contacts-count">
-                <span>{{selectedContacts.length}}</span>
+                <span class="mr-4">{{selectedContacts.length}}</span>
                 <span>selected</span>
             </span>
 

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

@@ -666,8 +666,8 @@
 
                                         <!-- Avatar Column -->
                                         <ng-container cdkColumnDef="avatar">
-                                            <mat-header-cell fxFlex="64px" *cdkHeaderCellDef></mat-header-cell>
-                                            <mat-cell fxFlex="64px" *cdkCellDef="let contact">
+                                            <mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell>
+                                            <mat-cell fxFlex="96px" *cdkCellDef="let contact">
                                                 <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                                                      [src]="contact.avatar"/>
                                             </mat-cell>

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

@@ -14,7 +14,7 @@
             <!-- APP TITLE -->
             <div fxLayout="row" fxLayoutAlign="start center">
 
-                <button class="mr-16" mat-icon-button [routerLink]="'/apps/e-commerce/orders'">
+                <button mat-icon-button class="mr-16" [routerLink]="'/apps/e-commerce/orders'">
                     <mat-icon>arrow_back</mat-icon>
                 </button>
 
@@ -49,7 +49,7 @@
                             <div class="section pb-48">
 
                                 <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">account_circle</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">account_circle</mat-icon>
                                     <div class="h2 secondary-text">Customer</div>
                                 </div>
 
@@ -88,7 +88,7 @@
                                 <mat-tab-group class="addresses">
 
                                     <mat-tab label="Shipping Address">
-                                        <div fxFlex fxLayout="column" *fuseIfOnDom>
+                                        <div fxFlex fxLayout="column">
                                             <div class="address h4 py-24">{{order.customer.shippingAddress.address}}</div>
                                             <agm-map class="w-100-p h-400" [zoom]="15"
                                                      [latitude]="order.customer.shippingAddress.lat"
@@ -101,7 +101,7 @@
                                     </mat-tab>
 
                                     <mat-tab label="Invoice Address" fxLayout="column">
-                                        <div fxFlex fxLayout="column" *fuseIfOnDom>
+                                        <div fxFlex fxLayout="column">
                                             <div class="address h4 py-24">{{order.customer.invoiceAddress.address}}</div>
                                             <agm-map class="w-100-p h-400" [zoom]="15"
                                                      [latitude]="order.customer.invoiceAddress.lat"
@@ -118,7 +118,7 @@
                             <div class="section pb-48">
 
                                 <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">access_time</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">access_time</mat-icon>
                                     <div class="h2 secondary-text">Order Status</div>
                                 </div>
 
@@ -172,7 +172,7 @@
                             <div class="section pb-48">
 
                                 <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">attach_money</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">attach_money</mat-icon>
                                     <div class="h2 secondary-text">Payment</div>
                                 </div>
 
@@ -216,7 +216,7 @@
                             <div class="section pb-48">
 
                                 <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">local_shipping</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">local_shipping</mat-icon>
                                     <div class="h2 secondary-text">Shipping</div>
                                 </div>
 

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

@@ -26,7 +26,7 @@
                 <label for="search" class="mr-8">
                     <mat-icon class="secondary-text">search</mat-icon>
                 </label>
-                <mat-form-field floatPlaceholder="never" fxFlex="1 0 auto">
+                <mat-form-field floatLabel="never" fxFlex="1 0 auto">
                     <input id="search" matInput #filter placeholder="Search">
                 </mat-form-field>
             </div>

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

@@ -13,11 +13,12 @@
             <!-- APP TITLE -->
             <div fxLayout="row" fxLayoutAlign="start center">
 
-                <button class="mr-0 mr-sm-16" mat-icon-button [routerLink]="'/apps/e-commerce/products'">
+                <button mat-icon-button class="mr-0 mr-sm-16" [routerLink]="'/apps/e-commerce/products'">
                     <mat-icon>arrow_back</mat-icon>
                 </button>
 
-                <div class="product-image mr-8 mr-sm-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+                <div class="product-image mr-8 mr-sm-16" *fuseIfOnDom
+                     [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                     <img *ngIf="product.images[0]" [src]="product.images[0].url">
                     <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                 </div>
@@ -64,6 +65,7 @@
                     <mat-tab-group>
 
                         <mat-tab label="Basic Info">
+
                             <div class="tab-content p-24" fusePerfectScrollbar>
 
                                 <mat-form-field class="w-100-p">
@@ -83,44 +85,46 @@
                                     </textarea>
                                 </mat-form-field>
 
-                                <h3 class="mb-0">Categories</h3>
-                                <mat-form-field class="w-100-p" floatPlaceholder="never">
-                                    <mat-chip-list matPrefix #categoryList
-                                                   name="categories"
-                                                   formControlName="categories">
+                                <mat-form-field class="w-100-p">
+
+                                    <mat-chip-list #categoryList name="categories" formControlName="categories">
 
                                         <mat-chip *ngFor="let category of product.categories"
-                                                  removable="true" (removed)="product.removeCategory(category)">
+                                                  [removable]="true" (removed)="product.removeCategory(category)">
                                             {{category}}
                                             <mat-icon matChipRemove>cancel</mat-icon>
                                         </mat-chip>
+
+                                        <input placeholder="Categories"
+                                               [matChipInputFor]="categoryList"
+                                               [matChipInputAddOnBlur]="true"
+                                               (matChipInputTokenEnd)="product.addCategory($event)"/>
+
                                     </mat-chip-list>
-                                    <input matInput
-                                           matChipInputAddOnBlur="true"
-                                           (matChipInputTokenEnd)="product.addCategory($event)"
-                                           placeholder="Add category..."
-                                           [matChipInputFor]="categoryList"/>
+
                                 </mat-form-field>
 
-                                <h3 class="mb-0">Tags</h3>
-                                <mat-form-field class="w-100-p" floatPlaceholder="never">
-                                    <mat-chip-list matPrefix #tagList
-                                                   name="tags"
-                                                   formControlName="tags">
+                                <mat-form-field class="w-100-p">
+
+                                    <mat-chip-list #tagList name="tags" formControlName="tags">
 
                                         <mat-chip *ngFor="let tag of product.tags"
-                                                  removable="true" (removed)="product.removeTag(tag)">
+                                                  [removable]="true" (removed)="product.removeTag(tag)">
                                             {{tag}}
                                             <mat-icon matChipRemove>cancel</mat-icon>
                                         </mat-chip>
+
+                                        <input placeholder="Tags"
+                                               [matChipInputFor]="tagList"
+                                               [matChipInputAddOnBlur]="true"
+                                               (matChipInputTokenEnd)="product.addTag($event)"/>
+
                                     </mat-chip-list>
-                                    <input matInput
-                                           matChipInputAddOnBlur="true"
-                                           (matChipInputTokenEnd)="product.addTag($event)"
-                                           placeholder="Add tag..."
-                                           [matChipInputFor]="tagList"/>
+
                                 </mat-form-field>
+
                             </div>
+
                         </mat-tab>
 
                         <mat-tab label="Product Images">
@@ -129,7 +133,8 @@
 
                                     <div *ngIf="product.images.length === 0"
                                          class="product-image" fxlayout="row" fxLayoutAlign="center center">
-                                        <img class="media" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
+                                        <img class="media"
+                                             [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                                     </div>
 
                                     <div *ngFor="let image of product.images">
@@ -175,7 +180,8 @@
                                            formControlName="comparedPrice"
                                            placeholder="Compared Price" type="number">
                                     <span matPrefix>$&nbsp;</span>
-                                    <mat-hint align="start">Add a compare price to show next to the real price</mat-hint>
+                                    <mat-hint align="start">Add a compare price to show next to the real price
+                                    </mat-hint>
                                 </mat-form-field>
 
                             </div>

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

@@ -26,7 +26,7 @@
                 <label for="search" class="mr-8">
                     <mat-icon class="secondary-text">search</mat-icon>
                 </label>
-                <mat-form-field floatPlaceholder="never" fxFlex="1 0 auto">
+                <mat-form-field floatLabel="never" fxFlex="1 0 auto">
                     <input id="search" matInput #filter placeholder="Search">
                 </mat-form-field>
             </div>

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

@@ -26,7 +26,7 @@
                     </div>
 
                     <div class="right-side" fxLayout="row">
-                        <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
+                        <button mat-icon-button aria-label="Search" matTooltip="Search">
                             <mat-icon>search</mat-icon>
                         </button>
                     </div>

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

@@ -3,7 +3,7 @@
 
     <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">
 
-        <button mat-icon-button class="mat-icon-button" matTooltip="Delete">
+        <button mat-icon-button matTooltip="Delete">
             <mat-icon>delete</mat-icon>
         </button>
 
@@ -11,7 +11,7 @@
             <mat-icon>file_download</mat-icon>
         </button>
 
-        <button mat-icon-button class="mat-icon-button" aria-label="More" matTooltip="More">
+        <button mat-icon-button aria-label="More" matTooltip="More">
             <mat-icon>more_vert</mat-icon>
         </button>
     </div>

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

@@ -1,10 +1,8 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar matDialogTitle class="mat-accent m-0">
+    <mat-toolbar class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">New Message</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
         </div>
@@ -100,10 +98,7 @@
             </button>
         </div>
 
-        <button mat-button
-                class="mat-icon-button"
-                (click)="dialogRef.close(['delete',composeForm])"
-                aria-label="Delete"
+        <button mat-icon-button (click)="dialogRef.close(['delete',composeForm])" aria-label="Delete"
                 matTooltip="Delete">
             <mat-icon>delete</mat-icon>
         </button>

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

@@ -1,5 +1,5 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-128 mb-16 select-message-icon">
+    <mat-icon class="s-128 mb-16 select-message-icon hint-text">
         email
     </mat-icon>
     <span class="select-message-text hint-text">
@@ -24,12 +24,12 @@
         </div>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+            <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
                 <mat-icon *ngIf="mail.starred">star</mat-icon>
                 <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
             </button>
 
-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
+            <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
                 <mat-icon *ngIf="mail.important">label</mat-icon>
                 <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
             </button>
@@ -87,8 +87,7 @@
                 </div>
             </div>
 
-            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    (click)="$event.stopPropagation()">
+            <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()">
                 <mat-icon>more_vert</mat-icon>
             </button>
 

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

@@ -21,7 +21,7 @@
 
                 <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md aria-label="Toggle Sidenav">
                         <mat-icon>menu</mat-icon>

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

@@ -9,7 +9,7 @@
 
     <div class="account" fxLayout="column">
         <div class="title">John Doe</div>
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field floatLabel="never">
             <mat-select class="account-selection" placeholder="Mail Selection"
                         [ngModel]="selectedAccount">
                 <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
@@ -48,7 +48,8 @@
         <div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let filter of (filters$ | async)">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
+               routerLinkActive="active">
                 <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
@@ -57,7 +58,8 @@
         <div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let label of (labels$ | async)">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle"
+               routerLinkActive="active">
                 <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
                 <span>{{label.title}}</span>
             </a>

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

@@ -1,10 +1,8 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar matDialogTitle class="mat-accent m-0">
+    <mat-toolbar class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">New Message</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                 <mat-icon>close</mat-icon>
             </button>
         </div>
@@ -105,9 +103,7 @@
             </button>
         </div>
 
-        <button mat-button
-                class="mat-icon-button"
-                (click)="dialogRef.close(['delete',composeForm])"
+        <button mat-icon-button (click)="dialogRef.close(['delete',composeForm])"
                 aria-label="Delete"
                 matTooltip="Delete">
             <mat-icon>delete</mat-icon>

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

@@ -1,5 +1,6 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
+    <mat-icon class="s-128 mb-16 select-message-icon hint-text" *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'}}">
@@ -25,12 +26,12 @@
         </div>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+            <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
                 <mat-icon *ngIf="mail.starred">star</mat-icon>
                 <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
             </button>
 
-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
+            <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
                 <mat-icon *ngIf="mail.important">label</mat-icon>
                 <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
             </button>
@@ -88,8 +89,7 @@
                 </div>
             </div>
 
-            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    (click)="$event.stopPropagation()">
+            <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()">
                 <mat-icon>more_vert</mat-icon>
             </button>
 

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

@@ -21,7 +21,7 @@
 
                 <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md aria-label="Toggle Sidenav">
                         <mat-icon>menu</mat-icon>

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

@@ -9,7 +9,7 @@
 
     <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field floatLabel="never">
             <mat-select class="account-selection" placeholder="Mail Selection"
                         [ngModel]="selectedAccount">
                 <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">

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

@@ -35,7 +35,8 @@
 
                     <mat-menu #labelsMenu="matMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
 
-                        <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
+                        <fuse-scrumboard-label-selector [card]="card"
+                                                        (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
 
                     </mat-menu>
                 </div>
@@ -49,7 +50,8 @@
                     </button>
 
                     <mat-menu #membersMenu="matMenu" [overlapTrigger]="false">
-                        <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
+                        <div fxFlex fxLayout="column" class="scrumboard-members-menu"
+                             (click)="$event.stopPropagation()">
                             <mat-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
                                           *ngFor="let member of board.members"
                                           (change)="toggleInArray(member.id, card.idMembers);updateCard()">
@@ -72,20 +74,25 @@
                 <!-- CHECKLIST -->
                 <div class="due-date " fxFlex="0 1 auto">
 
-                    <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
+                    <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu"
+                            #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
                         <mat-icon>check_box</mat-icon>
                     </button>
 
                     <mat-menu #checklistMenu="matMenu" [overlapTrigger]="false">
 
-                        <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
+                        <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)"
+                              (click)="$event.stopPropagation()"
                               fxLayout="column" fxLayoutAlign="start end">
 
-                            <mat-form-field floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
-                                <input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
+                            <mat-form-field floatLabel="never" (click)="$event.stopPropagation()" fxFlex>
+                                <input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel"
+                                       name="checklistTitle" placeholder="Checklist title" required>
                             </mat-form-field>
 
-                            <button mat-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
+                            <button mat-raised-button class="mat-accent" aria-label="Add Checklist"
+                                    [disabled]="!newChecklistForm.valid">Add Checklist
+                            </button>
                         </form>
 
                     </mat-menu>
@@ -127,7 +134,9 @@
                 <mat-icon>close</mat-icon>
             </button>
             <!-- / CLOSE DIALOG BUTTON -->
+
         </div>
+
     </mat-toolbar>
 
     <div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
@@ -146,7 +155,7 @@
             <!-- DUE DATE -->
             <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
 
-                <mat-form-field floatPlaceholder="never">
+                <mat-form-field floatLabel="never">
                     <input matInput [matDatepicker]="picker" [(ngModel)]="card.due" placeholder="Choose a due date">
                     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                     <mat-datepicker #picker></mat-datepicker>
@@ -164,7 +173,7 @@
         <div fxLayout="row" fxLayoutAlign="start center">
             <mat-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</mat-icon>
             <div class="card-name">
-                <mat-form-field floatPlaceholder="never" fxFlex>
+                <mat-form-field floatLabel="never" class="w-100-p">
                     <input matInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
                 </mat-form-field>
             </div>
@@ -173,8 +182,9 @@
 
         <!-- DESCRIPTION -->
         <div class="description">
-            <mat-form-field fxFlex>
-                <textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1" mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
+            <mat-form-field class="w-100-p">
+                <textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1"
+                          mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
             </mat-form-field>
         </div>
         <!-- / DESCRIPTION -->
@@ -198,7 +208,9 @@
                                       [ngClass]="board.labels | getById:labelId:'color'"
                                       fxLayout="row" fxLayoutAlign="start center">
                                 <span>{{board.labels|getById:labelId:'name'}}</span>
-                                <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon>
+                                <mat-icon class="ml-8 s-16 chip-remove"
+                                          (click)="toggleInArray(labelId, card.idLabels);updateCard()">close
+                                </mat-icon>
                             </mat-chip>
                         </mat-chip-list>
                     </div>
@@ -215,7 +227,9 @@
                                       fxLayout="row" fxLayoutAlign="start center">
                                 <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
                                      [matTooltip]="board.members | getById:memberId:'name'">
-                                <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</mat-icon>
+                                <mat-icon class="ml-8 s-16 chip-remove"
+                                          (click)="toggleInArray(memberId, card.idMembers);updateCard()">close
+                                </mat-icon>
                             </mat-chip>
                         </mat-chip-list>
                     </div>
@@ -257,7 +271,8 @@
                                     <span class="attachment-time">{{item.time}}</span>
 
                                     <div>
-                                        <button mat-raised-button class="attachment-actions-button" [matMenuTriggerFor]="attachmentActionsMenu">
+                                        <button mat-raised-button class="attachment-actions-button"
+                                                [matMenuTriggerFor]="attachmentActionsMenu">
                                             <span fxLayout="row" fxLayoutAlign="center center">
                                                 <span>Actions</span>
                                                 <mat-icon class="s-20">arrow_drop_down</mat-icon>
@@ -313,7 +328,8 @@
 
 
                         <div>
-                            <button mat-icon-button class="checklist-actions-button" [matMenuTriggerFor]="checklistActionsMenu">
+                            <button mat-icon-button class="checklist-actions-button"
+                                    [matMenuTriggerFor]="checklistActionsMenu">
                                 <mat-icon class="s-20">more_vert</mat-icon>
                             </button>
                             <mat-menu #checklistActionsMenu="matMenu">
@@ -341,7 +357,8 @@
 
                         <div class="check-items">
 
-                            <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row"
+                                 fxLayoutAlign="space-between center">
 
                                 <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                                     <mat-checkbox [(ngModel)]="checkItem.checked"
@@ -353,21 +370,24 @@
                                     </mat-form-field>
                                 </div>
 
-                                <button mat-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
+                                <button mat-icon-button class="checklist-actions-button"
+                                        (click)="removeChecklistItem(checkItem, checklist)">
                                     <mat-icon class="s-20">delete</mat-icon>
                                 </button>
 
                             </div>
                         </div>
 
-                        <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
+                        <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)"
+                              name="newCheckItemForm" class="new-check-item-form"
                               fxLayout="row" fxLayoutAlign="start center">
 
                             <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
                                 <mat-icon class="s-20">add</mat-icon>
 
                                 <mat-form-field class="no-errors-spacer mx-12" fxFlex>
-                                    <input matInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
+                                    <input matInput ngModel #checkItem="ngModel" name="checkItem"
+                                           placeholder="Add an item" autocomplete="off">
                                 </mat-form-field>
                             </div>
 
@@ -444,7 +464,8 @@
                     </div>
 
                     <div class="section-content">
-                        <div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
+                        <div class="activity" fxLayout="row" fxLayoutAlign="start center"
+                             *ngFor="let activity of card.activities">
                             <img class="activity-member-avatar"
                                  [src]="board.members| getById:activity.idMember:'avatar'">
                             <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>

src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html

@@ -11,7 +11,7 @@
 
     <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
 
-        <mat-form-field fxFlex floatPlaceholder="never">
+        <mat-form-field fxFlex floatLabel="never">
             <input #nameInput matInput formControlName="name" placeholder="Card title" autocomplete="off" required>
         </mat-form-field>
 

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

@@ -3,12 +3,12 @@
      class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
-        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
+        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-Do</span>
     </div>
 
     <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field floatLabel="never">
             <mat-select class="account-selection" placeholder="Todo Selection"
                         [ngModel]="selectedAccount">
                 <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">

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

@@ -11,26 +11,26 @@
 
     <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
 
-        <button mat-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
+        <button mat-button class="toggle-complete-button" (click)="toggleCompleted($event)"
                 aria-label="Toggle completed" fxFlex="0 1 auto">
             <mat-icon *ngIf="todo.completed">check_box</mat-icon>
             <mat-icon *ngIf="!todo.completed">check_box_outline_blank</mat-icon>
-            <span>Mark as Done</span>
+            <span class="ml-8">Mark as Done</span>
         </button>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-button class="mat-icon-button" (click)="toggleDeleted($event)" aria-label="Toggle delete">
+            <button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
                 <mat-icon *ngIf="todo.deleted">delete_forever</mat-icon>
                 <mat-icon *ngIf="!todo.deleted">delete</mat-icon>
             </button>
 
-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
+            <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
                 <mat-icon *ngIf="todo.important">error</mat-icon>
                 <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
             </button>
 
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+            <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
                 <mat-icon *ngIf="todo.starred">star</mat-icon>
                 <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
             </button>
@@ -53,7 +53,7 @@
 
         <form [formGroup]="todoForm" (submit)="addTodo()">
 
-            <mat-form-field class="title mt-8" floatPlaceholder="never" fxFill>
+            <mat-form-field class="title mt-8" floatLabel="never" fxFill>
                 <textarea matInput
                           #titleInput
                           name="title"

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

@@ -14,7 +14,6 @@
         .actions {
             min-width: 88px;
         }
-
     }
 
     .todo-content {

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

@@ -33,20 +33,20 @@
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)"
+            <button mat-icon-button (click)="toggleImportant($event)"
                     aria-label="Toggle important" fxHide.xs>
                 <mat-icon *ngIf="todo.important">error</mat-icon>
                 <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
             </button>
 
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)"
+            <button mat-icon-button (click)="toggleStar($event)"
                     aria-label="Toggle star" fxHide.xs>
                 <mat-icon *ngIf="todo.starred">star</mat-icon>
                 <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
             </button>
 
-            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    (click)="$event.stopPropagation();" fxHide.xs>
+            <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()"
+                    fxHide.xs>
                 <mat-icon>more_vert</mat-icon>
             </button>
 

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

@@ -21,7 +21,7 @@
 
                 <div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md aria-label="Toggle Sidenav">
                         <mat-icon>menu</mat-icon>
@@ -29,7 +29,7 @@
 
                     <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
                         <mat-icon>search</mat-icon>
-                        <input [formControl]="searchInput" placeholder="Search for an todo" fxFlex>
+                        <input [formControl]="searchInput" placeholder="Search for a task" fxFlex>
                     </div>
                 </div>
 

src/app/main/content/components/angular-material/angular-material.component.html

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

src/app/main/content/components/angular-material/example-viewer/example-viewer.html

@@ -64,8 +64,8 @@
     </div>
 
     <div class="example-viewer-body" [fxHide]="showSource">
-        <!--<ng-template [portalHost]="selectedPortal"></ng-template>-->
-        <!--<ng-template [cdkPortalHost]="selectedPortal"></ng-template>-->
+        <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
+        <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
         <div #previewContainer></div>
     </div>
 </div>

src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html

@@ -35,7 +35,7 @@
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                    <button mat-icon-button class="sidenav-toggle mr-8"
                             fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
                         <mat-icon>menu</mat-icon>
                     </button>

src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -41,7 +41,7 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md>
                         <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html

@@ -35,7 +35,7 @@
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                    <button mat-icon-button class="sidenav-toggle mr-8"
                             fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
                         <mat-icon>menu</mat-icon>
                     </button>

src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html

@@ -41,7 +41,7 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md>
                         <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html

@@ -14,7 +14,7 @@
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                    <button mat-icon-button class="sidenav-toggle mr-8"
                             fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
                         <mat-icon>menu</mat-icon>
                     </button>

src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -20,7 +20,7 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-right-sidenav"
                             fxHide.gt-md>
                         <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html

@@ -14,7 +14,7 @@
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
-                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                    <button mat-icon-button class="sidenav-toggle mr-8"
                             fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
                         <mat-icon>menu</mat-icon>
                     </button>

src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html

@@ -20,7 +20,7 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                             fuseMatSidenavToggler="carded-right-sidenav"
                             fxHide.gt-md>
                         <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html

@@ -17,7 +17,7 @@
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-                <button mat-button class="mat-icon-button sidenav-toggle"
+                <button mat-icon-button class="sidenav-toggle"
                         fuseMatSidenavToggler="simple-left-sidenav-2"
                         fxHide.gt-md>
                     <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html

@@ -3,7 +3,7 @@
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-        <button mat-button class="mat-icon-button sidenav-toggle"
+        <button mat-icon-button class="sidenav-toggle"
                 fuseMatSidenavToggler="simple-left-sidenav-3"
                 fxHide.gt-md>
             <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html

@@ -21,7 +21,7 @@
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-                <button mat-button class="mat-icon-button sidenav-toggle"
+                <button mat-icon-button class="sidenav-toggle"
                         fuseMatSidenavToggler="simple-left-sidenav"
                         fxHide.gt-md>
                     <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html

@@ -8,7 +8,7 @@
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-                <button mat-button class="mat-icon-button sidenav-toggle"
+                <button mat-icon-button class="sidenav-toggle"
                         fuseMatSidenavToggler="simple-right-sidenav-2"
                         fxHide.gt-md>
                     <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html

@@ -3,7 +3,7 @@
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-        <button mat-button class="mat-icon-button sidenav-toggle"
+        <button mat-icon-button class="sidenav-toggle"
                 fuseMatSidenavToggler="simple-right-sidenav-3"
                 fxHide.gt-md>
             <mat-icon>menu</mat-icon>

src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html

@@ -8,7 +8,7 @@
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
-                <button mat-button class="mat-icon-button sidenav-toggle"
+                <button mat-icon-button class="sidenav-toggle"
                         fuseMatSidenavToggler="simple-right-sidenav"
                         fxHide.gt-md>
                     <mat-icon>menu</mat-icon>

src/app/main/navbar/navbar.component.html

@@ -9,12 +9,12 @@
                 <span class="logo-text">FUSE</span>
             </div>
 
-            <button mat-button class="toggle-button-navbar mat-icon-button"
+            <button mat-icon-button class="toggle-button-navbar"
                     (click)="toggleSidebarFolded()" fxHide.lt-lg>
                 <mat-icon>menu</mat-icon>
             </button>
 
-            <button mat-button class="toggle-button-navbar mat-icon-button"
+            <button mat-icon-button class="toggle-button-navbar"
                     (click)="toggleSidebarOpened()" fxHide.gt-md>
                 <mat-icon>arrow_back</mat-icon>
             </button>

src/app/main/toolbar/toolbar.component.html

@@ -6,7 +6,7 @@
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-button class="toggle-button-navbar mat-icon-button"
+            <button mat-icon-button class="toggle-button-navbar"
                     *ngIf="!noNav"
                     (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
@@ -91,7 +91,7 @@
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
             <button mat-icon-button
-                    class="mat-icon-button quick-panel-toggle-button"
+                    class="quick-panel-toggle-button"
                     fuseMatSidenavToggler="quick-panel"
                     aria-label="Toggle quick panel">
                 <mat-icon class="icon">format_list_bulleted</mat-icon>

src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html

@@ -4,7 +4,7 @@
       *ngFor="let fruit of fruits"
       [selectable]="selectable"
       [removable]="removable"
-      (remove)="remove(fruit)">
+      (removed)="remove(fruit)">
       {{fruit.name}}
       <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
     </mat-chip>