Explanation:

The example above uses Bootstrap's built-in classes along with the Font Awesome icon library for the icon:

The btn btn-primary classes style the button.
The <i class="fa-solid fa-house-chimney"></i> element adds the Font Awesome (in this case, a "house" icon)
The custom CSS class .btn-demo-label (as defined in the CSS code below) is used to position the icon on the left side of the button.

HTML

<button type="button" class="btn btn-success btn-demo">
<span class="btn-demo-label"><i class="fa-solid fa-house-chimney"></i></span>Home</button>

HTML

<a href="#" class="btn btn-secondary btn-demo" role="button">
<span class="btn-demo-label"><i class="fa-solid fa-house-chimney"></i></span>Home</a>

Fontawesome CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

CSS

.btn-demo {
  position: relative;
  width: 200px;
  padding: 6px 12px 6px 60px;
  text-align: left;
}

.btn-demo-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px 0 0 3px;
}

Bootstrap

Bootstrap button with text and icon on the left

Explanation: