rewrite list css

Author: tinayuangao

src/lib/list/list.scss

@@ -102,53 +102,34 @@ $mat-list-item-inset-divider-offset: 72px;
     padding: 0;
   }
 
-  // There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
-  // list-item. This means that there should be a padding for the mat-list-text on the start-side.
-  .mat-list-item-content .mat-list-text:not(:nth-child(2)) {
-    padding-right: 0;
-    padding-left: $mat-list-side-padding;
-
-    [dir='rtl'] & {
-      padding-right: $mat-list-side-padding;
-      padding-left: 0;
-    }
-  }
-
-  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
-  // end of the list option. Since there is a secondary item (checkbox) at the end of the
-  // option, there needs to be a padding for the mat-list-text on the end-side.
-  .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)) {
-    padding-left: 0;
-    padding-right: $mat-list-side-padding;
-
-    [dir='rtl'] & {
+  &.mat-list-item-with-avatar,
+  &.mat-list-option {
+    .mat-list-item-content .mat-list-text {
       padding-right: 0;
       padding-left: $mat-list-side-padding;
+
+      [dir='rtl'] & {
+        padding-right: $mat-list-side-padding;
+        padding-left: 0;
+      }
     }
-  }
 
-  // If avatar is the 4th item, it means the list-item has both checkbox and avatar-icon.
-  // This means that there should be a margin for the mat-list-avatar on the start-side.
-  .mat-list-item-content .mat-list-avatar:nth-child(4) {
-    margin-right: 0;
-    margin-left: $mat-list-side-padding;
+    .mat-list-item-content-reverse .mat-list-text {
+      padding-left: 0;
+      padding-right: $mat-list-side-padding;
 
-    [dir='rtl'] & {
-      margin-right: $mat-list-side-padding;
-      margin-left: 0;
+      [dir='rtl'] & {
+        padding-right: 0;
+        padding-left: $mat-list-side-padding;
+      }
     }
-  }
+   }
 
-  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
-  // end of the list option. If avatar is the 4th item, it means the list-item has both checkbox
-  // and avatar-icon. There needs to be a padding for the mat-list-avatar on the end-side.
-  .mat-list-item-content-reverse .mat-list-avatar:nth-child(4) {
-    margin-left: 0;
-    margin-right: $mat-list-side-padding;
-
-    [dir='rtl'] & {
-      margin-right: 0;
-      margin-left: $mat-list-side-padding;
+  &.mat-list-item-with-avatar.mat-list-option {
+    .mat-list-item-content-reverse .mat-list-text,
+    .mat-list-item-content .mat-list-text {
+      padding-right: $mat-list-side-padding;
+      padding-left: $mat-list-side-padding;
     }
   }
 

src/lib/list/list.ts

@@ -97,8 +97,8 @@ export class MatListSubheaderCssMatStyler {}
   host: {
     'class': 'mat-list-item',
     // @deletion-target 7.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`.
-    '[class.mat-list-item-avatar]': '_avatar',
-    '[class.mat-list-item-with-avatar]': '_avatar',
+    '[class.mat-list-item-avatar]': '_avatar || _icon',
+    '[class.mat-list-item-with-avatar]': '_avatar || _icon',
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
   },
@@ -113,6 +113,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
 
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
   @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
+  @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;
 
   constructor(private _element: ElementRef,
               @Optional() private _navList: MatNavList) {