feat(module:collapse): support custom icon

[danranVm]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #2736

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x ] No

Other information

[netlify]

Deploy preview for ng-zorro-master ready!

Built with commit f7dd9db

https://deploy-preview-2783--ng-zorro-master.netlify.com

[codecov]

Codecov Report

Merging #2783 into master will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #2783      +/-   ##
==========================================
- Coverage   97.36%   97.36%   -0.01%     
==========================================
  Files         526      526              
  Lines       11026    11034       +8     
  Branches      786      786              
==========================================
+ Hits        10736    10743       +7     
- Misses        189      190       +1     
  Partials      101      101

Impacted Files	Coverage Δ
components/collapse/nz-collapse-panel.component.ts	100% <100%> (ø)	⬆️
components/table/nz-table.component.ts	98.27% <0%> (-0.87%)	⬇️
components/icon/nz-icon.directive.ts	98.85% <0%> (+0.1%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a67984c...f7dd9db. Read the comment docs.

[wzhudev]

You should make sure that the DOM structure is same with Ant Design. And we can provide more customized API for our users.

[wzhudev]

@danranVm LGTM. Thanks for your great work!

[wzhudev]

Some minor problems. Avoid DOM changes, please.

[hsuanxyz]

⌛️ ant-design/ant-design#14060

[danranVm]

@wendzhue please review

[wzhudev]

@danranVm 问题在于比 React 那边多嵌套了一层 DOM 而不是该用哪个标签.

为了避免将来在样式上出现问题, 我们一般和 ant design 那边在 DOM 结构上不会有大的差异.

[danranVm]

@wendzhue 好吧 如果只用一层 i 的话，可以做到，只不过代码看起来不够简洁，例如

  <ng-container *ngIf="nzShowArrow">
    <ng-container *ngIf="nzExpandedIcon;else defaultIcon">
      <ng-container *nzStringTemplateOutlet="nzExpandedIcon">
        <i class="ant-collapse-arrow anticon-right" nz-icon [type]="nzExpandedIcon"></i>
      </ng-container>
    </ng-container>
    <ng-template #defaultIcon>
      <i class="ant-collapse-arrow anticon-right" nz-icon type="right" ></i>
    </ng-template>
  </ng-container>

或者,你还有更好的方法吗？😄

[wzhudev]

@wendzhue 好吧 如果只用一层 i 的话，可以做到，只不过代码看起来不够简洁，例如

  <ng-container *ngIf="nzShowArrow">
    <ng-container *ngIf="nzExpandedIcon;else defaultIcon">
      <ng-container *nzStringTemplateOutlet="nzExpandedIcon">
        <i class="ant-collapse-arrow anticon-right" nz-icon [type]="nzExpandedIcon"></i>
      </ng-container>
    </ng-container>
    <ng-template #defaultIcon>
      <i class="ant-collapse-arrow anticon-right" nz-icon type="right" ></i>
    </ng-template>
  </ng-container>

或者,你还有更好的方法吗？😄

[type]="nzExpandedIcon || 'right'"

[danranVm]

@wendzhue @vthinkxie 现在应该可以了吧~ 我之前没想到 nzStringTemplateOutlet 这么强大。😄

另外把 class="arrow" 跟master 同步后，变为 class="ant-collapse-arrow"， 点击改变方向的功能就失效了, 这是由于 less 还没同步过来对吗？

[wzhudev]

@danranVm 应该不是. React 那边的 icon 新增了 rotate API, 这个 API 我刚才也添加上了. 而且样式也刚刚同步过一次. 试试使用 rotate API.

[vthinkxie]

rotate 问题单独修复，感谢pr

[wzhudev]

@danranVm 旋转问题我会在另外一个 PR 里解决掉. Thank you!