MDL : Icon Toggle
How to use MDL - Material Design Lite to create Icon Toggle
Material Design Lite (MDL) : Icon Toggle
Material Design Lite(MDL) component icon is used to create an Icon checkbox which is an enhanced version of HTML checkbox.
The MDL Icon Toggle has an user defined icon which can be highlighted when selected, like a checkbox it has only two states(binary), on and off.
Radio Buttons generally appears in a groups and selections can also be made on individual basis, MDL Radio buttons have the typical click effects.
Similar to Checkboxes and Radio Buttons, Icon Toggles too are used in groups, and can be selected and unselected individually as well.
Advantage of using Icon Toggles over a regular Checkbox is replacement of long text label options with visual icons(symbols), this allows more options within limited screen space and thus improves user exprience significantly.
Material Design Lite(MDL) : Icon Toggle
A MDL Icon Toggle can be created using mdl-icon-toggle to create a container to hold icon toggle related content.
To Create a icon toggle use input element with attribute type="checkbox", the attribute check is used to select values by Default.
Example: Material Design Lite (MDL) : Icon ToggleGive it a TRY! » Note:The value of the id attribute must be same as for attribute
Material Design Lite : Radio Button Classes
|mdl-icon-toggle||To create a icon toggle Container|
|mdl-js-icon-toggle||To Assign MDL behaviour to icon toggle|
|mdl-icon-toggle__input||To create a icon toggle with basic MDL Features|
|mdl-icon-toggle__label||To Create a Label for Icons|
|mdl-js-ripple-effect||To apply a ripple effect when clicked|