refactor(material/icon): convert to standalone

crisbeto · crisbeto · commit ac17a9cb9087 · 2023-11-27T17:18:08.000+01:00
Converts `material/icon` to standalone.
diff --git a/src/material/icon/icon-module.ts b/src/material/icon/icon-module.ts
@@ -11,8 +11,7 @@ import {MatCommonModule} from '@angular/material/core';
 import {MatIcon} from './icon';
 
 @NgModule({
-  imports: [MatCommonModule],
+  imports: [MatCommonModule, MatIcon],
   exports: [MatIcon, MatCommonModule],
-  declarations: [MatIcon],
 })
 export class MatIconModule {}
diff --git a/src/material/icon/icon.spec.ts b/src/material/icon/icon.spec.ts
@@ -9,7 +9,7 @@ import {Component, ErrorHandler, Provider, Type, ViewChild} from '@angular/core'
 import {MAT_ICON_DEFAULT_OPTIONS, MAT_ICON_LOCATION, MatIconModule} from './index';
 import {MatIconRegistry, getMatIconNoHttpProviderError} from './icon-registry';
 import {FAKE_SVGS} from './fake-svgs';
-import {wrappedErrorMessage} from '../../cdk/testing/private';
+import {wrappedErrorMessage} from '@angular/cdk/testing/private';
 import {MatIcon} from './icon';
 
 /** Returns the CSS classes assigned to an element as a sorted array. */
