fix avatars and dividers

Author: mmalerba

src/material-experimental/mdc-list/list-item.html

@@ -1,2 +1,3 @@
 <ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
 <span class="mdc-list-item__text"><ng-content></ng-content></span>
+<ng-content select="mat-divider"></ng-content>

src/material-experimental/mdc-list/list.scss

@@ -1,4 +1,5 @@
 @import '@material/list/mixins.import';
+@import '@material/list/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-list-without-ripple($query: $mat-base-styles-query);
@@ -40,8 +41,8 @@
 }
 
 
-// MDC does have 2-line support, but it applies to the entire list, whereas ours applies to
-// individual items. Therefore, we need to add our own styles.
+// MDC does have 2-line support, but it's a per-list setting, whereas ours applies to individual
+// items. Therefore, we need to add our own styles.
 .mat-mdc-2-line {
   height: 72px;
 
@@ -58,3 +59,43 @@
     align-self: flex-start;
   }
 }
+
+// MDC supports avatars, but it's a per-list setting, whereas ours applies to individual
+// items. Therefore, we need to add our own styles.
+.mat-mdc-list-avatar {
+  // Styles here come from `$mdc-list-graphic-size_`:
+  // https://github.com/material-components/material-components-web/blob/3ca8c4c45a3d2a654ef3cb8fc7525bcde37badf0/packages/mdc-list/_mixins.scss#L538
+  $size: 40px;
+  $margin-value: 72px - $mdc-list-side-padding - $size;
+
+  margin-left: 0;
+  margin-right: $margin-value;
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+
+  // `.mdc-list-item` added for extra specificity to override MDC's built in styles.
+  [dir="rtl"] .mdc-list-item & {
+    margin-left: $margin-value;
+    margin-right: 0;
+  }
+}
+
+// MDC doesn't have list dividers, so we use mat-divider and style appropriately.
+.mat-mdc-list-item,
+.mat-mdc-list-option {
+  .mat-divider-inset {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .mat-mdc-list-avatar ~ .mat-divider-inset {
+    margin-left: 72px;
+
+    [dir="rtl"] & {
+      margin-right: 72px;
+    }
+  }
+}