CSS：带有材质图标的底部对齐文本

Question

我一直在努力争取两个图标和一个小文本之间的正确对齐，但我无法正确对齐它们：

我需要将文字与两个图标对齐，有人可以给我一个帮助;我检查了一个非常相似的post，但我无法使它工作。

.icon-company-title {
  margin-top: 30px;
}

.material-icons.md-18 {
  color: $primary;
  font-size: 40px;
  line-height: 0!important;
}

.material-icons.edit {
  color: $primary;
  vertical-align: middle;
}

.business-icon {
  display: inline-block;
  vertical-align: bottom;
}

<div class="icon-company-title">
  <div class="business-icon">
    <i class="material-icons md-18">business</i>
  </div>
  <span class="company-card-title">{{ entity.name }}</span>
  <button class="" mat-icon-button [matMenuTriggerFor]="menu">
            <i class="material-icons edit">mode_edit</i>
          </button>
</div>