diff --git a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
index 2c314cd946c7..1b1f68e136d9 100644
--- a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
+++ b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
@@ -2,7 +2,9 @@
   <button mat-button (click)="accordion.openAll()">Expand All</button>
   <button mat-button (click)="accordion.closeAll()">Collapse All</button>
 </div>
+<!-- #docregion multi -->
 <mat-accordion class="example-headers-align" multi>
+<!-- #enddocregion multi -->
   <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title>
@@ -25,8 +27,9 @@
     </mat-form-field>
 
   </mat-expansion-panel>
-
+<!-- #docregion disabled -->
   <mat-expansion-panel disabled>
+<!-- #enddocregion disabled -->
     <mat-expansion-panel-header>
       <mat-panel-title>
         Destination
diff --git a/src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html b/src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html
index 76c98d933393..552cd3d161ca 100644
--- a/src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html
+++ b/src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html
@@ -1,24 +1,19 @@
 <mat-accordion>
-  <mat-expansion-panel>
+<!-- #docregion basic-panel -->
+<!-- #docregion hide-toggle -->
+  <mat-expansion-panel hideToggle>
+<!-- #enddocregion hide-toggle -->
     <mat-expansion-panel-header>
       <mat-panel-title>
-        Personal data
+        This is the expansion title
       </mat-panel-title>
       <mat-panel-description>
-        Type your name and age
+        This is a summary of the content
       </mat-panel-description>
     </mat-expansion-panel-header>
-
-    <mat-form-field>
-      <mat-label>First name</mat-label>
-      <input matInput>
-    </mat-form-field>
-
-    <mat-form-field>
-      <mat-label>Age</mat-label>
-      <input matInput type="number" min="1">
-    </mat-form-field>
+    <p>This is the primary content of the panel.</p>
   </mat-expansion-panel>
+<!-- #enddocregion basic-panel -->
   <mat-expansion-panel (opened)="panelOpenState = true"
                        (closed)="panelOpenState = false">
     <mat-expansion-panel-header>
diff --git a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html
index 85d0a66ff4d2..c69815f92c8e 100644
--- a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html
+++ b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html
@@ -19,10 +19,11 @@
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
-
+<!-- #docregion action-bar -->
     <mat-action-row>
       <button mat-button color="primary" (click)="nextStep()">Next</button>
     </mat-action-row>
+<!-- #enddocregion action-bar -->
   </mat-expansion-panel>
 
   <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
index 3d11b063e5c2..ea3d8302316f 100644
--- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
+++ b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
@@ -3,9 +3,13 @@
 </button>
 
 <mat-horizontal-stepper linear #stepper>
+<!-- #docregion editable -->
   <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
+<!-- #enddocregion editable -->
     <form [formGroup]="firstFormGroup">
+<!-- #edocregion ng-template -->
       <ng-template matStepLabel>Fill out your name</ng-template>
+<!-- #enddocregion ng-template -->
       <mat-form-field>
         <mat-label>Name</mat-label>
         <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
diff --git a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
index 8c2fdb184522..c781ddf6e10d 100644
--- a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
+++ b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
@@ -1,4 +1,6 @@
+<!-- #docregion label-position -->
 <mat-horizontal-stepper labelPosition="bottom" #stepper>
+<!-- #enddocregion label-position -->
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -20,8 +22,10 @@
                required>
       </mat-form-field>
       <div>
+<!-- #docregion mat-stepper -->
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button matStepperNext>Next</button>
+<!-- #enddocregion mat-stepper -->
       </div>
     </form>
   </mat-step>
diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
index f4030d409739..b67f202ad668 100644
--- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
+++ b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
@@ -15,7 +15,9 @@
       </div>
     </form>
   </mat-step>
+  <!-- #docregion optional -->
   <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
+  <!-- #enddocregion optional -->
     <form [formGroup]="secondFormGroup">
       <ng-template matStepLabel>Fill out your address</ng-template>
       <mat-form-field>
diff --git a/src/components-examples/material/stepper/stepper-states/stepper-states-example.html b/src/components-examples/material/stepper/stepper-states/stepper-states-example.html
index 487506522625..25a1370f2b6d 100644
--- a/src/components-examples/material/stepper/stepper-states/stepper-states-example.html
+++ b/src/components-examples/material/stepper/stepper-states/stepper-states-example.html
@@ -35,13 +35,16 @@
   </mat-step>
 </mat-horizontal-stepper>
 
+<!-- #docregion states -->
 <mat-horizontal-stepper>
+<!-- #docregion label -->
   <mat-step label="Step 1" state="phone">
     <p>Put down your phones.</p>
     <div>
       <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
+<!-- #enddocregion label -->
   <mat-step label="Step 2" state="chat">
     <p>Socialize with each other.</p>
     <div>
@@ -54,6 +57,7 @@
   </mat-step>
 
   <!-- Icon overrides. -->
