材质组件 mat-button 和 mat-icon alignment

Question

材料组件很好，但定制令人困惑。 您能否建议如何在mat-button内水平和垂直对齐mat-icon ？

这个 HTML：

  <button mat-button
         class="closeX-btn">    
    <mat-icon class="closeX-icon">  
      clear</mat-icon>
  </button>

而这个 SCSS：

.closeX-btn {
  border: thin solid orange;
}

.closeX-icon {
  font-weight: bold;
  height:18px;
  width:18px;
  line-height: 18px;
  font-size:18px;
  border: thin solid red;
}

产生这个：

将按钮的 SCSS 更改为：

.closeX-btn {
  height: 18px;
  width: 18px;
  border: thin solid orange;
}

产生这个：

如果我们将： mat-button更改为： mat-icon-button ：

  <button mat-icon-button
         class="closeX-btn">    
    <mat-icon class="closeX-icon">  
      clear</mat-icon>
  </button>

我们得到这个：

期望的结果是：

• 按钮边框正好在图标周围，
• 换句话说，橙色边框就在红色边框周围
• 同时，始终匹配图标的大小 - 没有边距，没有填充，（周围没有空间）

对于像这样的垫子按钮：

对于mat-icon-button像这样：

Answer 1

对于那些在材料设计定制方面同样缺乏文档和模棱两可的人来说，这是我迄今为止解决的问题。

这段代码让我们更接近mat-icon-button像这样：

HTML：

清除

SCSS：

$closeX-icon-size: 18px;

.closeX-btn {
  height:      $closeX-icon-size + 6px;
  width:       $closeX-icon-size + 6px;
  line-height: $closeX-icon-size + 6px;
  border: thin solid orange;
}


.closeX-icon {
  height:      $closeX-icon-size;
  width:       $closeX-icon-size;
  line-height: $closeX-icon-size;
  font-size:   $closeX-icon-size;
  border: thin solid red;
}

• 结果是：

请注意，该图标仍未完全位于中间，但在中心下方略微移动，这很明显，...

...如果我们将： mat-icon-button更改为： mat-button同时保持所有其他内容相同，我们得到：

显然宽度没有影响。 这仍有待解决，希望有正确的答案......

很明显，我们不能依赖相关材质组件之间的一致性，例如mat-button和mat-icon-button