<div class="container py-5">
   <!-- H1 heading purpose only -->
   <h1 class="text-center font-weight-light text-dark mb-5 pb-3 display-4">Bootstrap 4 <em class="px-2 bg-warning">Hover</em> Button Icon</h1>
   <!-- Rounded Button | Font Awesome -->   
   <h1 class="font-weight-light">Font Awesome</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="fa fa-chevron-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="fa fa-chevron-left fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="fa fa-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="fa fa-arrow-left fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="fa fa-heart"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="fa fa-heart fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="fa fa-long-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="fa fa-long-arrow-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="fa fa-arrow-circle-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="fa fa-arrow-circle-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
            <i class="fa fa-pencil"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="fa fa-pencil fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Flatted Button | Open Iconic -->
   <h1 class="font-weight-light">Open Iconic</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-flat">
            <i class="oi oi-bolt"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="oi oi-bolt fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-flat">
            <i class="oi oi-droplet"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="oi oi-droplet fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-flat">
            <i class="oi oi-key"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="oi oi-key fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-flat">
            <i class="oi oi-check"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="oi oi-check fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-flat">
            <i class="oi oi-arrow-circle-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="oi oi-arrow-circle-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-flat">
            <i class="oi oi-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="oi oi-arrow-left fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Standard Button | Material Design Icons -->
   <h1 class="font-weight-light">Material Design Icons</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed">
            <i class="mdi mdi-codepen"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="mdi mdi-codepen fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed">
            <i class="mdi mdi-silverware"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="mdi mdi-silverware fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed">
            <i class="mdi mdi-coffee"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="mdi mdi-coffee fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed">
            <i class="mdi mdi-plus-outline"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="mdi mdi-plus-outline fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed">
            <i class="mdi mdi-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="mdi mdi-arrow-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed">
            <i class="mdi mdi-skull"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="mdi mdi-skull fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Rounded Button | Ionicons -->
   <h1 class="font-weight-light">Ionicons</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-checkmark"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="icon ion-md-checkmark fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-send"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="icon ion-md-send fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="icon ion-logo-codepen"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="icon ion-logo-codepen fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-pizza"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="icon ion-md-pizza fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-exit"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="icon ion-md-exit fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-contract"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="icon ion-md-contract fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Rounded Button | Typicons -->
   <h1 class="font-weight-light">Typicons</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="typcn typcn-arrow-left fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-thumbs-up"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="typcn typcn-thumbs-up fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-message-typing"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="typcn typcn-message-typing fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-pin"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="typcn typcn-pin fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-warning"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="typcn typcn-warning fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-infinity-outline"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="typcn typcn-infinity-outline fa-2x"></i>
         </div>
      </div>   
   </div>
   
</div>

/** Body CSS sample **/
body {   
   background:rgb(255, 247, 233);
}
/** Flatted button %placeholder **/
%btn-flat {
   border-radius: 0rem;
   /* margin-right: 2rem; Icon sample spacing */
}
/** Rounded button **/
.btn-rounded {
   border-radius: 5rem;
   /* margin-right: 2rem;  Icon sample spacing */
}
/** Button Iconed **/
.btn {
 &-iconed {
   transition: .15s ease-in-out;
   padding-left: 1.3rem;
   padding-right: 1.5rem;
   /** Icons Classes **/
   /** -- Open Iconic, Font Awesome -- **/
   [class~=oi], [class~=fa],
   /** -- Since Material, Iconic and Typicons use ::before -- **/
      [class~=typcn]::before,
      [class~=mdi]::before, 
      [class~=icon]::before {
         opacity: 0;
         transform-origin: left right;
         transform: translateX(-10px) scale(1.25);
         transition: .15s ease-out;
  }
  /** Span Class **/
  [class=spn] {
      position: relative;
      left:-9px;
      transform-origin: left right;
      transform: translateX(-9px);
      transition: .20s ease-in-out;
  }
   /** -- Icons on Hover properties -- **/
  &:hover {
   [class~=oi], [class~=fa],
   /** -- Since Material, Iconic and Typicons use ::before -- **/
   [class~=mdi]::before, [class~=icon]::before, [class~="typcn"]::before {
       opacity: 1;
       transform: translateX(0px) scale(.75);
   }
   /** -- Span on Hover properties -- **/
   [class=spn] {
       // transform: translateX(0);
       left:0px;
   }
   // padding-left: 2rem;
  }
  /** Flatted button **/
  &.btn-flat {
     @extend %btn-flat;
  }
 }
}
/** style.scss -- source **/