How do I add svg files via MatIconRegistry in unit tests?

Adding SVG files via MatIconRegistry in unit tests is a common requirement in Angular Material, especially when using custom SVG icons. Below, I will provide a detailed explanation of how to do this, along with a concrete example.

Step 1: Import Required Modules

First, ensure your test file imports the necessary modules and services. This includes HttpClientTestingModule and MatIconTestingModule, the latter used for handling icon loading.

typescript
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

// For Angular 9 and above, you must also import MatIconTestingModule
import { MatIconTestingModule } from '@angular/material/icon/testing';

Step 2: Configure Test Module

In your test configuration, use the TestBed.configureTestingModule method to set up your test environment.

typescript
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      HttpClientTestingModule,
      MatIconModule,
      MatIconTestingModule  // used to simplify icon handling in tests
    ],
    providers: [
      MatIconRegistry
    ]
  });

  // Get instances of MatIconRegistry and DomSanitizer services
  const iconRegistry = TestBed.inject(MatIconRegistry);
  const sanitizer = TestBed.inject(DomSanitizer);
});

Step 3: Add SVG Icons

After setting up the test environment, you can add SVG icons via the MatIconRegistry service. This operation is typically performed in the beforeEach hook or within individual test cases.

typescript
beforeEach(() => {
  const iconRegistry = TestBed.inject(MatIconRegistry);
  const sanitizer = TestBed.inject(DomSanitizer);
  const safeUrl = sanitizer.bypassSecurityTrustResourceUrl('path/to/your/icon.svg');

  iconRegistry.addSvgIcon('custom_icon', safeUrl);
});

Step 4: Test Using SVG Icons

Once the SVG icon is registered, you can use it in component or service tests. Ensure that the icon usage matches your expectations.

typescript
it('should display custom svg icon', () => {
  const fixture = TestBed.createComponent(YourComponent);
  fixture.detectChanges();

  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('mat-icon[svgIcon="custom_icon"]')).not.toBeNull();
});

This allows you to add and test SVG icons in Angular unit tests. This method is particularly useful for testing components that depend on icons, ensuring they load and display correctly.