<zero-transformicon> is a custom Polymer element, so load webcomponents-lite.js polyfill and the zero-transformicon.build.html bundle (which includes the Polymer framework) and you're good to go.
<head> ... <!-- Import webcomponents-lite.js polyfill --> <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script> <!-- Import zero-transformicon build bundle --> <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html"> </head>
Simply apply <zero-transformicon icon="..."></zero-transformicon> tags declaratively anywhere in your HTML body.
<body> <!-- Most basic usage --> <zero-transformicon icon="menu-xcross"></zero-transformicon> <!-- In red color --> <zero-transformicon icon="grid-collapse" color="red"></zero-transformicon> <!-- Default to 'open' state --> <zero-transformicon icon="plus-minus" color="#222" active></zero-transformicon> ... </body>
Big thank you to the kind folks at Grey Ghost Visuals, Bennett Feely and Sara Soueidan for creating these awesome UI pieces. This is simply their work wrapped in some Polymer magic.
Site design copied from the Transformicons website, poorly. Imitation is the sincerest form of flattery, they say.