fix(icon): reverse for loop when removing child nodes from mat-icon (#12078)

When mat-icon element has more than one child node (like when mat-badge is used) then child nodes should be removed in the reversed order otherwise you will attempt to get node by index which is not correct any more since you've deleted some nodes already in the previous iterations and it will cause an error.

Author: pavel-agarkov

src/lib/icon/icon.ts

@@ -196,12 +196,12 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
 
   private _clearSvgElement() {
     const layoutElement: HTMLElement = this._elementRef.nativeElement;
-    const childCount = layoutElement.childNodes.length;
+    let childCount = layoutElement.childNodes.length;
 
     // 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++) {
-      const child = layoutElement.childNodes[i];
+    while (childCount--) {
+      const child = layoutElement.childNodes[childCount];
 
       // 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.