Icon buttons allow you to add an icon to a button, adding a little flair to a boring button. Here are a few examples:
To use an icon button in your application, start by creating a Bootstrap button with the class icon-button. Next, add two <span> elements to your button. One of the spans will contain the button's text and the other one will contain the icon. Make sure to add the icon class to your icon span.
<button type="button" class="btn btn-secondary icon-button">
<span>Let's go</span>
<span class="icon"><i class="bi-arrow-right-circle"></i></span>
</button>You can place the icon on the left or the right - just move the icon span before or after the text span depending on your preference.
<button type="button" class="btn btn-warning icon-button">
<span class="icon"><i class="bi-arrow-left-circle"></i></span>
<span>Go back</span>
</button>Icon buttons work great at all sizes. Simply change add the btn-sm or btn-lg classes to the button and it will scale perfectly. You can also change the font-size property of the button element if you don't want to use Bootstrap's small and large styles.
<button type="button" class="btn btn-secondary icon-button btn-lg">
<span>Let's go</span>
<span class="icon"><i class="bi-arrow-right-circle"></i></span>
</button><button type="button" class="btn btn-secondary icon-button btn-sm">
<span>Let's go</span>
<span class="icon"><i class="bi-arrow-right-circle"></i></span>
</button>Icon buttons are also compatible with spinners. Simply change your Bootstrap icon to a spinner-border and watch it spin! This is great if the button triggered an action that may take some time.
<button type="button" class="btn btn-secondary icon-button">
<span>Let's go</span>
<span class="icon"><i class="spinner-border"></i></span>
</button>Try it out by clicking this button: