添加了input-group-append的图标看上去比输入框大

Question

我在导航栏中显示了以下搜索输入框。

让我感到困惑的是，附加的搜索图标看起来好像比输入搜索字段大。这似乎是由于搜索框中使用了“内联”阴影。

如何在不去除阴影的情况下使图标看起来更好？

<nav>
    <!-- removed -->

    <!-- Right side items -->
    <form class="navbar-nav form-inline flex-column flex-sm-row" style="flex-basis: 350px;">
      <div class="input-group flex-sm-fill">
        <input class="form-control" id="search-box" type="search" placeholder="Search">
        <div class="input-group-append">
          <span class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></span>
        </div>
        <div class="card shadow px-4 border-top-0" id="result-box" style="display: none; position: absolute; top: 46px;">
          <ul class="list-unstyled" id="search-result"></ul>
        </div>
      </div>
    </form>
  </div>
</nav>