fix(selection-list): proper styling not being applied when using mat-list-icon (#12879)

Fixes the correct class not being applied to the `mat-list-option`, if it's using `mat-list-icon` which leads to the spacing not being correct. For reference: https://stackblitz.com/edit/angular-9tnpjv.

Author: crisbeto

src/lib/list/selection-list.spec.ts

@@ -689,6 +689,34 @@ describe('MatSelectionList without forms', () => {
       expect(listItemContent.nativeElement.classList).toContain('mat-list-item-content-reverse');
     });
   });
+
+  describe('with list item elements', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MatListModule],
+        declarations: [
+          SelectionListWithAvatar,
+          SelectionListWithIcon,
+        ],
+      }).compileComponents();
+    }));
+
+    it('should add a class to reflect that it has an avatar', () => {
+      const fixture = TestBed.createComponent(SelectionListWithIcon);
+      fixture.detectChanges();
+
+      const listOption = fixture.nativeElement.querySelector('.mat-list-option');
+      expect(listOption.classList).toContain('mat-list-item-with-avatar');
+    });
+
+    it('should add a class to reflect that it has an icon', () => {
+      const fixture = TestBed.createComponent(SelectionListWithIcon);
+      fixture.detectChanges();
+
+      const listOption = fixture.nativeElement.querySelector('.mat-list-option');
+      expect(listOption.classList).toContain('mat-list-item-with-avatar');
+    });
+  });
 });
 
 describe('MatSelectionList with forms', () => {
@@ -1178,3 +1206,30 @@ class SelectionListWithCustomComparator {
     {id: 3, label: 'Three'}
   ];
 }
+
+
+@Component({
+  template: `
+    <mat-selection-list>
+      <mat-list-option>
+        <div mat-list-avatar>I</div>
+        Inbox
+      </mat-list-option>
+    </mat-selection-list>
+  `
+})
+class SelectionListWithAvatar {
+}
+
+@Component({
+  template: `
+    <mat-selection-list>
+      <mat-list-option>
+        <div mat-list-icon>I</div>
+        Inbox
+      </mat-list-option>
+    </mat-selection-list>
+  `
+})
+class SelectionListWithIcon {
+}

src/lib/list/selection-list.ts

@@ -38,7 +38,7 @@ import {
 } from '@angular/material/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Subscription} from 'rxjs';
-import {MatListAvatarCssMatStyler} from './list';
+import {MatListAvatarCssMatStyler, MatListIconCssMatStyler} from './list';
 
 
 /** @docs-private */
@@ -86,7 +86,7 @@ export class MatSelectionListChange {
     'tabindex': '-1',
     '[class.mat-list-item-disabled]': 'disabled',
     '[class.mat-list-item-focus]': '_hasFocus',
-    '[class.mat-list-item-with-avatar]': '_avatar',
+    '[class.mat-list-item-with-avatar]': '_avatar || _icon',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
   },
@@ -104,6 +104,7 @@ export class MatListOption extends _MatListOptionMixinBase
   _hasFocus: boolean = false;
 
   @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
+  @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
 
   /** DOM element containing the item's text. */