Ionic 3 Angular 4 ion-icon (click) not getting fired

问题

get into a bit strange issue, exactly as the topic says - (click) is not getting fired.

html:

  <ion-scroll scrollX="true">
    <ion-row nowrap class="photoBlock">
      <div *ngFor="let img of base64Images" class="scroll-item">
        <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture()"></ion-icon>
        <img src="{{img}}">
      </div>
      <div class="scroll-item">
        <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture()"></ion-icon>
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <button icon-only (click)="deletePicture()">
          <ion-icon name="close-circle" class="icon-delete-img" color="light-grey" (click)="deletePicture()"></ion-icon>
        </button>
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <button icon-only (click)="deletePicture()">
          <ion-icon name="close-circle" class="icon-delete-img" color="light-grey"></ion-icon>
        </button>
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <ion-icon name="camera" class="camera-icon icon-lg" (click)="takePicture()"></ion-icon>
      </div>
    </ion-row>
  </ion-scroll>

css:

  .scroll-content {
    padding-top: 0px !important;
  }

  .photoBlock {
    min-height: 180px;
    align-items: center;
    //justify-content: center;

    .camera-icon {
      font-size: 5.6em;
      vertical-align: middle;

      border: 2px solid map_get($colors, light-grey);
      padding: 9px 21px 9px 21px;
    }
  }

  ion-scroll[scrollX] {
    background-color: rgba(194, 194, 194, 0.34);
    min-height: 180px;

    .scroll-item {
      margin: 0 auto;
      min-height: 100px;
      min-width: 100px;
      max-height: 100px;
      max-width: 100px;
      overflow:hidden;

      position:relative;

      z-index: 97;


      margin: 0px 15px 0px 15px;
      //padding: 25px;
      .icon-delete-img {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 100;
      }
    }
  }

both options - click on button & click on ion-icon are not fired. (but ion-icon option is proffered anyway, <button> braking a layout a lot. included it just for a sample)

来源：https://stackoverflow.com/questions/45880331/ionic-3-angular-4-ion-icon-click-not-getting-fired