Angular 如何通过innerHtml在模板中显示动态插入的动感图标

我正在寻找一种方法来显示页面上的文本(markdown )，可以包含一个讨人喜欢的图标.框架的Angular 是15，并使用了可怕的6.

文本通过innerHTML标签动态插入. 通过一个标记管道，我能够将文本(以标记形式)转换为语义正确的HTML.不幸的是，关于图标的解析，我目前还没有找到一个好的解决方案.我不明白的是，我如何防止ng/security#xss清理我的代码，同时让图标占位符转换以调用并显示有趣的组件？

我try 使用

content.replace(/{!!icon!!}/g, '<fa-icon [icon]="faCoffee"></fa-icon>')

以用图标替换占位符{!!icon!!}.然而，Angular的安全干预并杀死了<fa-icon [icon]="faCoffee"></fa-icon>.所以我try 在管道中使用return this.domSanitizer.bypassSecurityTrustHtml来防止ng/security#xss杀死我的代码.这是可行的，但图标不显示，因为代码<fa-icon [icon]="faCoffee"></fa-icon>没有被解释.

@Pipe({
  name: 'sanitizer'
})
export class SanitizerPipe implements PipeTransform {

  constructor(private domSanitizer: DomSanitizer) { }

  transform(content: string, ...args: unknown[]): unknown {
      return this.domSanitizer.bypassSecurityTrustHtml(this.iconParser(content)) as SafeHtml;
    }
  }

  private iconParser = (content: string) => {
    return content.replace(/{!!icon!!}/g, `<fa-icon [icon]="faCoffee"></fa-icon>`);
  }

}

很久以前，我看到一个question被问到，他们已经通过注入Fontawous组件解决了问题.所以我的方法很容易出错，但我不知道如何用这个来解决它.

Angel不必要地复杂的"文档"(API)，像往常一样对这个主题只字不提.