+<!-- #docregion override-icons -->
   <ng-template matStepperIcon="phone">
     <mat-icon>call_end</mat-icon>
   </ng-template>
@@ -61,3 +65,5 @@
     <mat-icon>forum</mat-icon>
   </ng-template>
 </mat-horizontal-stepper>
+<!-- #enddocregion override-icons -->
+<!-- #enddocregion states -->
diff --git a/src/material/expansion/expansion.md b/src/material/expansion/expansion.md
index d93ad448fac9..6eec1c62f840 100644
--- a/src/material/expansion/expansion.md
+++ b/src/material/expansion/expansion.md
@@ -4,8 +4,6 @@
 
 ### Expansion-panel content
 
-Each expansion-panel must include a header and may optionally include an action bar.
-
 #### Header
 
 The `<mat-expansion-panel-header>` shows a summary of the panel content and acts
@@ -13,61 +11,34 @@ as the control for expanding and collapsing. This header may optionally contain
 `<mat-panel-title>` and an `<mat-panel-description>`, which format the content of the
 header to align with Material Design specifications.
 
+<!-- example({"example": "expansion-overview",
+              "file": "expansion-overview-example.html", 
+              "region": "basic-panel"}) -->
+              
 By default, the expansion-panel header includes a toggle icon at the end of the
 header to indicate the expansion state. This icon can be hidden via the
 `hideToggle` property.
 
-```html
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    <mat-panel-title>
-      This is the expansion title
-    </mat-panel-title>
-    <mat-panel-description>
-      This is a summary of the content
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-
-  <p>This is the primary content of the panel.</p>
-
-</mat-expansion-panel>
-```
+<!-- example({"example": "expansion-overview",
+              "file": "expansion-overview-example.html", 
+              "region": "hide-toggle"}) -->         
 
 #### Action bar
 
 Actions may optionally be included at the bottom of the panel, visible only when the expansion
 is in its expanded state.
 
-```html
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    This is the expansion title
-  </mat-expansion-panel-header>
-
-  <p>This is the primary content of the panel.</p>
-
-  <mat-action-row>
-    <button mat-button>Click me</button>
-  </mat-action-row>
-</mat-expansion-panel>
-```
-
+<!-- example({"example": "expansion-steps",
+              "file": "expansion-steps-example.html", 
+              "region": "action-bar"}) -->
 #### Disabling a panel
 
 Expansion panels can be disabled using the `disabled` attribute. A disabled expansion panel can't
 be toggled by the user, but can still be manipulated programmatically.
 
-```html
-<mat-expansion-panel [disabled]="isDisabled">
-  <mat-expansion-panel-header>
-    This is the expansion title
-  </mat-expansion-panel-header>
-  <mat-panel-description>
-    This is a summary of the content
-  </mat-panel-description>
-</mat-expansion-panel>
-```
-
+<!-- example({"example": "expansion-expand-collapse-all",
+              "file": "expansion-expand-collapse-all-example.html", 
+              "region": "disabled"}) -->
 
 ### Accordion
 
@@ -75,29 +46,9 @@ Multiple expansion-panels can be combined into an accordion. The `multi="true"`
 expansions state to be set independently of each other. When `multi="false"` (default) just one
 panel can be expanded at a given time:
 
-```html
-<mat-accordion>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      This is the expansion 1 title
-    </mat-expansion-panel-header>
-
-    This the expansion 1 content
-
-  </mat-expansion-panel>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      This is the expansion 2 title
-    </mat-expansion-panel-header>
-
-    This the expansion 2 content
-
-  </mat-expansion-panel>
-
-</mat-accordion>
-```
+<!-- example({"example": "expansion-expand-collapse-all",
+              "file": "expansion-expand-collapse-all-example.html", 
+              "region": "multi"}) -->
 
 ### Lazy rendering
 By default, the expansion panel content will be initialized even when the panel is closed.
diff --git a/src/material/stepper/stepper.md b/src/material/stepper/stepper.md
index c4760470ae1c..76e2d1311434 100644
--- a/src/material/stepper/stepper.md
+++ b/src/material/stepper/stepper.md
@@ -1,7 +1,5 @@
 Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
 
-<!-- example(stepper-overview) -->
-
 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic
 that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
 styling.
@@ -10,6 +8,8 @@ styling.
 There are two stepper components: `mat-horizontal-stepper` and `mat-vertical-stepper`. They
 can be used the same way. The only difference is the orientation of stepper.
 
+<!-- example(stepper-overview) -->
+
 <!-- example(stepper-vertical) -->
 
 `mat-horizontal-stepper` selector can be used to create a horizontal stepper, and
@@ -18,49 +18,31 @@ placed inside either one of the two stepper components.
 
 ### Labels
 If a step's label is only text, then the `label` attribute can be used.
