demo(prerender): add theme to prerender demo (#13516)

src/universal-app/index.html

@@ -2,7 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Angular Material Universal Kitchen Sink Test</title>
+  <link href="theme.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <base href="/">
 </head>
 <body>

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -10,16 +10,16 @@
 <h2>Button</h2>
 
 <button mat-button>go</button>
-<button mat-icon-button>go</button>
+<button mat-icon-button><mat-icon>search</mat-icon></button>
 <button mat-raised-button>go</button>
-<button mat-fab>go</button>
-<button mat-mini-fab>go</button>
+<button mat-fab><mat-icon>home</mat-icon></button>
+<button mat-mini-fab><mat-icon>favorite</mat-icon></button>
 
 <a mat-button href="https://google.com">Google</a>
-<a mat-icon-button href="https://google.com">Google</a>
+<a mat-icon-button href="https://google.com"><mat-icon>search</mat-icon></a>
 <a mat-raised-button href="https://google.com">Google</a>
-<a mat-fab href="https://google.com">Google</a>
-<a mat-mini-fab href="https://google.com">Google</a>
+<a mat-fab href="https://google.com"><mat-icon>home</mat-icon></a>
+<a mat-mini-fab href="https://google.com"><mat-icon>favorite</mat-icon></a>
 
 <h2>Button toggle</h2>
 
@@ -107,7 +107,7 @@
 </mat-grid-list>
 
 <h2>Icon</h2>
-<mat-icon>ligature</mat-icon>
+<mat-icon>grade</mat-icon>
 
 <h2>Input</h2>
 
@@ -361,6 +361,6 @@
 
 <h2>Badge</h2>
 
-<button mat-raised-button matBadge="Clicked 1337 times">
+<button mat-raised-button matBadge="99">
   Clicky thing
 </button>

src/universal-app/theme.scss

@@ -0,0 +1,16 @@
+@import '../lib/core/theming/all-theme';
+
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include mat-core();
+
+// Define the default theme (same as the example above).
+$candy-app-primary: mat-palette($mat-indigo);
+$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
+$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
+
+// Include the default theme styles.
+@include angular-material-theme($candy-app-theme);

tools/gulp/tasks/universal.ts

@@ -1,8 +1,8 @@
-import {task} from 'gulp';
+import {dest, task} from 'gulp';
 import {ngcBuildTask, tsBuildTask, copyTask, execTask} from '../util/task_helpers';
 import {join} from 'path';
 import {copySync} from 'fs-extra';
-import {buildConfig, sequenceTask} from 'material2-build-tools';
+import {buildConfig, buildScssPipeline, sequenceTask} from 'material2-build-tools';
 
 const {outputDir, packagesDir} = buildConfig;
 
@@ -36,13 +36,16 @@ task('universal:build', sequenceTask(
   'clean',
   ['material:build-release', 'cdk:build-release'],
   ['universal:copy-release', 'universal:copy-files'],
-  'universal:build-app-ts',
-  'universal:build-prerender-ts'
+  ['universal:build-app-ts', 'universal:build-app-scss'],
+  'universal:build-prerender-ts',
 ));
 
 /** Task that builds the universal app in the output directory. */
 task('universal:build-app-ts', ngcBuildTask(tsconfigAppPath));
 
+/** Task that builds the universal app styles in the output directory. */
+task('universal:build-app-scss', () => buildScssPipeline(appDir).pipe(dest(outDir)));
+
 /** Task that copies all files to the output directory. */
 task('universal:copy-files', copyTask(appDir, outDir));