Update angular material prefix to mat and lock down package versions

.npmrc

@@ -0,0 +1 @@
+save-exact=true

package.json

@@ -13,46 +13,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.4.4",
-    "@angular/cdk": "^2.0.0-beta.11",
-    "@angular/common": "^4.2.4",
-    "@angular/compiler": "^4.2.4",
-    "@angular/core": "^4.2.4",
-    "@angular/forms": "^4.2.4",
-    "@angular/http": "^4.2.4",
-    "@angular/material": "^2.0.0-beta.11",
-    "@angular/platform-browser": "^4.2.4",
-    "@angular/platform-browser-dynamic": "^4.2.4",
-    "@angular/router": "^4.2.4",
-    "@types/hammerjs": "^2.0.35",
-    "core-js": "^2.4.1",
-    "hammerjs": "^2.0.8",
-    "rxjs": "^5.4.2",
-    "zone.js": "^0.8.14"
+    "@angular/animations": "4.4.4",
+    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/common": "4.4.4",
+    "@angular/compiler": "4.4.4",
+    "@angular/core": "4.4.4",
+    "@angular/forms": "4.4.4",
+    "@angular/http": "4.4.4",
+    "@angular/material": "2.0.0-beta.12",
+    "@angular/platform-browser": "4.4.4",
+    "@angular/platform-browser-dynamic": "4.4.4",
+    "@angular/router": "4.4.4",
+    "@types/hammerjs": "2.0.35",
+    "core-js": "2.4.1",
+    "hammerjs": "2.0.8",
+    "rxjs": "5.4.2",
+    "zone.js": "0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.3",
-    "@angular/compiler-cli": "^4.2.4",
-    "@angular/language-service": "^4.2.4",
-    "@angular/service-worker": "^1.0.0-beta.16",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "angular2-template-loader": "^0.6.2",
-    "codelyzer": "~3.1.1",
-    "electron": "^1.6.11",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.2.0",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3",
+    "@angular/cli": "1.4.5",
+    "@angular/compiler-cli": "4.4.4",
+    "@angular/language-service": "4.4.4",
+    "@angular/service-worker": "1.0.0-beta.16",
+    "@types/jasmine": "2.5.53",
+    "@types/jasminewd2": "2.0.2",
+    "@types/node": "6.0.60",
+    "angular2-template-loader": "0.6.2",
+    "codelyzer": "3.1.1",
+    "electron": "1.6.11",
+    "jasmine-core": "2.6.2",
+    "jasmine-spec-reporter": "4.1.0",
+    "karma": "1.7.0",
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.1.2",
+    "ts-node": "3.2.0",
+    "tslint": "5.3.2",
+    "typescript": "2.3.3",
     "wallaby-webpack": "*"
   }
 }

src/app/app.component.html

@@ -1,24 +1,24 @@
 <div class="app-fullpage">
-  <md-toolbar color="accent" class="mat-elevation-z6">
-    <button md-icon-button (click)="sidenav.toggle()">
-    <md-icon>
+  <mat-toolbar color="accent" class="mat-elevation-z6">
+    <button mat-icon-button (click)="sidenav.toggle()">
+    <mat-icon>
       menu
-    </md-icon>
+    </mat-icon>
   </button>
     <span class="title"> RxJS Docs </span>
-  </md-toolbar>
-  <md-sidenav-container>
-    <md-sidenav #sidenav>
-      <md-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" md-list-item routerLinkActive="active"
+  </mat-toolbar>
+  <mat-sidenav-container>
+    <mat-sidenav #sidenav>
+      <mat-nav-list (click)="sidenav.toggle()">
+        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
           [routerLinkActiveOptions]="menu.options"
           [routerLink]="menu.link">
-         {{menu.title}} 
+         {{menu.title}}
         </a>
-      </md-nav-list>
-    </md-sidenav>
+      </mat-nav-list>
+    </mat-sidenav>
     <div class="body-margin">
       <router-outlet></router-outlet>
     </div>
-  </md-sidenav-container>
-</div>
+  </mat-sidenav-container>
+</div>

src/app/app.component.spec.ts

@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdListModule } from '@angular/material';
+import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
@@ -10,7 +10,15 @@ describe('AppComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, BrowserAnimationsModule, MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdListModule],
+      imports: [
+        RouterTestingModule,
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatSidenavModule,
+        MatIconModule,
+        MatButtonModule,
+        MatListModule
+      ],
       declarations: [AppComponent]
     })
       .compileComponents();

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdListModule } from '@angular/material';
+import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
 import { RXJS_DOC_ROUTES } from './app.routing';
@@ -24,11 +24,11 @@ import { RxjsComponent } from './rxjs/rxjs.component';
     BrowserModule,
     BrowserAnimationsModule,
     RouterModule.forRoot(RXJS_DOC_ROUTES),
-    MdToolbarModule,
-    MdSidenavModule,
-    MdIconModule,
-    MdButtonModule,
-    MdListModule
+    MatToolbarModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatButtonModule,
+    MatListModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.scss

@@ -27,17 +27,17 @@ html, body {
   flex-direction: column;
 }
 
-md-sidenav-container {
+mat-sidenav-container {
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
 }
 
-md-sidenav { 
+mat-sidenav {
   width: 200px;
 }
 
-md-sidenav a.active .mat-list-item-content {
+mat-sidenav a.active .mat-list-item-content {
   color: mat-color($accent);
 }