mat-icon按钮中的mat-icon单击并不能正确显示错误

Question

我在带有mat-icon-button属性的按钮标签中有一个mat-icon。但是当我点击图标时，焦点圈就在其他地方。我希望它完全在图标上。这是代码： HTML

<button mat-icon-button class="button">
  <mat-icon class="menu">menu</mat-icon>
</button>

CSS

    .menu {
  width: 18px;
  height: 12px;
  margin-left: 0px
}

.button {
  padding-left: 24px;
  margin-bottom: 16px;
}

Answer 1

希望这有帮助：

.button{
position:relative;
}

.menu{
position:absolute;
top:5px; //change the value to set it in center
left:5px; //change the value to set it in center
}

Answer 2

按钮css（padding-left：24px）中存在问题

正确版本：

 .menu {
   width: 18px;
   height: 12px;
   display: inline-block;
   line-height: 30px;
   vertical-align: middle;
 }

 .button {
   display: inline-block;
 }