fix(icon): clearing user content when svgIcon is bound to falsy value (#15290)

Fixes the `mat-icon` component clearing the user's content and potentially a valid ligature icon, if there's also an `svgIcon` attribute.

Author: crisbeto

src/lib/icon/icon.spec.ts

@@ -57,6 +57,7 @@ describe('MatIcon', () => {
         IconWithBindingAndNgIf,
         InlineIcon,
         SvgIconWithUserContent,
+        IconWithLigatureAndSvgBinding,
       ],
       providers: [{
         provide: MAT_ICON_LOCATION,
@@ -161,6 +162,19 @@ describe('MatIcon', () => {
       expect(sortedClassNames(matIconElement))
           .toEqual(['mat-icon', 'mat-icon-no-color', 'myfont', 'notranslate']);
     });
+
+    it('should not clear the text of a ligature icon if the svgIcon is bound to something falsy',
+      () => {
+        let fixture = TestBed.createComponent(IconWithLigatureAndSvgBinding);
+
+        const testComponent = fixture.componentInstance;
+        const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+        testComponent.iconName = undefined;
+        fixture.detectChanges();
+
+        expect(matIconElement.textContent.trim()).toBe('house');
+      });
+
   });
 
   describe('Icons from URLs', () => {
@@ -854,3 +868,8 @@ class InlineIcon {
 class SvgIconWithUserContent {
   iconName: string | undefined = '';
 }
+
+@Component({template: '<mat-icon [svgIcon]="iconName">house</mat-icon>'})
+class IconWithLigatureAndSvgBinding {
+  iconName: string | undefined;
+}

src/lib/icon/icon.ts

@@ -223,15 +223,17 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Aft
 
   ngOnChanges(changes: SimpleChanges) {
     // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
-    if (changes['svgIcon']) {
+    const svgIconChanges = changes['svgIcon'];
+
+    if (svgIconChanges) {
       if (this.svgIcon) {
         const [namespace, iconName] = this._splitIconName(this.svgIcon);
 
         this._iconRegistry.getNamedSvgIcon(iconName, namespace).pipe(take(1)).subscribe(
           svg => this._setSvgElement(svg),
           (err: Error) => console.log(`Error retrieving icon: ${err.message}`)
         );
-      } else {
+      } else if (svgIconChanges.previousValue) {
         this._clearSvgElement();
       }
     }