Prevent routerlink being triggered from specific child elements

I have something like:

<ion-item
        *ngFor="let recipe of recipes"
        [routerLink]="['./',recipe.id]"
      >
        <ion-avatar><ion-img [src]="recipe.imageURL"></ion-img></ion-avatar>
        <ion-label>{{ recipe.name }}</ion-label>
        <ion-button
          (click)="deleteRecipe(recipe.id)"
          color="danger"
          ><ion-icon name="trash-outline"></ion-icon
        ></ion-button>
      </ion-item>

Which work as whenever I click on the item consistenting of an image, text and a delete button (and all the whitespace from the ion-item) we get redirected to the details page. I am wondering if it is possible to override this navigation where we stay on the same page when clicking the delete button?