refactor(icon): id attribute not being cleared completely (#10742)

Currently when we clear the id of an icon, we set it to an empty string which still keeps it on the element. This change removes the attribute altogether.

Author: crisbeto

src/lib/icon/icon-registry.ts

@@ -451,7 +451,7 @@ export class MatIconRegistry {
     // Clone the element and remove the ID to prevent multiple elements from being added
     // to the page with the same ID.
     const iconElement = iconSource.cloneNode(true) as Element;
-    iconElement.id = '';
+    iconElement.removeAttribute('id');
 
     // If the icon node is itself an <svg> node, clone and return it directly. If not, set it as
     // the content of a new <svg> node.

src/lib/icon/icon.spec.ts

@@ -260,7 +260,7 @@ describe('MatIcon', () => {
       // The <svg> child should be the <g id="pig"> element.
       expect(svgChild.tagName.toLowerCase()).toBe('g');
       expect(svgChild.getAttribute('name')).toBe('pig');
-      expect(svgChild.getAttribute('id')).toBe('');
+      expect(svgChild.getAttribute('id')).toBeFalsy();
       expect(svgChild.childNodes.length).toBe(1);
       verifyPathChildElement(svgChild, 'oink');
 
@@ -278,6 +278,21 @@ describe('MatIcon', () => {
       verifyPathChildElement(svgChild, 'moo moo');
     });
 
+    it('should clear the id attribute from the svg node', () => {
+      iconRegistry.addSvgIconSetInNamespace('farm', trustUrl('farm-set-1.svg'));
+
+      const fixture = TestBed.createComponent(IconFromSvgName);
+
+      fixture.componentInstance.iconName = 'farm:pig';
+      fixture.detectChanges();
+      http.expectOne('farm-set-1.svg').flush(FAKE_SVGS.farmSet1);
+
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+      const svgElement = verifyAndGetSingleSvgChild(matIconElement);
+
+      expect(svgElement.hasAttribute('id')).toBe(false);
+    });
+
     it('should unwrap <symbol> nodes', () => {
       iconRegistry.addSvgIconSetInNamespace('farm', trustUrl('farm-set-3.svg'));
 
@@ -476,7 +491,7 @@ describe('MatIcon', () => {
       // The <svg> child should be the <g id="pig"> element.
       expect(svgChild.tagName.toLowerCase()).toBe('g');
       expect(svgChild.getAttribute('name')).toBe('pig');
-      expect(svgChild.getAttribute('id')).toBe('');
+      expect(svgChild.getAttribute('id')).toBeFalsy();
       expect(svgChild.childNodes.length).toBe(1);
       verifyPathChildElement(svgChild, 'oink');