mat-icon 按钮单击中的 mat-icon 未正确显示焦点答案

【问题标题】：mat-icon in a mat-icon button click doesnt show the foucus correctlymat-icon 按钮单击中的 mat-icon 未正确显示焦点
【发布时间】：2018-04-12 03:40:54
【问题描述】：

我在带有 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;
}

【问题讨论】：

标签： html css button angular-material

【解决方案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
}

【讨论】：

【解决方案2】：

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

正确版本：

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

 .button {
   display: inline-block;
 }

【讨论】：

但我需要左边的 24px 空间