@@ -44,8 +44,7 @@ function verifyPathChildElement(element: Element, attributeValue: string): void
 /** Creates a test component fixture. */
 function createComponent<T>(component: Type<T>, providers: Provider[] = []) {
   TestBed.configureTestingModule({
-    imports: [MatIconModule],
-    declarations: [component],
+    imports: [MatIconModule, component],
     providers: [...providers],
   });
 
@@ -65,8 +64,9 @@ describe('MatIcon', () => {
     errorHandler = jasmine.createSpyObj('errorHandler', ['handleError']);
 
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, MatIconModule],
-      declarations: [
+      imports: [
+        HttpClientTestingModule,
+        MatIconModule,
         IconWithColor,
         IconWithLigature,
         IconWithLigatureByAttribute,
@@ -1297,6 +1297,13 @@ describe('MatIcon without HttpClientModule', () => {
   let iconRegistry: MatIconRegistry;
   let sanitizer: DomSanitizer;
 
+  @Component({
+    template: `<mat-icon [svgIcon]="iconName"></mat-icon>`,
+  })
+  class IconFromSvgName {
+    iconName: string | undefined = '';
+  }
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatIconModule],
@@ -1390,58 +1397,102 @@ describe('MatIcon with default options', () => {
   }));
 });
 
-@Component({template: `<mat-icon>{{iconName}}</mat-icon>`})
+@Component({
+  template: `<mat-icon>{{iconName}}</mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithLigature {
   iconName = '';
 }
 
-@Component({template: `<mat-icon [fontIcon]="iconName"></mat-icon>`})
+@Component({
+  template: `<mat-icon [fontIcon]="iconName"></mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithLigatureByAttribute {
   iconName = '';
 }
 
-@Component({template: `<mat-icon [color]="iconColor">{{iconName}}</mat-icon>`})
+@Component({
+  template: `<mat-icon [color]="iconColor">{{iconName}}</mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithColor {
   iconName = '';
   iconColor = 'primary';
 }
 
-@Component({template: `<mat-icon [fontSet]="fontSet" [fontIcon]="fontIcon"></mat-icon>`})
+@Component({
+  template: `<mat-icon [fontSet]="fontSet" [fontIcon]="fontIcon"></mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithCustomFontCss {
   fontSet = '';
   fontIcon = '';
 }
 
-@Component({template: `<mat-icon [svgIcon]="iconName"></mat-icon>`})
+@Component({
+  template: `<mat-icon [svgIcon]="iconName"></mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconFromSvgName {
   iconName: string | undefined = '';
 }
 
-@Component({template: '<mat-icon aria-hidden="false">face</mat-icon>'})
+@Component({
+  template: '<mat-icon aria-hidden="false">face</mat-icon>',
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithAriaHiddenFalse {}
 
-@Component({template: `@if (showIcon) {<mat-icon [svgIcon]="iconName">{{iconName}}</mat-icon>}`})
+@Component({
+  template: `@if (showIcon) {<mat-icon [svgIcon]="iconName">{{iconName}}</mat-icon>}`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithBindingAndNgIf {
   iconName = 'fluffy';
   showIcon = true;
 }
 
-@Component({template: `<mat-icon [inline]="inline">{{iconName}}</mat-icon>`})
+@Component({
+  template: `<mat-icon [inline]="inline">{{iconName}}</mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class InlineIcon {
   inline = false;
 }
 
-@Component({template: `<mat-icon [svgIcon]="iconName"><div>Hello</div></mat-icon>`})
+@Component({
+  template: `<mat-icon [svgIcon]="iconName"><div>Hello</div></mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class SvgIconWithUserContent {
   iconName: string | undefined = '';
 }
 
-@Component({template: '<mat-icon [svgIcon]="iconName">house</mat-icon>'})
+@Component({
+  template: '<mat-icon [svgIcon]="iconName">house</mat-icon>',
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class IconWithLigatureAndSvgBinding {
   iconName: string | undefined;
 }
 
-@Component({template: `<mat-icon></mat-icon>`})
+@Component({
+  template: `<mat-icon></mat-icon>`,
+  standalone: true,
+  imports: [HttpClientTestingModule, MatIconModule],
+})
 class BlankIcon {
   @ViewChild(MatIcon) icon: MatIcon;
 }
diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts
@@ -145,6 +145,7 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
   private _defaultColor: ThemePalette;
diff --git a/src/material/icon/testing/icon-harness.spec.ts b/src/material/icon/testing/icon-harness.spec.ts
@@ -13,8 +13,7 @@ describe('MatIconHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatIconModule],
-      declarations: [IconHarnessTest],
+      imports: [MatIconModule, IconHarnessTest],
     }).compileComponents();
 
     const registry = TestBed.inject(MatIconRegistry);
@@ -115,5 +114,7 @@ describe('MatIconHarness', () => {
     <mat-icon>ligature_icon_with_additional_content <span class="fake-badge">Hello</span></mat-icon>
     <mat-icon><span>ligature_icon_with_indirect_name</span></mat-icon>
   `,
+  standalone: true,
+  imports: [MatIconModule],
 })
 class IconHarnessTest {}
diff --git a/tools/public_api_guard/material/icon.md b/tools/public_api_guard/material/icon.md
@@ -10,7 +10,7 @@ import { ElementRef } from '@angular/core';
 import { ErrorHandler } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import * as i2 from '@angular/material/core';
+import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
@@ -89,7 +89,7 @@ export class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
     // (undocumented)
     _usingFontIcon(): boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIcon, "mat-icon", ["matIcon"], { "color": { "alias": "color"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "fontSet": { "alias": "fontSet"; "required": false; }; "fontIcon": { "alias": "fontIcon"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIcon, "mat-icon", ["matIcon"], { "color": { "alias": "color"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "fontSet": { "alias": "fontSet"; "required": false; }; "fontIcon": { "alias": "fontIcon"; "required": false; }; }, {}, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIcon, [null, null, { attribute: "aria-hidden"; }, null, null, { optional: true; }]>;
 }
@@ -113,7 +113,7 @@ export class MatIconModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatIconModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatIconModule, [typeof i1.MatIcon], [typeof i2.MatCommonModule], [typeof i1.MatIcon, typeof i2.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatIconModule, never, [typeof i1.MatCommonModule, typeof i2.MatIcon], [typeof i2.MatIcon, typeof i1.MatCommonModule]>;
 }
 
 // @public
