Убрать рамку в фокусе - список матов

Question

У меня проблема с границей в элементе mat-list-item, которую я не могу решить, я действительно искал решение на веб-сайте материала, но не нашел его.

Когда я нажимаю на иконку, появляется эта синяя рамка, я не нашел класс css, который делает это, кто-нибудь испытывал подобное?

Мой код:

 <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>

Класс 'active-item', создайте фиолетовую рамку справа, но не синюю рамку.

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

Я использую Angular с пользовательским интерфейсом материала.

Answer 1

попробуй:

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

}