examples/fab.html

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  <script type="module" src="https://unpkg.com/@material/mwc-icon?module"></script>
  <script type="module" src="../lib/wired-fab.js"></script>

  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: sans-serif;
      line-height: 1.5;
    }

    wired-fab {
      margin: 0 10px;
    }

    .big {
      --wired-icon-size: 40px;
      padding: 16px;
    }

    .red {
      color: red;
    }

    .pinkbg {
      color: red;
      --wired-fab-bg-color: pink;
    }
  </style>
</head>

<body>
  <wired-fab>
    <mwc-icon>favorite</mwc-icon>
  </wired-fab>
  <wired-fab class="red">
    <mwc-icon>favorite</mwc-icon>
  </wired-fab>
  <wired-fab class="pinkbg">
    <mwc-icon>favorite</mwc-icon>
  </wired-fab>
  <wired-fab class="big">
    <mwc-icon>favorite</mwc-icon>
  </wired-fab>
  <wired-fab disabled>
    <mwc-icon>favorite</mwc-icon>
  </wired-fab>
</body>

</html>