对齐跨度内的两个元素

Question

我正在尝试将标签放在标签文本旁边的按钮中。 我希望这两个排队，但是当我这样做时，文本似乎会下降到按钮的底部而不是中间。 我尝试设置线高：还垂直对齐：中间，但似乎都不起作用。有谁知道修复？

以下是我的尝试：

HTML

<button class='btn'>
  <span>Label</span>
  <i class="material-icons right">search</i>
</button>

CSS

.btn {    
  background-color: black;
  color: white;
  text-transform: uppercase;
  padding: 0 15px 0 15px;
  height: 40px;
}

.btn span {
  line-height: 40px;
  vertical-align: middle;
  padding-right: 10px;
}

.btn i {
  line-height: 40px;
}

这是一个小提琴： https://jsfiddle.net/0jy6zh75/9/