fix(material/icon): forward fontIcon attribute to element (#25779)

In #24578 we added the ability to set font icons using the `fontIcon` input, however it was never forwarded to the `fontIcon` attribute which means using a data binding won't work.

Fixes #25759.

(cherry picked from commit d53e53b)

Author: crisbeto

src/material/icon/icon.spec.ts

@@ -248,6 +248,21 @@ describe('MatIcon', () => {
   });
 
   describe('Ligature icons by attribute', () => {
+    it('should forward the fontIcon attribute', () => {
+      const fixture = TestBed.createComponent(IconWithLigatureByAttribute);
+
+      const testComponent = fixture.componentInstance;
+      const icon = fixture.debugElement.nativeElement.querySelector('mat-icon');
+
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(icon.getAttribute('fontIcon')).toBe('home');
+
+      testComponent.iconName = 'house';
+      fixture.detectChanges();
+      expect(icon.getAttribute('fontIcon')).toBe('house');
+    });
+
     it('should add material-icons and mat-ligature-font class by default', () => {
       const fixture = TestBed.createComponent(IconWithLigatureByAttribute);
 

src/material/icon/icon.ts

@@ -147,6 +147,7 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
     '[attr.data-mat-icon-type]': '_usingFontIcon() ? "font" : "svg"',
     '[attr.data-mat-icon-name]': '_svgName || fontIcon',
     '[attr.data-mat-icon-namespace]': '_svgNamespace || fontSet',
+    '[attr.fontIcon]': '_usingFontIcon() ? fontIcon : null',
     '[class.mat-icon-inline]': 'inline',
     '[class.mat-icon-no-color]': 'color !== "primary" && color !== "accent" && color !== "warn"',
   },