Angular 如何将我的标签与有角度的按钮对齐？

我有一个简单的问题-无法将我的按钮与文本对齐。现在看起来是这样的：

Html:

---

如果我尝试添加一个带有填充或边距的类到mat图标，它总是随着文本移动，并造成混乱。有什么想法吗？

如果要对齐，只需将图标移到span元素外即可

 <span class="explorer-list-row-title-text">
    {{tile.text}}
 </span>
 <mat-icon>
    {{!tile.direction ? 'arrow_drop_down':'arrow_drop_up'}}
 </mat-icon>

{{tile.text}
{{！tile.direction？'arrow\u drop\u down'：'arrow\u drop\u up'}

这不是物料按钮，它是列表的标题标题，仅用于对asc/desc进行排序。我已更新了答案。我注意到您正在将图标放置在span元素中。有什么原因吗？嗯，让我想想。。。不用了，现在没事了，谢谢。

.explorer {
 padding-top: 7px;
 padding-left: 16px;

 &-list {

  &-position {
   margin-left: -16px; //TODO fix
   margin-top: -7px; //TODO fix
   margin-right: -16px; //TODO fix
  }

  &-row {

   &-title {
    border-bottom: 1px solid grey;

    &-text {
     padding-bottom: 8px;
    }
   }
  }
 }
}

 <span class="explorer-list-row-title-text">
    {{tile.text}}
 </span>
 <mat-icon>
    {{!tile.direction ? 'arrow_drop_down':'arrow_drop_up'}}
 </mat-icon>