diff --git a/components/collapse/demo/custom.ts b/components/collapse/demo/custom.ts
index 90a42855d48..0a1bf19f60d 100644
--- a/components/collapse/demo/custom.ts
+++ b/components/collapse/demo/custom.ts
@@ -4,13 +4,14 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-custom',
   template: `
     <nz-collapse [nzBordered]="false">
-      <nz-collapse-panel *ngFor="let panel of panels; let isFirst = first" [nzHeader]="panel.name" [nzActive]="panel.active"
+      <nz-collapse-panel #p *ngFor="let panel of panels; let isFirst = first" [nzHeader]="panel.name" [nzActive]="panel.active"
         [ngStyle]="panel.customStyle" [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)">
         <p>{{panel.name}} content</p>
+        <ng-template #expandedIcon let-active>
+          {{ active }}
+          <i nz-icon type="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></i>
+        </ng-template>
       </nz-collapse-panel>
-      <ng-template #expandedIcon>
-        <i nz-icon type="caret-right" class="ant-collapse-arrow"></i>
-      </ng-template>
     </nz-collapse>
   `,
   styles  : []
diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html
index 5387a690203..5409cd1f3b4 100644
--- a/components/collapse/nz-collapse-panel.component.html
+++ b/components/collapse/nz-collapse-panel.component.html
@@ -1,7 +1,7 @@
 <div role="tab" [attr.aria-expanded]="nzActive" class="ant-collapse-header" (click)="clickHeader()">
   <ng-container *ngIf="nzShowArrow">
     <ng-container *nzStringTemplateOutlet="nzExpandedIcon">
-      <i nz-icon [type]="nzExpandedIcon || 'right'" class="ant-collapse-arrow"></i>
+      <i nz-icon [type]="nzExpandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0"></i>
     </ng-container>
   </ng-container>
   <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
@@ -12,4 +12,4 @@
   <div class="ant-collapse-content-box">
     <ng-content></ng-content>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
index de1e390ea71..bf0741a4146 100644
--- a/components/icon/nz-icon.directive.ts
+++ b/components/icon/nz-icon.directive.ts
@@ -6,7 +6,8 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
-  Renderer2
+  Renderer2,
+  SimpleChanges
 } from '@angular/core';
 import { IconDirective, ThemeType } from '@ant-design/icons-angular';
 import { InputBoolean } from '../core/util';
@@ -135,6 +136,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   private handleRotate(svg: SVGElement): void {
     if (this.nzRotate) {
       this.renderer.setAttribute(svg, 'style', `transform: rotate(${this.nzRotate}deg)`);
+    } else {
+      this.renderer.removeAttribute(svg, 'style');
     }
   }
 
@@ -162,9 +165,13 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     super(iconService, elementRef, renderer);
   }
 
-  ngOnChanges(): void {
-    if (!this.iconfont) {
+  ngOnChanges(changes: SimpleChanges): void {
+    const { type, nzType, nzTwotoneColor, twoToneColor, spin, nzSpin, theme, nzTheme, nzRotate } = changes;
+
+    if (type || nzType || nzTwotoneColor || twoToneColor || spin || nzSpin || theme || nzTheme) {
       this.changeIcon2();
+    } else if (nzRotate) {
+      this.handleRotate(this.el.firstChild);
     } else {
       this._setSVGElement(this.iconService.createIconfontIcon(`#${this.iconfont}`));
     }