Remove border in focus - mat-list

Question

I'm having a problem with a border in the mat-list-item that I can't solve, I did look for a solution in the the material's website, but don't find it.

When I click on icon this blue border appears, I didn't find the css class that makes this happen, has anyone been through something similar?

My code:

 <mat-list>
     <mat-list-item class="item-list" routerLink="/panel/home" [routerLinkActive]="['active-item']">
        <mat-icon matListIcon>home</mat-icon>
     </mat-list-item>
     <mat-list-item class="item-list" routerLink="/profile" [routerLinkActive]="['active-item']">
        <mat-icon matListIcon>class</mat-icon>
     </mat-list-item>
     <mat-list-item class="item-list" routerLink="/student" [routerLinkActive]="['active-item']">
        <mat-icon matListIcon>assignment</mat-icon>
     </mat-list-item>
     <mat-list-item class="item-list">
        <mat-icon matListIcon>directions_run</mat-icon>
     </mat-list-item>
  </mat-list>

The 'active-item' class, make a that purple border-right, but not the blue border.

.active-item{
  border-right: 2px solid $primary-color;
  mat-icon {
    color: $primary-color 
  }
}

I use Angular with Material UI.

Answer 1

In case of Buttons insert this to styles.css :

button:focus, 
button:active:focus, 
button.active:focus {
    outline: none !important;
    outline-style: none !important;
}

Answer 2

try :

mat-icon,mat-icon.matListIcon{
    outline:none !important;

}