diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts
index f3c07d0cfe5..74276ed2616 100644
--- a/components/icon/icon.directive.ts
+++ b/components/icon/icon.directive.ts
@@ -3,17 +3,20 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { isPlatformServer } from '@angular/common';
 import {
   AfterContentChecked,
   ChangeDetectorRef,
   Directive,
   ElementRef,
+  Inject,
   Input,
   NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
+  PLATFORM_ID,
   Renderer2,
   SimpleChanges
 } from '@angular/core';
@@ -80,7 +83,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     elementRef: ElementRef,
     public iconService: NzIconService,
     public renderer: Renderer2,
-    @Optional() iconPatch: NzIconPatchService
+    @Optional() iconPatch: NzIconPatchService,
+    @Inject(PLATFORM_ID) private readonly platformId: string
   ) {
     super(iconService, elementRef, renderer);
 
@@ -135,6 +139,14 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   private changeIcon2(): void {
     this.setClassName();
 
+    // First of all, we can't render the SVG on the server and send it to the browser for now,
+    // so the browser doesn't have to re-render it. Second, the `IconDirective` will still re-load
+    // this SVG, so we'll have an unnecessary HTTP request on the server-side. There's no sense to
+    // call `_changeIcon()` when running the code on the Node.js side.
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+
     // We don't need to re-enter the Angular zone for adding classes or attributes through the renderer.
     this.ngZone.runOutsideAngular(() => {
       from(this._changeIcon())