diff --git a/gulpfile.js b/gulpfile.js
index 2e70a5beae..551a11842e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -746,11 +746,22 @@ gulp.task('build', ['build.js', 'build.dart']);
 
 // ------------
 // angular material testing rules
-gulp.task('build.js.material', ['build.js.dev'], function() {
+gulp.task('build.css.material', function() {
   return gulp.src('modules/*/src/**/*.scss')
       .pipe(sass())
       .pipe(autoprefixer())
-      .pipe(gulp.dest(CONFIG.dest.js.dev.es5));
+      .pipe(gulp.dest(CONFIG.dest.js.prod.es5))
+      .pipe(gulp.dest(CONFIG.dest.js.dev.es5))
+      .pipe(gulp.dest(CONFIG.dest.js.dart2js + '/examples/packages'));
+});
+
+
+gulp.task('build.js.material', function(done) {
+  runSequence('build.js.dev', 'build.css.material', done);
+});
+
+gulp.task('build.dart2js.material', function(done) {
+  runSequence('build.dart', 'build.css.material', done);
 });
 
 // TODO: this target is temporary until we find a way to use the SASS transformer
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.js b/modules/angular2_material/src/components/checkbox/checkbox.js
index 82fe116ac5..5d5d50bc79 100644
--- a/modules/angular2_material/src/components/checkbox/checkbox.js
+++ b/modules/angular2_material/src/components/checkbox/checkbox.js
@@ -19,7 +19,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
     'tabindex': 'tabindex',
     'role': 'attr.role',
     'checked': 'attr.aria-checked',
-    'disabled_': 'attr.aria-disabled'
+    'disabled': 'attr.aria-disabled'
   }
 })
 @View({
@@ -31,7 +31,7 @@ export class MdCheckbox {
   checked: boolean;
 
   /** Whether this checkbox is disabled. */
-  disabled_: boolean;
+  _disabled: boolean;
 
   /** Setter for `role` attribute. */
   role: string;
@@ -43,14 +43,15 @@ export class MdCheckbox {
     this.role = 'checkbox';
     this.checked = false;
     this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
+    this._disabled = false;
   }
 
   get disabled() {
-    return this.disabled_;
+    return this._disabled;
   }
 
   set disabled(value) {
-    this.disabled_ = isPresent(value) && value !== false;
+    this._disabled = isPresent(value) && value !== false;
   }
 
   onKeydown(event: KeyboardEvent) {
diff --git a/modules/angular2_material/src/components/radio/radio_button.js b/modules/angular2_material/src/components/radio/radio_button.js
index 12b74935ec..da177df257 100644
--- a/modules/angular2_material/src/components/radio/radio_button.js
+++ b/modules/angular2_material/src/components/radio/radio_button.js
@@ -77,8 +77,8 @@ export class MdRadioButton {
 
   constructor(
       @Optional() @Parent() radioGroup: MdRadioGroup,
-      @Attribute('id') id: string,
-      @Attribute('tabindex') tabindex: string,
+      @Attribute('id') id: String,
+      @Attribute('tabindex') tabindex: String,
       radioDispatcher: MdRadioDispatcher) {
     // Assertions. Ideally these should be stripped out by the compiler.
     // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
@@ -213,8 +213,8 @@ export class MdRadioGroup {
   role: string;
 
   constructor(
-      @Attribute('tabindex') tabindex: string,
-      @Attribute('disabled') disabled: string,
+      @Attribute('tabindex') tabindex: String,
+      @Attribute('disabled') disabled: String,
       radioDispatcher: MdRadioDispatcher) {
     this.name_ = `md-radio-group-${_uniqueIdCounter++}`;
     this.radios_ = [];
diff --git a/modules/examples/e2e_test/material/button_spec.es6 b/modules/examples/e2e_test/material/button_spec.es6
new file mode 100644
index 0000000000..2b034a7355
--- /dev/null
+++ b/modules/examples/e2e_test/material/button_spec.es6
@@ -0,0 +1,10 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-button', function () {
+  var url = 'examples/src/material/button/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  // Buttons are broken right now, see https://github.com/angular/angular/issues/1602
+});
diff --git a/modules/examples/e2e_test/material/checkbox_spec.es6 b/modules/examples/e2e_test/material/checkbox_spec.es6
new file mode 100644
index 0000000000..e27546911c
--- /dev/null
+++ b/modules/examples/e2e_test/material/checkbox_spec.es6
@@ -0,0 +1,18 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-checkbox', function () {
+  var url = 'examples/src/material/checkbox/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  it('should toggle a checkbox', function() {
+    var checkbox = element.all(by.css('md-checkbox')).first();
+
+    checkbox.click();
+    expect(checkbox.getAttribute('aria-checked')).toBe('true');
+
+    checkbox.click();
+    expect(checkbox.getAttribute('aria-checked')).toBe('false');
+  });
+});
diff --git a/modules/examples/e2e_test/material/dialog_spec.es6 b/modules/examples/e2e_test/material/dialog_spec.es6
new file mode 100644
index 0000000000..95d3b69c65
--- /dev/null
+++ b/modules/examples/e2e_test/material/dialog_spec.es6
@@ -0,0 +1,19 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-dialog', function () {
+  var url = 'examples/src/material/dialog/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  it('should open a dialog', function() {
+    var openButton = element(by.id('open'));
+    openButton.click();
+    expect(element(by.css('.md-dialog')).isPresent()).toBe(true);
+
+    var dialog = element(by.css('.md-dialog'));
+    dialog.sendKeys(protractor.Key.ESCAPE);
+
+    expect(element(by.css('.md-dialog')).isPresent()).toBe(false);
+  });
+});
diff --git a/modules/examples/e2e_test/material/progress_linear_spec.es6 b/modules/examples/e2e_test/material/progress_linear_spec.es6
new file mode 100644
index 0000000000..3e332cc0a5
--- /dev/null
+++ b/modules/examples/e2e_test/material/progress_linear_spec.es6
@@ -0,0 +1,23 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-progress-linear', function () {
+  var url = 'examples/src/material/progress-linear/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  it('should increment and decrement progress', function() {
+    var progressBar = element.all(by.css('md-progress-linear')).first();
+    var incrementButton = element(by.id('increment'));
+    var decrementButton = element(by.id('decrement'));
+
+    var initialValue = progressBar.getAttribute('aria-valuenow');
+
+    incrementButton.click();
+    expect(progressBar.getAttribute('aria-valuenow')).toBeGreaterThan(initialValue);
+
+    decrementButton.click();
+    decrementButton.click();
+    expect(progressBar.getAttribute('aria-valuenow')).toBeLessThan(initialValue);
+  });
+});
diff --git a/modules/examples/e2e_test/material/radio_spec.es6 b/modules/examples/e2e_test/material/radio_spec.es6
new file mode 100644
index 0000000000..88a02c9856
--- /dev/null
+++ b/modules/examples/e2e_test/material/radio_spec.es6
@@ -0,0 +1,10 @@
+var testUtil = require('angular2/src/test_lib/e2e_util');
+
+describe('md-radio-button', function () {
+  var url = 'examples/src/material/radio/index.html';
+
+  beforeEach(() => { browser.get(url); });
+  afterEach(testUtil.verifyNoBrowserErrors);
+
+  // Radio buttons are broken right now, see https://github.com/angular/angular/issues/1643
+});
diff --git a/modules/examples/src/material/button/index.html b/modules/examples/src/material/button/index.html
index bda1a1bbe3..876dc42e36 100644
--- a/modules/examples/src/material/button/index.html
+++ b/modules/examples/src/material/button/index.html
@@ -7,10 +7,7 @@
   <style> * { font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif; } </style>
 </head>
 <body>
