diff --git a/.circleci/config.yml b/.circleci/config.yml
index a3ab42386..b9cf686f6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -47,6 +47,7 @@ jobs:
 
   build:
     <<: *job_defaults
+    resource_class: xlarge
     steps:
       - checkout:
           <<: *post_checkout
diff --git a/WORKSPACE b/WORKSPACE
index c81b9a42b..ed0ae7d12 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -23,8 +23,8 @@ http_archive(
 # The @angular repo contains rule for building Angular applications
 http_archive(
     name = "angular",
-    url = "https://github.com/angular/angular/archive/7.0.1.zip",
-    strip_prefix = "angular-7.0.1",
+    url = "https://github.com/angular/angular/archive/7.0.2.zip",
+    strip_prefix = "angular-7.0.2",
 )
 
 # The @rxjs repo contains targets for building rxjs with bazel
@@ -35,6 +35,14 @@ http_archive(
     sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
 )
 
+# Angular material
+# TODO(gmagolan): update to next tagged https://github.com/angular/material2
+http_archive(
+    name = "angular_material",
+    url = "https://github.com/angular/material2/archive/150c964c320c8573b6c02eb0a7024bb2919a22c2.zip",
+    strip_prefix = "material2-150c964c320c8573b6c02eb0a7024bb2919a22c2",
+)
+
 # Rules for compiling sass
 http_archive(
     name = "io_bazel_rules_sass",
@@ -97,3 +105,7 @@ sass_repositories()
 load("@angular//:index.bzl", "ng_setup_workspace")
 
 ng_setup_workspace()
+
+load("@angular_material//:index.bzl", "angular_material_setup_workspace")
+
+angular_material_setup_workspace()
diff --git a/package.json b/package.json
index 1d2296240..6ed360336 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,14 @@
         "zone.js": "0.8.26"
     },
     "devDependencies": {
-        "@angular/bazel": "7.0.1",
-        "@angular/compiler": "7.0.1",
-        "@angular/compiler-cli": "7.0.1",
-        "@angular/core": "7.0.1",
+        "@angular/animations": "7.0.2",
+        "@angular/bazel": "7.0.2",
+        "@angular/cdk": "7.0.2",
+        "@angular/compiler": "7.0.2",
+        "@angular/compiler-cli": "7.0.2",
+        "@angular/common": "7.0.2",
+        "@angular/core": "7.0.2",
+        "@angular/material": "7.0.2",
         "@bazel/benchmark-runner": "0.1.0",
         "@bazel/ibazel": "0.5.0",
         "@bazel/karma": "0.20.3",
diff --git a/src/BUILD.bazel b/src/BUILD.bazel
index 857139b0e..63322536e 100644
--- a/src/BUILD.bazel
+++ b/src/BUILD.bazel
@@ -18,6 +18,7 @@ ng_module(
     tsconfig = ":tsconfig.json",
     deps = [
         "//src/hello-world",
+        "//src/material",
         "//src/todos",
         "@angular//packages/core",
         "@angular//packages/router",
@@ -35,12 +36,14 @@ ts_devserver(
     additional_root_paths = [
         "npm/node_modules/zone.js/dist",
         "npm/node_modules/tslib",
+        "npm/node_modules/@angular/material/prebuilt-themes",
         "npm/node_modules/@ngrx/store/bundles",
     ],
     # Start from the development version of the main
     entry_module = "angular_bazel_example/src/main.dev",
     scripts = [
         ":require.config.js",
+        ":module-id.js",
     ],
     # This is the URL we'll point our <script> tag at
     serving_path = "/bundle.min.js",
@@ -48,6 +51,7 @@ ts_devserver(
     static_files = [
         "@npm//node_modules/zone.js:dist/zone.min.js",
         "@npm//node_modules/tslib:tslib.js",
+        "@npm//node_modules/@angular/material:prebuilt-themes/deeppurple-amber.css",
         "@npm//node_modules/@ngrx/store:bundles/store.umd.min.js",
         "index.html",
     ],
@@ -93,6 +97,14 @@ genrule(
     cmd = "cp $< $@",
 )
 
+# See comment for zonejs above
+genrule(
+    name = "copy_material_theme",
+    srcs = ["@npm//node_modules/@angular/material:prebuilt-themes/deeppurple-amber.css"],
+    outs = ["deeppurple-amber.css"],
+    cmd = "cp $< $@",
+)
+
 load("@build_bazel_rules_nodejs//:defs.bzl", "history_server")
 
 history_server(
@@ -100,6 +112,7 @@ history_server(
     data = [
         "index.html",
         ":bundle",
+        ":copy_material_theme",
         ":copy_systemjs",
         ":copy_zonejs",
     ],
diff --git a/src/app.component.html b/src/app.component.html
index a5ba60baf..73f474317 100644
--- a/src/app.component.html
+++ b/src/app.component.html
@@ -1,2 +1,4 @@
-<nav><a routerLink="/">Home</a> | <a routerLink="/todos">Todos</a></nav>
+<mat-toolbar>
+  <nav><a routerLink="/">Home</a> | <a routerLink="/todos">Todos</a></nav>
+</mat-toolbar>
 <router-outlet></router-outlet>
diff --git a/src/app.module.ts b/src/app.module.ts
index f70efbd78..4f4ee4580 100644
--- a/src/app.module.ts
+++ b/src/app.module.ts
@@ -1,15 +1,20 @@
 
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {StoreModule} from '@ngrx/store';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {MaterialModule} from './material/material.module';
 import {todoReducer} from './reducers/reducers';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, StoreModule.forRoot({todoReducer})],
+  imports: [
+    AppRoutingModule, BrowserModule, BrowserAnimationsModule, MaterialModule,
+    StoreModule.forRoot({todoReducer})
+  ],
   exports: [AppComponent],
   bootstrap: [AppComponent],
 })
diff --git a/src/hello-world/BUILD.bazel b/src/hello-world/BUILD.bazel
index 844599d34..7a2bde635 100644
--- a/src/hello-world/BUILD.bazel
+++ b/src/hello-world/BUILD.bazel
@@ -20,12 +20,13 @@ ng_module(
         ":hello-world.component.html",
         ":hello-world-styles",
     ],
+    tsconfig = "//src:tsconfig.json",
     deps = [
         "//src/lib",
+        "//src/material",
         "@angular//packages/core",
         "@angular//packages/forms",
         "@angular//packages/router",
-        "@npm//@types",
     ],
 )
 
@@ -39,6 +40,7 @@ ts_library(
         "@angular//packages/core/testing",
         "@angular//packages/platform-browser",
         "@angular//packages/platform-browser-dynamic/testing",
+        "@angular//packages/platform-browser/animations",
         "@npm//@types/jasmine",
         "@npm//@types/node",
     ],
@@ -51,6 +53,7 @@ ts_web_test_suite(
     bootstrap = [
         "@npm//node_modules/zone.js:dist/zone-testing-bundle.js",
         "@npm//node_modules/reflect-metadata:Reflect.js",
+        "//src:module-id.js",
     ],
     browsers = [
         "@io_bazel_rules_webtesting//browsers:chromium-local",
diff --git a/src/hello-world/hello-world.component.html b/src/hello-world/hello-world.component.html
index d61ec5487..e2c38cafd 100644
--- a/src/hello-world/hello-world.component.html
+++ b/src/hello-world/hello-world.component.html
@@ -2,4 +2,6 @@ <h1>Home</h1>
 
 <div>Hello {{ name }}</div>
 
-<input type="text" [(ngModel)]="name"/>
+<mat-form-field><input matInput [(ngModel)]="name"/></mat-form-field>
+
+<div><mat-icon>mood</mat-icon></div>
diff --git a/src/hello-world/hello-world.component.spec.ts b/src/hello-world/hello-world.component.spec.ts
index edde5e4f2..5764df4d7 100644
--- a/src/hello-world/hello-world.component.spec.ts
+++ b/src/hello-world/hello-world.component.spec.ts
@@ -1,6 +1,7 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 import {HelloWorldComponent} from './hello-world.component';
 import {HelloWorldModuleNgSummary} from './hello-world.module.ngsummary';
@@ -21,6 +22,7 @@ describe('BannerComponent (inline template)', () => {
     TestBed.configureTestingModule({
       declarations: [HelloWorldComponent],  // declare the test component
       aotSummaries: HelloWorldModuleNgSummary,
+      imports: [BrowserAnimationsModule],
     });
     TestBed.compileComponents();
   }));
diff --git a/src/hello-world/hello-world.module.ts b/src/hello-world/hello-world.module.ts
index d84b034d9..4a12764c2 100644
--- a/src/hello-world/hello-world.module.ts
+++ b/src/hello-world/hello-world.module.ts
@@ -1,13 +1,15 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {MaterialModule} from '../material/material.module';
 
 import {HelloWorldComponent} from './hello-world.component';
 
 @NgModule({
   declarations: [HelloWorldComponent],
   imports: [
-    FormsModule, RouterModule, RouterModule.forChild([{path: '', component: HelloWorldComponent}])
+    FormsModule, RouterModule, MaterialModule,
+    RouterModule.forChild([{path: '', component: HelloWorldComponent}])
   ],
   exports: [HelloWorldComponent],
 })
diff --git a/src/index.html b/src/index.html
index 4603ae86c..9208b07a6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,8 @@
   <head>
     <title>Angular Bazel Example</title>
     <base href="/">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link href="/deeppurple-amber.css" rel="stylesheet">
   </head>
   <body>
     <!-- The Angular application will be bootstrapped into this element. -->
diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel
new file mode 100644
index 000000000..d6999d440
--- /dev/null
+++ b/src/material/BUILD.bazel
@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@angular//:index.bzl", "ng_module")
+
+ng_module(
+    name = "material",
+    srcs = glob(["*.ts"]),
+    tsconfig = "//src:tsconfig.json",
+    deps = [
+        "@angular//packages/core",
+        "@angular_material//src/lib:material",
+    ],
+)
diff --git a/src/material/material.module.ts b/src/material/material.module.ts
new file mode 100644
index 000000000..2b53dc5f6
--- /dev/null
+++ b/src/material/material.module.ts
@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatToolbarModule} from '@angular/material';
+
+const matModules =
+    [MatButtonModule, MatInputModule, MatFormFieldModule, MatIconModule, MatToolbarModule];
+
+@NgModule({
+  imports: matModules,
+  exports: matModules,
+})
+export class MaterialModule {
+}
\ No newline at end of file
diff --git a/src/module-id.js b/src/module-id.js
new file mode 100644
index 000000000..71aa9e8e1
--- /dev/null
+++ b/src/module-id.js
@@ -0,0 +1,6 @@
+// Work-around for angular material issue with ts_devserver and ts_web_test_suite.
+// Material requires `module.id` to be valid. This symbol is valid in the production
+// bundle but not in ts_devserver and ts_web_test_suite.
+// See https://github.com/angular/material2/issues/13883.
+// TODO(gmagolan): remove this work-around once #13883 is resolved.
+var module = {id: ''};
diff --git a/src/todos/BUILD.bazel b/src/todos/BUILD.bazel
index 3f1181c83..cc0b756e7 100644
--- a/src/todos/BUILD.bazel
+++ b/src/todos/BUILD.bazel
@@ -20,15 +20,16 @@ ng_module(
         "todos.component.html",
         ":todos-styles",
     ],
+    tsconfig = "//src:tsconfig.json",
     deps = [
         "//src/lib",
+        "//src/material",
         "//src/reducers",
         "@angular//packages/common",
         "@angular//packages/core",
         "@angular//packages/forms",
         "@angular//packages/router",
         "@npm//@ngrx/store",
-        "@npm//@types",
         "@rxjs",
     ],
 )
diff --git a/src/todos/todos.component.html b/src/todos/todos.component.html
index b935bed4c..339cfda4b 100644
--- a/src/todos/todos.component.html
+++ b/src/todos/todos.component.html
@@ -1,20 +1,21 @@
 <h1>Todos</h1>
 
-<input placeholder="your todo" [(ngModel)]="todo">
+<mat-form-field><input matInput placeholder="your todo" [(ngModel)]="todo"></mat-form-field>
 
-<button
+<button mat-raised-button color="primary"
   (click)="addTodo(todo)"
-  [disabled]="!todo"
+  [disabled]=!todo
   *ngIf="!editing">
     Add todo
 </button>
 
-<button
+<button mat-raised-button
   (click)="updateTodo(todo)"
   *ngIf="editing">
     Update
 </button>
-<button
+
+<button mat-raised-button color="warn"
   (click)="cancelEdit()"
   *ngIf="editing">
     Cancel
@@ -23,8 +24,8 @@ <h1>Todos</h1>
 <ul>
   <li *ngFor="let todo of todos$ | async; let i = index;">
     <span [class.done]="todo.done">{{ todo.value }}</span>
-    <button (click)="editTodo(todo, i)">Edit</button>
-    <button (click)="toggleDone(todo, i)">Toggle Done</button>
-    <button (click)="deleteTodo(i)">X</button>
+    <button mat-raised-button (click)="editTodo(todo, i)">Edit</button>
+    <button mat-raised-button (click)="toggleDone(todo, i)">Toggle Done</button>
+    <button mat-raised-button color="warn" (click)="deleteTodo(i)">X</button>
   </li>
 </ul>
diff --git a/src/todos/todos.module.ts b/src/todos/todos.module.ts
index 6aed90988..468c9e79d 100644
--- a/src/todos/todos.module.ts
+++ b/src/todos/todos.module.ts
@@ -2,13 +2,14 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {MaterialModule} from '../material/material.module';
 
 import {TodosComponent} from './todos.component';
 
 @NgModule({
   declarations: [TodosComponent],
   imports: [
-    CommonModule, FormsModule, RouterModule,
+    CommonModule, FormsModule, RouterModule, MaterialModule,
     RouterModule.forChild([{path: '', component: TodosComponent}])
   ],
 
diff --git a/yarn.lock b/yarn.lock
index b7bf3982f..220c52cde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,20 +2,43 @@
 # yarn lockfile v1
 
 
-"@angular/bazel@7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/bazel/-/bazel-7.0.1.tgz#42e1a114a20643ea53cff1bb8091e1ba08637885"
-  integrity sha512-DEv1QiccMglqPyXqxtl3Onm4j1aIJzvWx/4Tyy6gEK/r7wOqwffkPrmQGGJC3QAhsXxXMRK0mQ3jkKoAXLbunA==
+"@angular/animations@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-7.0.2.tgz#84513e8958b8fb57a35f6e494a0d465d081c7f8d"
+  integrity sha512-4EqCmfqbqIrMMf9WPiUpVqV+19z6BDtaRPAC6QXU6lcl0Lq67fw6a0yJ6ZvFXThPot3L6NNxmvbO2inzpiVV9A==
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/bazel@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/bazel/-/bazel-7.0.2.tgz#e17ee29cd217aec3519570b6c6a4e494e77502a2"
+  integrity sha512-ob4GnMFzX0IlpoQovgmZhdOV1LqkCqRzEzqJ82GwW4gH+kkMVT0VQi22/0eFQ+i23syv8TYA5qOhSsOaSpZ/ng==
   dependencies:
     "@bazel/typescript" "^0.20.3"
     "@types/node" "6.0.84"
     shelljs "0.8.2"
     tsickle "0.32.1"
 
-"@angular/compiler-cli@7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-7.0.1.tgz#bd21ebc950f65fb5848307a271e7bd9d049efc9c"
-  integrity sha512-WXl2bDoAYWsxwjuIrY34eNZ6Ph4fUff2eK+ZPnkm5zSud1ZlC0zqcG//ccoLqS4Bly3He2obSJ+8SaQjzsqK1g==
+"@angular/cdk@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-7.0.2.tgz#35081cd27a8f5214568b6ad1acf8cb3b3c315f99"
+  integrity sha512-MAugJsjQ3ye2RX7vNjd9IN1c7enAxJaCz9UZBFuzfo/pNxvjaEObFmF2NUKyU1DctknqjyOzZYYg0e+bBxrBbQ==
+  dependencies:
+    tslib "^1.7.1"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
+"@angular/common@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-7.0.2.tgz#0cb62f93a43ec1c75762deffb329caff53d9ba27"
+  integrity sha512-AamMjesc88a4c2cc3QI4N/rYY/unZ+py3VenXIRaAJCpM9PROF0klXdcu8wQ+kuwf2Ba+gkqtuAHIS8dsc5YFg==
+  dependencies:
+    tslib "^1.9.0"
+
+"@angular/compiler-cli@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-7.0.2.tgz#ddfcc6ebeca46bc490fa953a1accc26a7ed93a05"
+  integrity sha512-xGXJ3MHn1LOYrvM9ix5sRp7r6dYsjLj+okUMDcNeYYEQyT7S/qEFZomhdrPydoXSUitjmXbskSUpGzZ6mzBBXQ==
   dependencies:
     canonical-path "0.0.2"
     chokidar "^1.4.2"
@@ -28,20 +51,27 @@
     source-map "^0.6.1"
     yargs "9.0.1"
 
-"@angular/compiler@7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-7.0.1.tgz#29271bfdc9ac98f2f93c473a0cd82d6a043cf6e3"
-  integrity sha512-X/q51ZAFd0GBJyuZTOKpieyePhlNBAfYCPRi57S2BpxG6i9QjjeM+sPwzjsMmU1P6Qyt/pPpVG738mLocPvdpA==
+"@angular/compiler@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-7.0.2.tgz#7fc3427ee58a2d122d3a039396cec316dd11c4cb"
+  integrity sha512-nyXX91a/sav+Nf99P7oy6ALuZsxlFhu1HEf24sdH3Ga45X3OL4oFCCfHjjDADyhq1SiRd/25Z8j1C4aeN6MJzQ==
   dependencies:
     tslib "^1.9.0"
 
-"@angular/core@7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-7.0.1.tgz#42f52bf04bf88759d4f4b9e03cb9b312508233a0"
-  integrity sha512-u/3Xx+tIddVC1wANjK1F102uG8fQrNd4Y9nlz3vtKcnFX66b2SQlnjWd18L8FmzYtzaI44RxSWWTPQB0eTx1xw==
+"@angular/core@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-7.0.2.tgz#cfb4ae7504473cc2600b24a9c7cfa5d808486cc2"
+  integrity sha512-KxK0y3ywFd0uGIHzQRKtj7DD6f8IhntQxBrBFLxNOLwzpb5v8B7HkzHUB/Tnflvo4hFetdGEinS6pO7dikWLTQ==
   dependencies:
     tslib "^1.9.0"
 
+"@angular/material@7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-7.0.2.tgz#f64a664730dc497dbdc3dcabaf145636af90d0ea"
+  integrity sha512-zJ9nw+RwfRtkrifpafc9bM5HLPpbSmtYXkO3a2GSiE83jocdiC9wzpdmyhdJ/wvRoMyVmsx5vdQSqaFh03jhjA==
+  dependencies:
+    tslib "^1.7.1"
+
 "@bazel/benchmark-runner@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@bazel/benchmark-runner/-/benchmark-runner-0.1.0.tgz#a586394fcf7f2402b381319fbc2750627b5a06f1"
@@ -3074,6 +3104,11 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse5@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
+
 parseqs@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -4198,7 +4233,7 @@ tsickle@0.32.1:
     source-map "^0.6.0"
     source-map-support "^0.5.0"
 
-tslib@1.9.3, tslib@^1.8.1, tslib@^1.9.0:
+tslib@1.9.3, tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==