Angular 5: clicked button that triggers a dialog becomes highlighted after the dialog is closed

1. Add to your button in HTML some id. In my case it's #changeButton:

<button #changeButton mat-icon-button (click)="changeItem(element)" disableRipple>
    <mat-icon>edit</mat-icon>
</button>

2. Import ViewChild and ElementRef in the .ts file:

{ ViewChild, ElementRef } from '@angular/core';

3. Declare a new variable in the .ts file:

@ViewChild('changeButton') private changeButton: ElementRef;

4. Subscribe to your dialog's afterClose() event and remove the cdk-program-focused css class:

dialogRef.afterClosed().subscribe(result => {
    this.changeButton['_elementRef'].nativeElement
        .classList.remove('cdk-program-focused');
}

In my case, the real problem stay in button structure, 'material' build various sub components and last one is a 'div' with css class 'mat-button-focus-overlay':

My solution is simply, in 'style.css' file, add or sobrescribe the 'mat-button-focus-overlay'

.mat-button-focus-overlay { background-color: transparent!important; }