-
   <demo-app>Loading...</demo-app>
-
   $SCRIPTS$
-
 </body>
 </html>
diff --git a/modules/examples/src/material/checkbox/index.html b/modules/examples/src/material/checkbox/index.html
index 5f811095b1..76f7c7f63c 100644
--- a/modules/examples/src/material/checkbox/index.html
+++ b/modules/examples/src/material/checkbox/index.html
@@ -4,15 +4,10 @@
   <meta charset="UTF-8">
   <title>ng-material checkbox demo</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
+  <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
 <body>
-
-$SCRIPTS$
   <demo-app>Loading...</demo-app>
+  $SCRIPTS$
 </body>
 </html>
diff --git a/modules/examples/src/material/demo_common.js b/modules/examples/src/material/demo_common.js
index 1987bcd343..7f6de453b5 100644
--- a/modules/examples/src/material/demo_common.js
+++ b/modules/examples/src/material/demo_common.js
@@ -48,10 +48,17 @@ export class DemoUrlResolver extends UrlResolver {
             return `${baseUrl}/${url}`;
         }
 
-        if (this.isInPubServe) {
-            return `/packages/${url}`;
+        // Whether the `examples/` dir is being directly served (as the server root).
+        // For cases when this is not true AND we're in pub-serve, `examples/` needs to be
+        // prepended to the URL.
+        var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
+
+        if (this.isInPubServe && isDirectlyServingExamplesDir) {
+          return `/packages/${url}`;
+        } else if (this.isInPubServe) {
+          return `/examples/packages/${url}`;
         } else {
-            return `/${url}`;
+          return `/${url}`;
         }
     }
 }
