Search within TutorialsPark

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 Toggle

Give it a TRY! » Note:The value of the id attribute must be same as for attribute


Material Design Lite : Radio Button Classes

MDL Class Description
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