Angular material mini button around display some square

Question

Im using my Angular 7 project for the Angular material mini buttons , I faced some issue , I added angular mini button, its working but when I click the button showing some square, any one know how to fix that issue?

Thanks.

please look at following my issue

My code

component.html

<div class="p-2">
<button mat-mini-fab>

            <mat-icon aria-label="Example icon-button with a heart icon " >edit
</mat-icon>
          </button>
</div>
          <div class="p-2"><button mat-mini-fab>

            <mat-icon aria-label="Example icon-button with a heart icon">delete
</mat-icon>
          </button>
</div>

.css

.mat-mini-fab.mat-accent {
  background-color: #e9ecef;  color: black; box-shadow: none;
}

Answer 1

Try

button{
  outline: none;
}