paper-fab

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-fab/v2.0.0/paper-fab/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-fab.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<custom-style>
  <style is="custom-style">
    paper-fab {
      display: inline-block;
      margin: 8px;
    }
    
    paper-fab[mini] {
      --paper-fab-background: #FF5722;
    }
    
    paper-fab[label] {
      font-size: 20px;
      --paper-fab-background: #2196F3;
    }
    
    .container {
      display: flex;
      align-items: center;
    }

  </style>
</custom-style>
<div class="container">
  <paper-fab icon="favorite"></paper-fab>
  <paper-fab mini icon="reply"></paper-fab>
  <paper-fab label="😻"></paper-fab>
</div>