fix(icon): clearing all content when inserting a new SVG

Currently when we insert a new SVG icon, we clear the entire content of the `mat-icon` in order to get rid of the previous icon. This is problematic, because it ends up removing other elements like `mat-badge`. These changes switch to removing all non-element nodes and all SVGs.

Fixes #11151.

Author: crisbeto

src/lib/icon/icon.spec.ts

@@ -51,6 +51,7 @@ describe('MatIcon', () => {
         IconWithAriaHiddenFalse,
         IconWithBindingAndNgIf,
         InlineIcon,
+        SvgIconWithUserContent,
       ]
     });
 
@@ -397,6 +398,26 @@ describe('MatIcon', () => {
 
       expect(icon.querySelector('svg')).toBeFalsy();
     });
+
+    it('should keep non-SVG user content inside the icon element', fakeAsync(() => {
+      iconRegistry.addSvgIcon('fido', trustUrl('dog.svg'));
+
+      const fixture = TestBed.createComponent(SvgIconWithUserContent);
+      const testComponent = fixture.componentInstance;
+      const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+
+      testComponent.iconName = 'fido';
+      fixture.detectChanges();
+      http.expectOne('dog.svg').flush(FAKE_SVGS.dog);
+
+      const userDiv = iconElement.querySelector('div');
+
+      expect(userDiv).toBeTruthy();
+      expect(iconElement.textContent.trim()).toContain('Hello');
+
+      tick();
+    }));
+
   });
 
   describe('Icons from HTML string', () => {
@@ -706,3 +727,8 @@ class IconWithBindingAndNgIf {
 class InlineIcon {
   inline = false;
 }
+
+@Component({template: `<mat-icon [svgIcon]="iconName"><div>Hello</div></mat-icon>`})
+class SvgIconWithUserContent {
+  iconName: string | undefined = '';
+}

src/lib/icon/icon.ts

@@ -17,6 +17,8 @@ import {
   OnInit,
   SimpleChanges,
   ViewEncapsulation,
+  Inject,
+  Optional,
 } from '@angular/core';
 import {CanColor, mixinColor} from '@angular/material/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
@@ -74,7 +76,6 @@ export const _MatIconMixinBase = mixinColor(MatIconBase);
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, CanColor {
-
   /**
    * Whether the icon should be inlined, automatically sizing the icon to match the font size of
    * the element the icon is contained in.
@@ -199,10 +200,16 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
     const layoutElement: HTMLElement = this._elementRef.nativeElement;
     const childCount = layoutElement.childNodes.length;
 
-    // Remove existing child nodes and add the new SVG element. Note that we can't
-    // use innerHTML, because IE will throw if the element has a data binding.
+    // Remove existing non-element child nodes and SVGs, and add the new SVG element. Note that
+    // we can't use innerHTML, because IE will throw if the element has a data binding.
     for (let i = 0; i < childCount; i++) {
-      layoutElement.removeChild(layoutElement.childNodes[i]);
+      const child = layoutElement.childNodes[i];
+
+      // 1 corresponds to Node.ELEMENT_NODE. We remove all non-element nodes in order to get rid
+      // of any loose text nodes, as well as any SVG elements in order to remove any old icons.
+      if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') {
+        layoutElement.removeChild(child);
+      }
     }
   }