From 052e8eeadfe02472d7ca55333e321062a8e80120 Mon Sep 17 00:00:00 2001
From: wendellhu <wendellhu95@gmail.com>
Date: Wed, 5 Jan 2022 17:07:51 +0800
Subject: [PATCH] fix(module:icon): fix old icon element not removed

close #7186
---
 components/icon/icon.directive.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts
index 5d88ccb658..99482ea813 100644
--- a/components/icon/icon.directive.ts
+++ b/components/icon/icon.directive.ts
@@ -5,6 +5,7 @@
 
 import {
   AfterContentChecked,
+  ChangeDetectorRef,
   Directive,
   ElementRef,
   Input,
@@ -74,7 +75,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   private destroy$ = new Subject<void>();
 
   constructor(
-    private ngZone: NgZone,
+    private readonly ngZone: NgZone,
+    private readonly changeDetectorRef: ChangeDetectorRef,
     elementRef: ElementRef,
     public iconService: NzIconService,
     public renderer: Renderer2,
@@ -138,6 +140,11 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
       from(this._changeIcon())
         .pipe(takeUntil(this.destroy$))
         .subscribe(svgOrRemove => {
+          // The _changeIcon method would call Renderer to removed node, which would call `markElementAsRemoved` eventually,
+          // so we should call `detectChanges` to tell Angular remove the DOM node.
+          // #7186
+          this.changeDetectorRef.detectChanges();
+
           if (svgOrRemove) {
             this.setSVGData(svgOrRemove);
             this.handleSpin(svgOrRemove);