Ng-zorro-antd: Button: Loading state overlays icon when button caption is set dynamically

[SvenSchoene]

Version

1.6.0

Environment

Chrome: 69.0.3497.100 (Official Build) (64-bit) / Windows 10 / Angular: 6.1.8

Reproduction link

https://stackblitz.com/edit/angular-nl4d7p?file=src/app/app.component.ts

Steps to reproduce

Take this button code from the example (link: https://ng.ant.design/components/button/en) under the "Loading"-section:

<button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo"><i class="anticon anticon-poweroff"></i>Click me!</button>

Replace the text Click me! with a dynamic/variable text:

<button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo"><i class="anticon anticon-poweroff"></i>{{ 'Click me!' }}</button>

This is reproducible with:

• String-variables directly in the template, e.g. like above {{ 'Click me!' }}
• Functions that return variables, e.g. {{ getButtonCaption() }}
• Members of the Component: {{ buttonCaption }}
• Using ngx-translate-directive (https://github.com/ngx-translate/core), e.g. {{ 'path.to.caption' | translate }}

What is expected?

Using variables as the button caption together with an icon and a loading state works exactly the same as using plain text as button caption.

What is actually happening?

• Using variables as the button caption together with an icon and a loading state: the icon is being overlayed by the loading spinner. <-- this is the issue.
• Using plain text as the button caption together with an icon and a loading state: the icon is properly hidden by the loading spinner. <-- this is a case where it's working as expected.
  

  Other?

See the minimal reproduction where very slightly adjusted the example from the documentation.
Personally, I am not sure what could cause this. Maybe something in the Wave-renderer (see: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/core/wave/nz-wave-renderer.ts)? I'm not entirely sure about this, though.

Why would one want dynamic variables as button caption?
We use ngx-translate to translate all strings in our app. We need our buttons to be translatable as well -- which they are, just not in this case.

[vthinkxie]

@SvenSchoene Thanks for reporting, this bug happened because that the detection of the first child in button goes wrong when there is dynamic text in it.
We will fix it after sync with ant design version 3.9.2 (provide new anticon component and rewrite button component), probably next week.