examples/icon-button.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-icon-button.js"></script>

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

    wired-icon-button {
      margin: 0 10px;
    }

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

    .red {
      color: red;
    }

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

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

</html>