fix(divider): add inset styles for icons and lists in cards

* Add mixin to dynamically apply inset divider offset based on
  the precursor in the list item
* Add inset divider example using icons as precursor

Author: CaerusKaru

src/demo-app/list/list-demo.html

@@ -87,10 +87,11 @@ <h2>Nav lists</h2>
       </mat-list-item>
     </mat-nav-list>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
+      <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
         <mat-icon mat-list-icon>folder</mat-icon>
         <span mat-line>{{ link.name }}</span>
         <span mat-line class="demo-secondary-text"> Description </span>
+        <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
       </a>
     </mat-nav-list>
     <mat-nav-list dense>

src/lib/list/list.scss

@@ -4,6 +4,7 @@
 
 
 $mat-list-side-padding: 16px;
+$mat-list-icon-padding: 4px;
 $mat-list-avatar-size: 40px;
 
 // Normal list variables
@@ -27,7 +28,18 @@ $mat-dense-three-line-height: 76px;
 $mat-dense-multi-line-padding: 16px;
 $mat-dense-list-icon-size: 20px;
 
-$mat-list-item-inset-divider-offset: 72px;
+// This mixin provides the correct offset for an inset divider based on the
+// size of the parent class (e.g. avatar vs icon)
+@mixin mat-inset-divider-offset($offset) {
+  $mat-list-item-inset-divider-offset: #{(2 * $mat-list-side-padding) + $offset};
+  left: $mat-list-item-inset-divider-offset;
+  width: calc(100% - #{$mat-list-item-inset-divider-offset});
+
+  [dir='rtl'] & {
+    left: auto;
+    right: $mat-list-item-inset-divider-offset;
+  }
+}
 
 // This mixin provides all list-item styles, changing font size and height
 // based on whether the list is in dense mode.
@@ -108,6 +120,10 @@ $mat-list-item-inset-divider-offset: 72px;
     width: $mat-list-avatar-size;
     height: $mat-list-avatar-size;
     border-radius: 50%;
+
+    ~ .mat-divider-inset {
+      @include mat-inset-divider-offset($mat-list-avatar-size);
+    }
   }
 
   .mat-list-icon {
@@ -116,7 +132,11 @@ $mat-list-item-inset-divider-offset: 72px;
     font-size: $icon-size;
     box-sizing: content-box;
     border-radius: 50%;
-    padding: 4px;
+    padding: $mat-list-icon-padding;
+
+    ~ .mat-divider-inset {
+      @include mat-inset-divider-offset($icon-size + (2 * $mat-list-icon-padding));
+    }
   }
 
   .mat-divider {
@@ -131,14 +151,8 @@ $mat-list-item-inset-divider-offset: 72px;
     }
 
     &.mat-divider-inset {
-      left: $mat-list-item-inset-divider-offset;
-      width: calc(100% - #{$mat-list-item-inset-divider-offset});
       margin: 0;
-
-      [dir='rtl'] & {
-        left: auto;
-        right: $mat-list-item-inset-divider-offset;
-      }
+      position: absolute;
     }
   }
 }