如何修复Angular Material md-icon的垂直对齐方式？

Question

我想修复图片中所示的md-icon对齐方式（请点击下面的“Angular card”）

当我没有定义按钮的高度和宽度时，图标与按钮重叠。但问题在于，它们一起向下并且不遵循垂直对齐（就像现在的navigate_next那样）。在这种情况下，我已经定义了按钮的高度和宽度，但现在图标不会像图片中那样与按钮重叠。

HTML部分

<md-card class="product">
      <div class="product-image">
        <img md-card-image src="assets/cake.jpg">
      </div>
      <div class="product-place">
        <md-card-footer>
          <md-icon>location_on</md-icon>
          <span>Resto Sudi Mampir Co</span>
          <button  md-icon-button>
            <md-icon>navigate_next</md-icon>
          </button>
        </md-card-footer>
      </div>
    </md-card>

CSS部分

.product {
  width: 300px;
}
img {
    margin-bottom: -4px;
}
md-card-footer {
  background-color: #FEE436;
  padding: 10px;
  color: #4B493F;
}
button {
    vertical-align: middle;
    height: 20px;
    width: auto;
}
md-icon {
    height: 20px;
    width: 20px;
    font-size: 20px;
    vertical-align: middle;
}
  span {
    font-size: 15px;
    font-weight: 600;
    vertical-align: middle;
}

Angular card