Button Icon

Wrap icons in buttons to create beautiful icon buttons.

Icon in the Left

To create an icon button with an icon in the left, add the class .btn-ico-left to a button element, then wrap an icon inside.

<button class="btn btn-primary btn-ico-left btn-small">
  Search <i class="ico ico-search"></i>
</button>
<button class="btn btn-primary btn-ico-left">
  Search <i class="ico ico-search"></i>
</button>
<button class="btn btn-primary btn-ico-left btn-large">
  Search <i class="ico ico-search"></i>
</button>

Icon in the Right

To create an icon button with an icon in the right, add the .btn-ico-right class to a button element, then wrap an icon inside.

Check

<div class="btn-check btn-hollow-primary btn-ico-right btn-small">
  <input type="checkbox" id="example1-1" name="example1" value="1">
  <label for="example1-1">Check <i class="ico material-icons">check</i></label>
</div>
<div class="btn-check btn-hollow-primary btn-ico-right">
  <input type="checkbox" id="example1-2" name="example1" value="2">
  <label for="example1-2">Check <i class="ico material-icons">check</i></label>
</div>
<div class="btn-check btn-hollow-primary btn-ico-right btn-large">
  <input type="checkbox" id="example1-3" name="example1" value="3">
  <label for="example1-3">Check <i class="ico material-icons">check</i></label>
</div>

Icon in the Top

To create an icon button with an icon in the top, add the .btn-ico-top class to a button element, then wrap an icon inside.

<button class="btn btn-primary btn-ico-top btn-small">
  Delete <i class="ico ico-cross"></i>
</button>
<button class="btn btn-primary btn-ico-top">
  Delete <i class="ico ico-cross"></i>
</button>
<button class="btn btn-primary btn-ico-top btn-large">
  Delete <i class="ico ico-cross"></i>
</button>

Icon Only

If you just want an icon button without any texts, you can add the class .btn-ico to a button element, then wrap only an icon inside.

<div class="btn-file btn-primary btn-ico btn-small">
  <input type="file" id="example2" name="example2">
  <label for="example2"><i class="ico material-icons">cloud_upload</i></label>
</div>
<div class="btn-file btn-primary btn-ico">
  <input type="file" id="example3" name="example3">
  <label for="example3"><i class="ico material-icons">cloud_upload</i></label>
</div>
<div class="btn-file btn-primary btn-ico btn-large">
  <input type="file" id="example4" name="example4">
  <label for="example4"><i class="ico material-icons">cloud_upload</i></label>
</div>

Sass Variables

$button-icon-size-em: null !default

$button-icon-top-size-em: null !default

$button-icon-left-margin-em: 0 0.5em 0 0 !default

$button-icon-right-margin-em: 0 0 0 0.5em !default

$button-icon-top-margin-em: 0.1em 0 !default

$button-icon-top-height-rem: baseline(4) !default

$button-icon-top-large-height-rem: baseline(5) !default

$button-icon-top-small-height-rem: baseline(3) !default