ng-bootstrap datepicker calender icon is not displaying

Question

I am using angular-cli and ng-bootstrap for date picker. after installing datepicker from npm and adding it to main module, datepicker is working, However icon is not displaying.

datepicker

<div class="form-inline col-sm-6"> 
   <label class="col-sm-3">From:</label> 
   <div class="input-group"> 
      <input 
             class="form-control" 
             placeholder="yyyy-mm-dd" name="dp" 
             [(ngModel)]="model" 
              ngbDatepicker 
             #d="ngbDatepicker"> 
            <button 
                 class="input-group-addon" 
                 (click)="d.toggle()" 
                  type="button"> 
                   <img 
                        src="img/calendar-icon.svg" 
                        style="width: 1.2rem; height: 1rem; cursor: pointer;"/> 
           </button> 
  </div> 
</div>

Answer 1

If you open the stackblitz for one of their examples you can see they get the icon by adding this style:

button.calendar, button.calendar:active {
  width: 2.75rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: center;
}

Then just use something like this for the button:

<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>

Answer 2

Another option you can use font awesome icons and change the code of button tag to below-

<div class="input-group-append">
     <button class="btn btn-outline-secondary calendar fa fa-calendar" (click)="d.toggle()" type="button"></button>
</div>