How do I include an Angular component that contains other non HTML elements like mat-icon via CDK Overlay

Question

I am attempting to implement a Speech To Text feature within my App by using a directive [appSpeechToText] which I can apply to any input/textarea field, the component basically displays a Record, Pause and Stop buttons for which I wish to use the <mat-icon> element.

My directive works in that if I create the HTML

<p>BANG!</p>

Everything compiles as you would expect and the label BANG! is displayed next to my textarea control as I would expect, however when I change the HTML to

<mat-icon>not_started</mat-icon>

I get the following message during compilation: -

src/app/shared/components/speech-to-text/speech-to-text.component.html:2:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2     <mat-icon>not_started</mat-icon>
      ~~~~~~~~~~

  src/app/shared/components/speech-to-text/speech-to-text.component.ts:5:18
    5     templateUrl: './speech-to-text.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SpeechToTextComponent.

I am at a loss as to how I inform Angular that I wish to use the MatIconModule?

To clarify

The component is launched via a directive using

this.overlayRef.attach(new ComponentPortal(SpeechToTextComponent))

I am not referencing the component in any module because it is dynamically attached to the overlay. I do however have the MatIconModule imported in my app.module.ts file but to no effect.

Answer 1

Either add the MatIconModule to the imports in your app.module.ts or (if existing) speech-to-text.module.ts.