diff --git a/modules/examples/src/material/dialog/demo_app.html b/modules/examples/src/material/dialog/demo_app.html
index eb47ad1ef9..f06243c95c 100644
--- a/modules/examples/src/material/dialog/demo_app.html
+++ b/modules/examples/src/material/dialog/demo_app.html
@@ -1,7 +1,7 @@
 <div>
   <h2>Dialog demo</h2>
 
-  <button type="button" (click)="open()" [disabled]="!!dialogRef">
+  <button id="open" type="button" (click)="open()" [disabled]="!!dialogRef">
     Open a dialog
   </button>
 
diff --git a/modules/examples/src/material/dialog/index.html b/modules/examples/src/material/dialog/index.html
index cfff28f660..6b9ed3c4d3 100644
--- a/modules/examples/src/material/dialog/index.html
+++ b/modules/examples/src/material/dialog/index.html
@@ -4,15 +4,10 @@
   <meta charset="UTF-8">
   <title>ng-material dialog demo</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
+  <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
-<body>
-
-$SCRIPTS$
+<body class="dialog-demo">
   <demo-app>Loading...</demo-app>
+  $SCRIPTS$
 </body>
 </html>
diff --git a/modules/examples/src/material/grid_list/index.html b/modules/examples/src/material/grid_list/index.html
index 4beb8fe846..34821f9dc1 100644
--- a/modules/examples/src/material/grid_list/index.html
+++ b/modules/examples/src/material/grid_list/index.html
@@ -4,17 +4,10 @@
   <meta charset="UTF-8">
   <title>ng-material grid-list demo</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
+  <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
 <body>
-
-$SCRIPTS$
-
   <demo-app>Loading...</demo-app>
-
+  $SCRIPTS$
 </body>
 </html>
diff --git a/modules/examples/src/material/input/index.html b/modules/examples/src/material/input/index.html
index 8ddc4729bf..7a5e92d1a3 100644
--- a/modules/examples/src/material/input/index.html
+++ b/modules/examples/src/material/input/index.html
@@ -4,16 +4,12 @@
   <meta charset="UTF-8">
   <title>ng-material input demo</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
+  <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
 <body>
 
-  $SCRIPTS$
-
   <demo-app>Loading...</demo-app>
+
+  $SCRIPTS$
 </body>
 </html>
diff --git a/modules/examples/src/material/progress-linear/demo_app.html b/modules/examples/src/material/progress-linear/demo_app.html
index 5f99e6ff0a..c38818732f 100644
--- a/modules/examples/src/material/progress-linear/demo_app.html
+++ b/modules/examples/src/material/progress-linear/demo_app.html
@@ -37,6 +37,6 @@
   <!--<md-progress-linear></md-progress-linear>-->
 
   <p>Progress: {{progress}}</p>
