Material Design Lite – Icon Toggle : Material Design Lite(MDL) provides toggle icon component for the icons. Material design lite embeds the toggle icon functionality with the basic html element checkbox. Here in this tutorial we are going to explain how you can create Material Design Lite Icon Toggle. You can use online editor to edit and run the code online.
Material Design Lite – Icon Toggle | MDL | Example
Let us create simple icon toggle in material design Lite(MDL).
Syntax
Syntax for icon toggle is as below –
Material Design Lite – Toggle Icon Example:
|
|
First create a label with class mdl-icon-toggle and mdl-js-icon-toggle and for (icon-toggle-id) attribute with input element checkbox’s id. Now create default checkbox with id(icon-toggle-id) and class mdl-icon-toggle__input now create icon with class mdl-icon-toggle__label material-icons.
Example
If you run the above example it will produce output something like this –
Options
Following Options are available for the icon toggle –
- mdl-icon-toggle: This is used to define label as an MDL component.
- mdl-js-icon-toggle: This is used to Assign the basic MDL behavior to label.
- mdl-icon-toggle__input: This is used to Apply basic MDL behavior to icon-toggle.
- mdl-icon-toggle__label: This is used to Apply basic MDL behavior to caption.
- mdl-js-ripple-effect: This is used to add ripple effect.