bootstrap 4: Button with Icon and text

With Bootstrap 4 and Font-Awesome, if you want to place the icon to the left of the text, use the following snippet

<button class="btn btn-lg" style="background-color:transparent;">
   <i class="fa fa-pencil"></i> Edit
</button>

Create a div and then put font-awesome icons into it and then write text then provide necessary css and then you can use (click) event on the div.

Install bootstrap and font-awesome 

and then provide the path in the 'styles' of angular-cli.json. or,

<button class='btn btn-lg ' style='background-color:transparent;'> 
  <div style='text-align:center;'><i class="fa fa-times"></i></div>  
    Cancel Reservation
</button>