How to add svg icon in rounded bootstrap 4 form input / button?

Question

I'm using Bootstrap 4 for an Angular project, and I would like to add icon font which I created using svg and iconmoon into buttons and forms input like in these images:

Answer 1

The new rounded-pill class in Bootstrap 4 works well for this...

Rounded input group:

       <div class="input-group">
            <input class="form-control py-2 rounded-pill mr-1 pr-5" type="text" value="input">
            <span class="input-group-append">
                <button class="btn rounded-pill border-0 ml-n5" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>

Rounded Button:

       <button class="btn btn-primary btn-block rounded-pill">
            Facebook <i class="fa fa-facebook mt-1 float-left"></i>
        </button>

Demo: https://www.codeply.com/go/bv4I8WXfWE

---

Related: Search input with an icon Bootstrap 4 with rounded textbox

Answer 2

You can use the input-group-append CSS class to add content in the end of the input:

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">
      <img src="icon.svg" alt="Check icon">
    </span>
  </div>
</div>