Material Design Lite Icons - Material Design Lite

What are Material Design Lite Icons?

The MDL icons provides different CSS classes to apply various predefined visual and behavioral enhancements showcase various types of checkboxes as icons. Following table explains about the available classes and their effects.
S.N.
Class Name & Description
1
mdl-icon-toggle
Identifies label as an MDL component and is required on label element.
2
mdl-js-icon-toggle
Supports basic MDL behavior to label and is required on label element.
3
mdl-icon-toggle__input
Supports basic MDL behavior to icon-toggle and is required on input element (icon-toggle).
4
mdl-icon-toggle__label
Supports basic MDL behavior to caption and is required on on i element (icon).
5
mdl-js-ripple-effect
Supports ripple click effect and is optional; goes on label element, not input element (icon-toggle).

Example

Below mentioned example discusses about the use of mdl-icon-toggle classes to explain different types of checkboxes as icons.
mdl_icons.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics