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.
@import "node_modules/@ngblaylock/bootstrap-extensions/_icon-buttons.scss";
<style
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@ngblaylock/bootstrap-extensions@1.0.0/icon-buttons.min.css"
></style>
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>
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.