Icon Buttons

Icon Buttons must all be the same height of other buttons without an icon. Icon only buttons should be a 1:1 ratio, and the icon inside should be designed at a 1:1 ratio just like Material Design Icons.

Getting Started

Sass

@import "node_modules/@ngblaylock/bootstrap-extensions/src/scss/_icon-buttons.scss";

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ngblaylock/bootstrap-extensions@0.1.1/dist/css/icon-buttons.min.css"
/>

Usage

This uses Material Design Icons, which work great for most projects. Notice how the buttons are all the same size, and the icons don't change the height. For the icon only button, just use the class .btn-icon and the icon within the regular button it will be .btn-inner-icon. This makes it so it doesn't matter if you have the icon before or after the text.

<div class="hstack gap-1">
  <!-- Default Button -->
  <button class="btn btn-primary">Button</button>
  
  <!-- Icon Only Button -->
  <button class="btn btn-primary btn-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>check</title>
      <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
    </svg>
  </button>
  
  <!-- Left Icon Button -->
  <button class="btn btn-primary btn-inner-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>check-circle</title>
      <path
      d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
      />
    </svg>
    Check
  </button>
  
  <!-- Right Icon Button -->
  <button class="btn btn-primary btn-inner-icon">
    Check
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>check-circle</title>
      <path
        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
      />
    </svg>
  </button>
</div>