-```html
-<mat-vertical-stepper>
-  <mat-step label="Step 1">
-    Content 1
-  </mat-step>
-  <mat-step label="Step 1">
-    Content 2
-  </mat-step>
-</mat-vertical-stepper>
-```
+<!-- example({"example": "stepper-overview",
+              "file": "stepper-overview-example.html", 
+              "region": "label"}) -->
 
 For more complex labels, add a template with the `matStepLabel` directive inside the
 `mat-step`.
-```html
-<mat-vertical-stepper>
-  <mat-step>
-    <ng-template matStepLabel>...</ng-template>
-    ...
-  </mat-step>
-</mat-vertical-stepper>
-```
+<!-- example({"example": "stepper-editable",
+              "file": "stepper-editable-example.html", 
+              "region": "ng-template"}) -->
 
 #### Label position
 For `mat-horizontal-stepper` it's possible to define the position of the label. `end` is the
 default value, while `bottom` will place it under the step icon instead of at its side.
 This behaviour is controlled by `labelPosition` property.
 
-<!-- example(stepper-label-position-bottom) -->
+<!-- example({"example": "stepper-label-position",
+              "file": "stepper-label-position-example.html", 
+              "region": "label-position"}) -->
 
 ### Stepper buttons
 There are two button directives to support navigation between different steps:
 `matStepperPrevious` and `matStepperNext`.
-```html
-<mat-horizontal-stepper>
-  <mat-step>
-    ...
-    <div>
-      <button mat-button matStepperPrevious>Back</button>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
-</mat-horizontal-stepper>
-```
+<!-- example({"example": "stepper-label-position",
+              "file": "stepper-label-position-example.html", 
+              "region": "mat-stepper"}) -->
 
 ### Linear stepper
 The `linear` attribute can be set on `mat-horizontal-stepper` and `mat-vertical-stepper` to create
@@ -122,14 +104,18 @@ are completed.
 If completion of a step in linear stepper is not required, then the `optional` attribute can be set
 on `mat-step`.
 
-<!-- example(stepper-optional) -->
+<!-- example({"example": "stepper-optional",
+              "file": "stepper-optional-example.html", 
+              "region": "optional"}) -->
 
 
 #### Editable step
 By default, steps are editable, which means users can return to previously completed steps and
 edit their responses. `editable="false"` can be set on `mat-step` to change the default.
 
-<!-- example(stepper-editable) -->
+<!-- example({"example": "stepper-editable",
+              "file": "stepper-editable-example.html", 
+              "region": "editable"}) -->
 
 #### Completed step
 By default, the `completed` attribute of a step returns `true` if the step is valid (in case of
@@ -142,24 +128,9 @@ set via `<mat-icon>` elements. If you want to provide a different set of icons,
 by placing a `matStepperIcon` for each of the icons that you want to override. The `index`,
 `active`, and `optional` values of the individual steps are available through template variables:
 
-```html
-<mat-vertical-stepper>
-  <ng-template matStepperIcon="edit">
-    <mat-icon>insert_drive_file</mat-icon>
-  </ng-template>
-
-  <ng-template matStepperIcon="done">
-    <mat-icon>done_all</mat-icon>
-  </ng-template>
-
-  <!-- Custom icon with a context variable. -->
-  <ng-template matStepperIcon="number" let-index="index">
-    {{index + 10}}
-  </ng-template>
-
-  <!-- Stepper steps go here -->
-</mat-vertical-stepper>
-```
+<!-- example({"example": "stepper-states",
+              "file": "stepper-states-example.html", 
+              "region": "override-icons"}) -->
 
 Note that you aren't limited to using the `mat-icon` component when providing custom icons.
 
@@ -167,34 +138,9 @@ Note that you aren't limited to using the `mat-icon` component when providing cu
 You can set the state of a step to whatever you want. The given state by default maps to an icon.
 However, it can be overridden the same way as mentioned above.
 
-```html
-<mat-horizontal-stepper>
-  <mat-step label="Step 1" state="phone">
-    <p>Put down your phones.</p>
-    <div>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
-  <mat-step label="Step 2" state="chat">
-    <p>Socialize with each other.</p>
-    <div>
-      <button mat-button matStepperPrevious>Back</button>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
-  <mat-step label="Step 3">
-    <p>You're welcome.</p>
-  </mat-step>
-
-  <!-- Icon overrides. -->
-  <ng-template matStepperIcon="phone">
-    <mat-icon>call_end</mat-icon>
-  </ng-template>
-  <ng-template matStepperIcon="chat">
-    <mat-icon>forum</mat-icon>
-  </ng-template>
-</mat-horizontal-stepper>
-```
+<!-- example({"example": "stepper-states",
+              "file": "stepper-states-example.html", 
+              "region": "states"}) -->
 
 In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to
 the global default stepper options which can be specified by providing a value for