@if (iconType() === 'custom') {
  <button
    #content
    (click)="onClickHandler($event)"
    previous="previous"
    color="color"
    type="type"
    size="size"
    width="width"
    text="text"
    [disabled]="disabled()"
    [class]="[
      'pi-button',
      'pi-button__icon',
      buttonTypeClass,
      buttonColorClass,
      textClass,
      widthClass,
      hasPaddingClass,
      modeClass,
    ]"
  >
    @if (text()) {
      <span>{{ text() }}</span>
    }
    <span #projectedText class="pi-icon-button__projected"><ng-content></ng-content></span>
    <img src="/assets/icons/{{ icon() }}.svg" />
  </button>
} @else {
  <button
    #content
    (click)="onClickHandler($event)"
    previous="previous"
    color="color"
    type="type"
    size="size"
    width="width"
    text="text"
    [disabled]="disabled()"
    [class]="[
      'pi-button',
      'pi-button__icon',
      buttonTypeClass,
      buttonColorClass,
      textClass,
      widthClass,
      hasPaddingClass,
      modeClass,
    ]"
  >
    @if (previous()) {
      <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
    }
    @if (text()) {
      <span>{{ text() }}</span>
    }
    <span #projectedText class="pi-icon-button__projected"><ng-content></ng-content></span>
    @if (!previous()) {
      <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
    }
  </button>
}