故事书(Angular)无法检索在MatIconRegistry注册的图标

Question

我的Angular应用程序在资源中有一个图标的自定义精灵，它通过MatIconRegistry正确注册，因为它们在整个平台上显示没有任何问题。在每个组件的HTML文件中，我使用

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

和我从来没有遇到任何问题。我现在正在尝试将Storybook添加到我的应用程序中，但这是我在尝试加载带有自定义图标的组件时收到的错误:

检索图标错误:icon-name!无法找到名称为":icon-name"的图标;在对象。错误(icon.mjs: 945:48)

我尝试在storybook文件夹中的preview-head.html文件中导入我的精灵，如下所示:

<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

但是到目前为止这些都不起作用，我不明白为什么Storybook不能检索图标。

Answer 1

需要为matIconRegistry创建一个像这样的模块:

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'
)
);
}
}

并将您的模块添加到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({});