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,10 +17,13 @@ import {
   OnInit,
   SimpleChanges,
   ViewEncapsulation,
+  Inject,
+  Optional,
 } from '@angular/core';
 import {CanColor, mixinColor} from '@angular/material/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatIconRegistry} from './icon-registry';
+import {DOCUMENT} from '@angular/platform-browser';
 
 
 // Boilerplate for applying mixins to MatIcon.
@@ -74,6 +77,7 @@ export const _MatIconMixinBase = mixinColor(MatIconBase);
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, CanColor {
+  private _document: Document;
 
   /**
    * Whether the icon should be inlined, automatically sizing the icon to match the font size of
@@ -113,9 +117,13 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
   constructor(
       elementRef: ElementRef,
       private _iconRegistry: MatIconRegistry,
-      @Attribute('aria-hidden') ariaHidden: string) {
+      @Attribute('aria-hidden') ariaHidden: string,
+      /** @deletion-target 8.0.0 `document` parameter to be made required. */
+      @Optional() @Inject(DOCUMENT) document?: any) {
     super(elementRef);
 
+    this._document = document;
+
     // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
     // the right thing to do for the majority of icon use-cases.
     if (!ariaHidden) {
@@ -198,11 +206,16 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
   private _clearSvgElement() {
     const layoutElement: HTMLElement = this._elementRef.nativeElement;
     const childCount = layoutElement.childNodes.length;
+    const elementNodeType = this._document ? this._document.ELEMENT_NODE : 1;
 
-    // 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];
+
+      if (child.nodeType !== elementNodeType || child.nodeName.toLowerCase() === 'svg') {
+        layoutElement.removeChild(child);
+      }
     }
   }