为什么我的日期选择器图标大于输入字段？

Question

我正在为我的应用实现日期选择器，并努力将图标添加到输入字段，因为图标看起来比输入字段大得多。

https://i.imgur.com/uwcu8S1.png

<div class="row">
   <legend class="form-group col-form-label col-sm-2"> 
     {{'dropdowns.effective_date' | translate}}</legend>
       <div class="input-group col-sm-10">
          <div class="input-group-append">
             <span class="input-group-text" (click)="dpr1.show()">
               <i class="fa fa-calendar" aria-label="Date"></i>
             </span>
       </div>
      <input type="text"class="form-control placeholder" 
[(ngModel)]="searchModel.readingEffectiveDate"#dpr1="bsDatepicker" 
bsDatepicker placeholder="{{'placeholder.startDate' | 
translate}}"name="searchModel.readingEffectiveDate" 
[bsConfig]="datePickerOptions" > 
   </div>
</div>