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. They should look uniform whether the base font size is 48px or if the font is a crummy cursive variant.

Getting Started

Sass

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

CDN

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

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">
  <button class="btn btn-primary">Button</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>

  <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>

  <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>

Visual Testing Examples




One caveat with this is if you want to nest a tag (like a strong tag) you will need to wrap the whole inner button content excluding the svg icon in a span because of the flex gap.

© Nathan Blaylock