fix(icon): handle values with unnecessary spaces being passed into fo…

…ntIcon and fontSet (#9056)

Handles values with trailing/leading spaces, as well as space-separated values being passed into the `fontIcon` and `fontSet` properties, rather than letting the browser throw a DOM exception.

Fixes #9054.

src/lib/icon/icon.spec.ts

@@ -358,10 +358,10 @@ describe('MatIcon', () => {
       iconRegistry.registerFontClassAlias('f1', 'font1');
       iconRegistry.registerFontClassAlias('f2');
 
-      let fixture = TestBed.createComponent(IconWithCustomFontCss);
-
+      const fixture = TestBed.createComponent(IconWithCustomFontCss);
       const testComponent = fixture.componentInstance;
       const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+
       testComponent.fontSet = 'f1';
       testComponent.fontIcon = 'house';
       fixture.detectChanges();
@@ -377,6 +377,45 @@ describe('MatIcon', () => {
       fixture.detectChanges();
       expect(sortedClassNames(matIconElement)).toEqual(['f3', 'mat-icon', 'tent']);
     });
+
+    it('should handle values with extraneous spaces being passed in to `fontSet`', () => {
+      const fixture = TestBed.createComponent(IconWithCustomFontCss);
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+
+      expect(() => {
+        fixture.componentInstance.fontSet = 'font set';
+        fixture.detectChanges();
+      }).not.toThrow();
+
+      expect(sortedClassNames(matIconElement)).toEqual(['font', 'mat-icon']);
+
+      expect(() => {
+        fixture.componentInstance.fontSet = ' changed';
+        fixture.detectChanges();
+      }).not.toThrow();
+
+      expect(sortedClassNames(matIconElement)).toEqual(['changed', 'mat-icon']);
+    });
+
+    it('should handle values with extraneous spaces being passed in to `fontIcon`', () => {
+      const fixture = TestBed.createComponent(IconWithCustomFontCss);
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+
+      expect(() => {
+        fixture.componentInstance.fontIcon = 'font icon';
+        fixture.detectChanges();
+      }).not.toThrow();
+
+      expect(sortedClassNames(matIconElement)).toEqual(['font', 'mat-icon', 'material-icons']);
+
+      expect(() => {
+        fixture.componentInstance.fontIcon = ' changed';
+        fixture.detectChanges();
+      }).not.toThrow();
+
+      expect(sortedClassNames(matIconElement)).toEqual(['changed', 'mat-icon', 'material-icons']);
+    });
+
   });
 
   /** Marks an svg icon url as explicitly trusted. */

src/lib/icon/icon.ts

@@ -78,10 +78,20 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
   @Input() svgIcon: string;
 
   /** Font set that the icon is a part of. */
-  @Input() fontSet: string;
+  @Input()
+  get fontSet(): string { return this._fontSet; }
+  set fontSet(value: string) {
+    this._fontSet = this._cleanupFontValue(value);
+  }
+  private _fontSet: string;
 
   /** Name of an icon within a font set. */
-  @Input() fontIcon: string;
+  @Input()
+  get fontIcon(): string { return this._fontIcon; }
+  set fontIcon(value: string) {
+    this._fontIcon = this._cleanupFontValue(value);
+  }
+  private _fontIcon: string;
 
   private _previousFontSetClass: string;
   private _previousFontIconClass: string;
@@ -202,4 +212,13 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
       this._previousFontIconClass = this.fontIcon;
     }
   }
+
+  /**
+   * Cleans up a value to be used as a fontIcon or fontSet.
+   * Since the value ends up being assigned as a CSS class, we
+   * have to trim the value and omit space-separated values.
+   */
+  private _cleanupFontValue(value: string) {
+    return typeof value === 'string' ? value.trim().split(' ')[0] : value;
+  }
 }