title: mat-icon doesn't show icon in dialog after closing and re-opening the dialog
body: <p>I have created a dynamic dialog component, which I can pass action buttons to, which then get displayed in the dialog header. By default, the dialog contains a close action button, and I'm passing an edit action to the dialog header.
  This edit action contains two buttons:</p>
  <ul>
  <li>one select button that changes the dialog content to an edit form if it had not been selected and that cancels the editing if it had been selected prior.</li>
  <li>a save button that only displays if the select button had been selected.</li>
  </ul>
  <p>Both of these buttons are mat-icon-buttons using a mat-icon. This works fine when I open the dialog for the first time, however the icons do not get displayed if I close and re-open the dialog. The close button icon is displayed but neither of the edit action buttons are.</p>
  <p>This is where I open the dialog:</p>
  <pre><code>&lt;div id=&quot;btn-add&quot;&gt;
      &lt;button mat-mini-fab
              (click)=&quot;add()&quot;&gt;
          &lt;mat-icon&gt;add&lt;/mat-icon&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;wb-dialog [title]=&quot;selectedArea?.title&quot;
             [active]=&quot;!!selectedArea&quot;
             (onClose)=&quot;close()&quot;&gt;
      &lt;div actions&gt;
          &lt;wb-tab-button [tab]=&quot;dialogStatusEnum.EDIT&quot;
                         [form]=&quot;areaForm&quot;
                         icon=&quot;edit&quot;
                         [active]=&quot;this.dialogStatus === dialogStatusEnum.EDIT&quot;
                         (onSelect)=&quot;this.tab($event)&quot;
                         (onSubmit)=&quot;saveArea()&quot;&gt;&lt;/wb-tab-button&gt;
      &lt;/div&gt;
  &lt;/wb-dialog&gt;
  </code></pre>
  <p>And its typescript code:</p>
  <pre><code>export class AreaComponent {
      public readonly dialogStatusEnum: typeof DialogStatus = DialogStatus;
  
      public selectedArea: Area | undefined;
      public areaForm: FormGroup;
  
      constructor(formBuilder: FormBuilder) {
          this.areaForm = formBuilder.group({});
      }
      
      public add(): void {
          this.selectedArea = new Area();
          this.isDialogLoading = false;
      }
  
      public close(): void {
          this.selectedArea = undefined;
      }
  
      public tab(tab: DialogStatus | undefined) {
          this.dialogStatus = tab || this.dialogStatusEnum.EDIT;
      }
  
      public saveArea() {
          // TODO!
      }
  }
  </code></pre>
  <p>This is the dialog:</p>
  <pre><code>&lt;div class=&quot;mat-dialog-wrapper&quot;
       [ngClass]=&quot;{'mat-hidden': !active}&quot;&gt;
      &lt;mat-card *ngIf=&quot;active&quot;&gt;
          &lt;mat-card-header&gt;
              &lt;mat-card-title *ngIf=&quot;title&quot;
                              [ngClass]=&quot;{'mat-placeholder': !!title}&quot;&gt;{{title || 'no title'}}&lt;/mat-card-title&gt;
              &lt;ng-content select=&quot;[actions]&quot;&gt;&lt;/ng-content&gt;
              &lt;button mat-icon-button
                      (click)=&quot;close()&quot;
                      class=&quot;mat-card-header-action&quot;&gt;&lt;mat-icon&gt;close&lt;/mat-icon&gt;&lt;/button&gt;
          &lt;/mat-card-header&gt;
          &lt;ng-content select=&quot;[content]&quot;&gt;&lt;/ng-content&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And the component code:</p>
  <pre><code>export class DialogComponent {
      @Input() title: string | undefined;
      @Input() active: boolean;
      @Output() onClose: EventEmitter&lt;void&gt;;
  
      constructor() {
          this.active = false;
          this.onClose = new EventEmitter&lt;void&gt;();
      }
  
      public close(): void {
          this.onClose.emit();
      }
  }
  </code></pre>
  <p>And here's the button:</p>
  <pre><code>&lt;button *ngIf=&quot;active&quot;
          mat-icon-button
          (click)=&quot;submit()&quot;
          [disabled]=&quot;form.invalid&quot;&gt;&lt;mat-icon&gt;save&lt;/mat-icon&gt;&lt;/button&gt;
  &lt;button mat-icon-button
          (click)=&quot;select()&quot;
          [ngClass]=&quot;{'mat-active': active}&quot;&gt;
      &lt;mat-icon *ngIf=&quot;active&quot;&gt;block&lt;/mat-icon&gt;
      &lt;mat-icon *ngIf=&quot;!active&quot;&gt;{{icon}}&lt;/mat-icon&gt;
  &lt;/button&gt;
  </code></pre>
  <p>And its component:</p>
  <pre><code>export class TabButtonComponent {
      @Input() tab!: DialogStatus;
      @Input() form!: FormGroup;
      @Input() icon: string;
      @Input() active!: boolean;
      @Output() onSelect: EventEmitter&lt;DialogStatus | undefined&gt;;
      @Output() onSubmit: EventEmitter&lt;void&gt;;
  
      constructor() {
          this.onSelect = new EventEmitter&lt;DialogStatus | undefined&gt;();
          this.onSubmit = new EventEmitter&lt;void&gt;();
      }
  
      public select(): void {
          this.onSelect.emit(this.active ? undefined : this.tab);
      }
  
      public submit(): void {
          this.onSubmit.emit();
      }
  }
  </code></pre>
  <p>The only similar thing I found is this question <a href="https://stackoverflow.com/questions/55797323/message-wont-display-a-second-time-after-being-closed">message-wont-display-a-second-time-after-being-closed</a>. However, all my bindings work, the click event handlers, the dynamic mat-active CSS class, all of the elements exist in my DOM, the buttons as well as the icons and I couldn't find any difference in the CSS when I compare the first with a subsequent dialog call. The only issue I have is that the icons are not being displayed and I can't figure out why that is or how to fix it.</p>
  <p>If I place the tab button directly in the dialog instead of inserting it from the parent this issue does not occur.</p>