chore: add style urls to examples (#9232)

* Adds the missing `styleUrls` component property for most of the examples. If someone launches the example in StackBlitz, he might want to change the styles and would expect the existing CSS file to be ready.

src/material-examples/button-overview/button-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'button-overview-example',
   templateUrl: 'button-overview-example.html',
+  styleUrls: ['button-overview-example.css'],
 })
 export class ButtonOverviewExample {}

src/material-examples/button-toggle-overview/button-toggle-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'button-toggle-overview-example',
   templateUrl: 'button-toggle-overview-example.html',
+  styleUrls: ['button-toggle-overview-example.css'],
 })
 export class ButtonToggleOverviewExample {}

src/material-examples/card-overview/card-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'card-overview-example',
   templateUrl: 'card-overview-example.html',
+  styleUrls: ['card-overview-example.css'],
 })
 export class CardOverviewExample {}

src/material-examples/checkbox-overview/checkbox-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'checkbox-overview-example',
   templateUrl: 'checkbox-overview-example.html',
+  styleUrls: ['checkbox-overview-example.css'],
 })
 export class CheckboxOverviewExample {}

src/material-examples/dialog-content/dialog-content-example.ts

@@ -7,6 +7,7 @@ import {MatDialog} from '@angular/material';
 @Component({
   selector: 'dialog-content-example',
   templateUrl: 'dialog-content-example.html',
+  styleUrls: ['dialog-content-example.css'],
 })
 export class DialogContentExample {
   constructor(public dialog: MatDialog) {}

src/material-examples/dialog-data/dialog-data-example.ts

@@ -7,6 +7,7 @@ import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
 @Component({
   selector: 'dialog-data-example',
   templateUrl: 'dialog-data-example.html',
+  styleUrls: ['dialog-data-example.css']
 })
 export class DialogDataExample {
   constructor(public dialog: MatDialog) {}

src/material-examples/dialog-elements/dialog-elements-example.ts

@@ -7,6 +7,7 @@ import {MatDialog} from '@angular/material';
 @Component({
   selector: 'dialog-elements-example',
   templateUrl: 'dialog-elements-example.html',
+  styleUrls: ['dialog-elements-example.css'],
 })
 export class DialogElementsExample {
   constructor(public dialog: MatDialog) { }

src/material-examples/dialog-overview/dialog-overview-example.ts

@@ -6,7 +6,8 @@ import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
  */
 @Component({
   selector: 'dialog-overview-example',
-  templateUrl: 'dialog-overview-example.html'
+  templateUrl: 'dialog-overview-example.html',
+  styleUrls: ['dialog-overview-example.css'],
 })
 export class DialogOverviewExample {
 

src/material-examples/divider-overview/divider-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'divider-overview-example',
   templateUrl: 'divider-overview-example.html',
+  styleUrls: ['divider-overview-example.css'],
 })
 export class DividerOverviewExample {}

src/material-examples/expansion-overview/expansion-overview-example.ts

@@ -6,6 +6,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'expansion-overview-example',
   templateUrl: 'expansion-overview-example.html',
+  styleUrls: ['expansion-overview-example.css'],
 })
 export class ExpansionOverviewExample {
   panelOpenState: boolean = false;

src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts

@@ -6,6 +6,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'grid-list-dynamic-example',
   templateUrl: 'grid-list-dynamic-example.html',
+  styleUrls: ['grid-list-dynamic-example.css'],
 })
 export class GridListDynamicExample {
   tiles = [

src/material-examples/icon-overview/icon-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'icon-overview-example',
   templateUrl: 'icon-overview-example.html',
+  styleUrls: ['icon-overview-example.css']
 })
 export class IconOverviewExample {}

src/material-examples/icon-svg-example/icon-svg-example.ts

@@ -8,6 +8,7 @@ import {MatIconRegistry} from '@angular/material';
 @Component({
   selector: 'icon-svg-example',
   templateUrl: 'icon-svg-example.html',
+  styleUrls: ['icon-svg-example.css'],
 })
 export class IconSvgExample {
   constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

src/material-examples/list-overview/list-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'list-overview-example',
   templateUrl: 'list-overview-example.html',
+  styleUrls: ['list-overview-example.css'],
 })
 export class ListOverviewExample {}

src/material-examples/paginator-configurable/paginator-configurable-example.ts

@@ -7,6 +7,7 @@ import {PageEvent} from '@angular/material';
 @Component({
   selector: 'paginator-configurable-example',
   templateUrl: 'paginator-configurable-example.html',
+  styleUrls: ['paginator-configurable-example.css'],
 })
 export class PaginatorConfigurableExample {
   // MatPaginator Inputs

src/material-examples/paginator-overview/paginator-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'paginator-overview-example',
   templateUrl: 'paginator-overview-example.html',
+  styleUrls: ['paginator-overview-example.css'],
 })
 export class PaginatorOverviewExample {}

src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'progress-bar-buffer-example',
   templateUrl: 'progress-bar-buffer-example.html',
+  styleUrls: ['progress-bar-buffer-example.css'],
 })
 export class ProgressBarBufferExample {}

src/material-examples/progress-bar-determinate/progress-bar-determinate-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'progress-bar-determinate-example',
   templateUrl: 'progress-bar-determinate-example.html',
+  styleUrls: ['progress-bar-determinate-example.css'],
 })
 export class ProgressBarDeterminateExample {}

src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'progress-bar-indeterminate-example',
   templateUrl: 'progress-bar-indeterminate-example.html',
+  styleUrls: ['progress-bar-indeterminate-example.css'],
 })
 export class ProgressBarIndeterminateExample {}

src/material-examples/progress-bar-query/progress-bar-query-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'progress-bar-query-example',
   templateUrl: 'progress-bar-query-example.html',
+  styleUrls: ['progress-bar-query-example.css'],
 })
 export class ProgressBarQueryExample {}

src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'progress-spinner-overview-example',
   templateUrl: 'progress-spinner-overview-example.html',
+  styleUrls: ['progress-spinner-overview-example.css'],
 })
 export class ProgressSpinnerOverviewExample {}

src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'slide-toggle-overview-example',
   templateUrl: 'slide-toggle-overview-example.html',
+  styleUrls: ['slide-toggle-overview-example.css'],
 })
 export class SlideToggleOverviewExample {}

src/material-examples/snack-bar-overview/snack-bar-overview-example.ts

@@ -7,6 +7,7 @@ import {MatSnackBar} from '@angular/material';
 @Component({
   selector: 'snack-bar-overview-example',
   templateUrl: 'snack-bar-overview-example.html',
+  styleUrls: ['snack-bar-overview-example.css'],
 })
 export class SnackBarOverviewExample {
   constructor(public snackBar: MatSnackBar) {}

src/material-examples/tabs-overview/tabs-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'tabs-overview-example',
   templateUrl: 'tabs-overview-example.html',
+  styleUrls: ['tabs-overview-example.css'],
 })
 export class TabsOverviewExample {}

src/material-examples/toolbar-overview/toolbar-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'toolbar-overview-example',
   templateUrl: 'toolbar-overview-example.html',
+  styleUrls: ['toolbar-overview-example.css'],
 })
 export class ToolbarOverviewExample {}

src/material-examples/tooltip-overview/tooltip-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'tooltip-overview-example',
   templateUrl: 'tooltip-overview-example.html',
+  styleUrls: ['tooltip-overview-example.css'],
 })
 export class TooltipOverviewExample {}