-  <button type="button" (click)="step(10)">Increment</button>
-  <button type="button" (click)="step(-10)">Decrement</button>
+  <button type="button" (click)="step(10)" id="increment">Increment</button>
+  <button type="button" (click)="step(-10)" id="decrement">Decrement</button>
 </div>
diff --git a/modules/examples/src/material/progress-linear/index.html b/modules/examples/src/material/progress-linear/index.html
index 831ce43345..8cce9b6cc6 100644
--- a/modules/examples/src/material/progress-linear/index.html
+++ b/modules/examples/src/material/progress-linear/index.html
@@ -4,15 +4,12 @@
   <meta charset="UTF-8">
   <title>ng-material progress-linear demo</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
+  <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
 <body>
 
-$SCRIPTS$
   <demo-app>Loading...</demo-app>
+
+  $SCRIPTS$
 </body>
 </html>
diff --git a/modules/examples/src/material/radio/demo_app.html b/modules/examples/src/material/radio/demo_app.html
index d143376606..60a53af3d3 100644
--- a/modules/examples/src/material/radio/demo_app.html
+++ b/modules/examples/src/material/radio/demo_app.html
@@ -2,7 +2,7 @@
   <h2>Radio buttons</h2>
   <h3>Inside of a radiogroup</h3>
 
-  <md-radio-group #scifi (change)="onGroupChange()">
+  <md-radio-group #scifi (change)="onGroupChange()" id="scifi-group">
     <md-radio-button value="star-wars">Star Wars</md-radio-button>
     <md-radio-button value="star-trek" id="special-radio">Star Trek</md-radio-button>
     <md-radio-button value="bsg" disabled>Battlestar Galactica</md-radio-button>
diff --git a/modules/examples/src/material/radio/index.html b/modules/examples/src/material/radio/index.html
index d39033ce6d..58ae038491 100644
--- a/modules/examples/src/material/radio/index.html
+++ b/modules/examples/src/material/radio/index.html
@@ -4,17 +4,12 @@
   <meta charset="UTF-8">
   <title>ng-material radio demo</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
-  <style>
-    * {
-      font-family: RobotoDraft, Roboto;
-    }
-  </style>
+  <style> * { font-family: RobotoDraft, Roboto; } </style>
 </head>
 <body>
 
-$SCRIPTS$
-
   <demo-app>Loading...</demo-app>
 
+  $SCRIPTS$
 </body>
 </html>
diff --git a/modules/examples/src/material/switcher/index.html b/modules/examples/src/material/switcher/index.html
index b521ba8659..766ad9284e 100644
--- a/modules/examples/src/material/switcher/index.html
+++ b/modules/examples/src/material/switcher/index.html
@@ -12,8 +12,8 @@
 </head>
 <body>
 
-  $SCRIPTS$
-
   <demo-app>Loading...</demo-app>
+
+  $SCRIPTS$
 </body>
 </html>
diff --git a/scripts/ci/test_e2e_dart.sh b/scripts/ci/test_e2e_dart.sh
index cfe745709a..009575d1ba 100755
--- a/scripts/ci/test_e2e_dart.sh
+++ b/scripts/ci/test_e2e_dart.sh
@@ -15,6 +15,8 @@ function killServer () {
 ./node_modules/.bin/gulp serve.js.dart2js&
 serverPid=$!
 
+./node_modules/.bin/gulp build.css.material&
+
 trap killServer EXIT
 
 # wait for server to come up!
diff --git a/scripts/ci/test_e2e_js.sh b/scripts/ci/test_e2e_js.sh
index 458bae8298..222295e07a 100755
--- a/scripts/ci/test_e2e_js.sh
+++ b/scripts/ci/test_e2e_js.sh
@@ -15,6 +15,8 @@ function killServer () {
 ./node_modules/.bin/gulp serve.js.prod&
 serverPid=$!
 
+./node_modules/.bin/gulp build.css.material&
+
 trap killServer EXIT
 
 # wait for server to come up!