将文本中心与旁边的图标对齐

Question

我有以下代码：

<div class="icon-search small-collapse large-2 medium-12 small-12 hide-for-medium-down js-hide-for-small columns">
    <input type="submit" value="{{ 'SEARCH'|trans }}" class="button">
</div>

并且图标的CSS是：

.icon-search:before{
  top: 15px;
  left: 18px;
  position: absolute;
  z-index: 9999;
  color: white;
  font-size: 2.2rem;
}

然而，由于语言选择，我从“value ='{{'SEARCH'| trans}}'”得到的值是动态的。

如何确保“icon-search”始终距离“{{'SEARCH'| trans}}”的值返回5px，并且两者始终对齐居中？