fix(material/core): icons not aligned inside mat-option

Fixes that icons projected inside an MDC-based `mat-option` weren't centered and didn't have the correct margin like the non-MDC version.

Fixes #26024.

Author: crisbeto

src/material/core/option/option.html

@@ -1,7 +1,9 @@
 <mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox"
     [state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></mat-pseudo-checkbox>
 
-<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
+<ng-content select="mat-icon"></ng-content>
+
+<span class="mdc-list-item__primary-text" #text><ng-content></ng-content></span>
 
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
 <span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>

src/material/core/option/option.scss

@@ -46,8 +46,10 @@
     }
   }
 
+  .mat-icon,
   .mat-pseudo-checkbox {
     margin-right: mdc-list-variables.$side-padding;
+    flex-shrink: 0;
 
     [dir='rtl'] & {
       margin-right: 0;

src/material/core/option/option.ts

@@ -24,6 +24,7 @@ import {
   Output,
   EventEmitter,
   QueryList,
+  ViewChild,
 } from '@angular/core';
 import {Subject} from 'rxjs';
 import {MatOptgroup, MAT_OPTGROUP, _MatOptgroupBase} from './optgroup';
@@ -86,6 +87,9 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
   // tslint:disable-next-line:no-output-on-prefix
   @Output() readonly onSelectionChange = new EventEmitter<MatOptionSelectionChange<T>>();
 
+  /** Element containing the option's text. */
+  @ViewChild('text', {static: true}) _text: ElementRef<HTMLElement> | undefined;
+
   /** Emits when the state of the option changes and any parents have to be notified. */
   readonly _stateChanges = new Subject<void>();
 
@@ -112,7 +116,7 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
    */
   get viewValue(): string {
     // TODO(kara): Add input property alternative for node envs.
-    return (this._getHostElement().textContent || '').trim();
+    return (this._text?.nativeElement.textContent || '').trim();
   }
 
   /** Selects the option. */

src/material/legacy-core/option/option.html

@@ -1,7 +1,7 @@
 <mat-pseudo-checkbox *ngIf="multiple" class="mat-option-pseudo-checkbox"
     [state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></mat-pseudo-checkbox>
 
-<span class="mat-option-text"><ng-content></ng-content></span>
+<span class="mat-option-text" #text><ng-content></ng-content></span>
 
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
 <span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>

tools/public_api_guard/material/core.md

@@ -263,7 +263,7 @@ export class _MatOptgroupBase extends _MatOptgroupMixinBase implements CanDisabl
 export class MatOption<T = any> extends _MatOptionBase<T> {
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["mat-icon", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
 }
@@ -297,6 +297,7 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
     setActiveStyles(): void;
     setInactiveStyles(): void;
     readonly _stateChanges: Subject<void>;
+    _text: ElementRef<HTMLElement> | undefined;
     value: T;
     get viewValue(): string;
     // (undocumented)