ant-btn-icon-only works wrong with dynamic importing icons

[VitaliiLitkevichVL]

Reproduction link

https://stackblitz.com/edit/angular-ivy-8bqap7?file=angular.json,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

Steps to reproduce

1. add button with icon only
2. check if is has class ant-btn-icon-only

What is expected?

button has ant-btn-icon-only class

What is actually happening?

button doesn't have ant-btn-icon-only class

Environment	Info
ng-zorro-antd	14.0.0
Browser	All

---

it checks if svg node exists
return node.nodeName === 'SPAN' && iconChildNodes.length > 0 && iconChildNodes.every(ic => ic.nodeName === 'svg');

[oestrogen]

I have the same problem and noticed it mostly happens on the first "real" page load. I can reproduce this in the NG-Zorro documentation:

1. Go to https://ng.ant.design/components/button/en
2. Look at the "square" icon-only button in the Sizes section. It's not square! (and is missing the ant-btn-icon-only class)
   
3. Click anything in the side menu, i.e. Icons
4. Click Buttons in the side menu to go back
5. Look at the same button again. It's rightfully square! (and has the ant-btn-icon-only class)
   

[simplejason]

We very much expect you to submit a PR to fix this issue :) cc @hullis If you have time, please also check this issue :)

[Nosfistis]

Hi, we are using custom icons (FontAwesome) in a nested component. In ng-zorro 13, it worked fine using the markup below:

<button nz-button>
  <i nz-icon>
    <fa-icon [icon]="faCheck"></fa-icon>
  </i>
</button>

In ng-zorro 14, there is a check that the icon child of button is a <span> element, that has an <svg> child. I think this might be a little extreme, as it excludes any custom components.

Perhaps a markup like this should be valid, meaning nz-button only checks that <nz-icon> or <any-tag><svg></svg></any-tag> exists. Checking for the existance of <svg> is good but might have issues with delayed rendering (dynamic) of the svg component.

<button nz-button>
  <fa-icon nz-icon [icon]="faCheck"></fa-icon>
</button

It could also support deeper structures such as

<button nz-button>
  <span nz-icon>
    <fa-icon [icon]="faCheck"></fa-icon>
  </span>
</button>

The check might also be done using ViewChild, for a more angular way.

I am willing to submit a PR.