If I touch the icon and drag the button, then the functions triggered by the icon must not be launched. What must I do?
<div>
<button type="button" class="fixed-button wobble" [style.background]="changeColorService.defaultStyles.firstDesignBackgroundColor" [appMovable]="true">
<mat-icon [style.color]="changeColorService.defaultStyles.firstDesignFontColor" *ngIf="!(changeKagListIcon)" (click)="openKagListDialog()" matTooltip="KAG-Liste öffnen" [appMovable]="true">dvr</mat-icon>
<mat-icon [style.color]="changeColorService.defaultStyles.firstDesignFontColor" *ngIf="changeKagListIcon" (click)="dialog.closeAll()" matTooltip="KAG-Liste schließen" [appMovable]="true">close</mat-icon>
</button>
I am not quite sure what you mean, but consider to call event.stopPropagation().
<button (click)="specialFnc()">
<mat-icon (click)="$event.stopPropagation()"></mat-icon>
</button>
If you click the icon the specialFnc won't get called. So if you like this behavior, for the drag event - just stop the event chain at the desired point.
I don't know which directive [appMovable] is, but within the drag handling you have to call stopPropagation.
Javascript event.stopPropagation() will help child event bubbling on Parent element Onclick events.
Example,
<button (onclick)="stopChildTrigger($event)">
<mat-icon><mat-icon>
</button>
stopChildTrigger(e){
e. stopPropagation();
}