fix(icon): handle unescaped characters in names (#15678)

Handles the icon registry not being able to find icons whose ids contain unescaped characters (e.g. spaces).

Note that for this example in particular having a space in the id is invalid, however I did it since supporting it is trivial.

Fixes #15673.

Author: crisbeto

src/material/icon/fake-svgs.ts

@@ -14,6 +14,7 @@
 export const FAKE_SVGS = {
   cat: '<svg><path id="meow" name="meow"></path></svg>',
   dog: '<svg><path id="woof" name="woof"></path></svg>',
+  dogWithSpaces: '<svg><path id="woof says the dog" name="woof"></path></svg>',
   farmSet1: `
     <svg>
       <defs>
@@ -37,6 +38,13 @@ export const FAKE_SVGS = {
       </symbol>
     </svg>
   `,
+  farmSet4: `
+    <svg>
+      <defs>
+        <g id="pig with spaces" name="pig"><path name="oink"></path></g>
+      </defs>
+    </svg>
+  `,
   arrows: `
     <svg>
       <defs>

src/material/icon/icon-registry.ts

@@ -449,7 +449,9 @@ export class MatIconRegistry implements OnDestroy {
    * returns it. Returns null if no matching element is found.
    */
   private _extractSvgIconFromSet(iconSet: SVGElement, iconName: string): SVGElement | null {
-    const iconSource = iconSet.querySelector('#' + iconName);
+    // Use the `id="iconName"` syntax in order to escape special
+    // characters in the ID (versus using the #iconName syntax).
+    const iconSource = iconSet.querySelector(`[id="${iconName}"]`);
 
     if (!iconSource) {
       return null;

src/material/icon/icon.spec.ts

@@ -268,6 +268,29 @@ describe('MatIcon', () => {
       verifyPathChildElement(svgChild, 'moo');
     });
 
+    it('should handle unescape characters in icon names', () => {
+      iconRegistry.addSvgIconSetInNamespace('farm', trustUrl('farm-set-4.svg'));
+
+      const fixture = TestBed.createComponent(IconFromSvgName);
+      const testComponent = fixture.componentInstance;
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+      let svgElement: any;
+      let svgChild: any;
+
+      testComponent.iconName = 'farm:pig with spaces';
+      fixture.detectChanges();
+      http.expectOne('farm-set-4.svg').flush(FAKE_SVGS.farmSet4);
+
+      expect(matIconElement.childNodes.length).toBe(1);
+      svgElement = verifyAndGetSingleSvgChild(matIconElement);
+      expect(svgElement.childNodes.length).toBe(1);
+      svgChild = svgElement.childNodes[0];
+      // The first <svg> child should be the <g id="pig"> element.
+      expect(svgChild.tagName.toLowerCase()).toBe('g');
+      expect(svgChild.getAttribute('name')).toBe('pig');
+      verifyPathChildElement(svgChild, 'oink');
+    });
+
     it('should never parse the same icon set multiple times', () => {
       // Normally we avoid spying on private methods like this, but the parsing is a private
       // implementation detail that should not be exposed to the public API. This test, though,