Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.
Last week, we covered some cool icon sets, which offer you thousands of icons. Following the same topic, this week we will introduce some toggling icons, which are indispensable for functions with several states (Example: play/pause button).
Transburger-icon by kcmr
Transburger-icon can spice up your whole app with its design. By default, the component shows up as a hamburger icon, which upon clicking will transform to a close icon, or left and right arrows. Users may control the toggling via keyboard.
The thing that makes this component special, is its smooth as butter animation, shaping the full transformation of the icons. Plus, transburger-icon has plenty of customization options that users can alter. They include font size, padding, outline, shadow, background, and many more. Check out the demo below for more details on how to use it.
Toggle-icon by fxedel
Toggle-icon provides users with plenty of ways to animate the transition, from filling the icon to more complicated ones, like rotating and flipping. Additionally, the component implements iron-icon at its core, meaning that you can use any icon in that set for a button. Remember to import the corresponding symbol library.
You can configure the before and after colors of the figure. In short, by giving users room for choosing the icon, the animation, and the color, the possibilities become endless with this component. For more detailed usage, check out the demo below.
Compatibility table
The table below will shortly summarize the component’s info and compatibility on multiple platforms. Browsers include Chrome Canary, Safari Tech Preview, Opera, Firefox Nightly, Edge and Internet Explorer 11.
| Component |
Library |
Mobile |
Browsers |
| transburger-icon |
Polymer^2.0.0 |
✔ |
C,S,O,F,E,I |
| toggle-icon |
Polymer^2.1.0 |
✔ |
C,S,O,F,E,I |
Click here for more awesome web components