Storybook (Angular) can't retrieve icon registered with MatIconRegistry

Question

My Angular application has a custom sprite of icons in the assets and it's correctly registered trough MatIconRegistry, since they show up throughout the entire platform without any problems. In the HTML file of each component I use

<mat-icon svgIcon="icon-name"></mat-icon>

and I never faced any issue. I'm now trying to add Storybook into my app but this is the error I receive when trying to load a component with custom icons:

Error retrieving icon :icon-name! Unable to find icon with the name ":icon-name" at Object.error (icon.mjs:945:48)

I tried importing my sprite in the preview-head.html file in the storybook folder as following:

<link
  href="../storybook-static/assets/icons/icon-name.svg" as="image"
/> //this is the storybook assets folder
<link
  href="../src/assets/icons/icon-name.svg" as="image"
/> //this is the general assets the entire app uses

but none of this worked so far, I don't understand why Storybook can't retrieve the icons.

Answer 1

Need to create a module for matIconRegistry something like that:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [],
  imports: [CommonModule, HttpClientModule],
})
export class IconRegistryModule {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry
      .addSvgIcon(
        'facebook',
        this.domSanitizer.bypassSecurityTrustResourceUrl(
          '../assets/icons/icon-facebook.svg'
        )
      )
      .addSvgIcon(
        'github',
        this.domSanitizer.bypassSecurityTrustResourceUrl(
          '../assets/icons/icon-github.svg'
        )
      )
      .addSvgIcon(
        'google',
        this.domSanitizer.bypassSecurityTrustResourceUrl(
          '../assets/icons/icon-google.svg'
        )
      );
  }

}

and add your module to the imports in stories:

import { Meta, Story, moduleMetadata } from '@storybook/angular';
import {YourComponent } from 'your-component.component';
import { IconRegistryModule } from 'icon-registry.module';

export default {
  title: 'YourComponent',
  component: YourComponent,
  decorators: [
    moduleMetadata({
      declarations: [YourComponent],
      imports: [
        IconRegistryModule,
      ],
    }),
  ],
} as Meta;

const Template: Story = (args) => ({ props: args });
export const YourStory = Template.bind({});