<div class="p-relative d-flex j-c-center a-i-center fit-h fit-w">
  @if (currentIcon()) {
    <i class="c8y-icon-duocolor" [c8yIcon]="currentIcon()"></i>
  } @else {
    <ng-content></ng-content>
  }
  <div class="showOnHover top-0 left-0 d-flex j-c-center a-i-center p-absolute fit-h fit-w">
    <button
      class="btn btn-default btn-xs"
      [attr.aria-label]="'Change icon' | translate"
      [tooltip]="'Change icon' | translate"
      placement="top"
      container="body"
      type="button"
      [delay]="500"
      [adaptivePosition]="false"
      (click)="onButtonClick.emit()"
    >
      <i c8yIcon="replace"></i>
    </button>
  </div>
</div>