Angular 9 - How To Add A Mat-icon Dynamically Inside HTML Page?

I have a simple problem with '@angular/core': '~9.1.6', and '@angular/material': '^9.2.3',, which I need to add random done elements to an HTML pag

Solution 1:

By registering the MatIcon component as a Custom Element you can easily achieve this:

ng add @angular/elements

app.component.ts:

  constructor(
    private injector: Injector,
  ) {
    const matIconElement = createCustomElement(MatIcon, { injector: this.injector });
    customElements.define('mat-icon', matIconElement);
  }

You can then display the custom trusted HTML (using the pipe you described):

<div [innerHTML]="customHtml | trustHtml"></div>

NB: Supported web browsers: