Angular Material button remove autofocus

Question

I have the following button

<td mat-cell *matCellDef="let element">   <button mat-icon-button type="button" (click)="downloadStuff(element)">     <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>   </button> </td> 

All good but I noticed the little bugger gets outlined by default:

Ok.... CSS lets me remove the annoying outline withe the following:

button:focus {     outline: none; } 

But then.. I still get this annoying default background focus:

I've tried a few overlay and background-related things in CSS and none of these seemed to address the issue. How do I remove this default background? And why does it behave like this by deafault???

See the selected item in dev tools.

Answer 1

In my case the real problem was the button structure. Angular Material builds various sub components and the last one is a 'div' with css class mat-button-focus-overlay:

My solution is simply. In style.css add or overwrite the mat-button-focus-overlay:

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

Answer 2

After clicking or touching on a Material Design button it stays focused ---> to resolve this, you need to add the following code: onclick="this.blur()"

<button mat-raised-button  onclick="this.blur()" (click)="onEdit()">Edit</button> 

or in your case

<td mat-cell *matCellDef="let element">     <button mat-icon-button type="button" onclick="this.blur()" (click)="downloadStuff(element)">         <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>     </button> </td>