<div class="demo-preview-block"> <div class="demo-icon-toggle-block"> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-1"> <input type="checkbox" id="checkbox-1" class="mdl-icon-toggle__input"> <i class="mdl-icon-toggle__label material-icons">format_bold</i> </label> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-2"> <input type="checkbox" id="checkbox-2" class="mdl-icon-toggle__input"> <i class="mdl-icon-toggle__label material-icons">format_italic</i> </label> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-3"> <input type="checkbox" id="checkbox-3" class="mdl-icon-toggle__input"> <i class="mdl-icon-toggle__label material-icons">format_underline</i> </label> </div> <h5>Disabled</h5> <div class="demo-icon-toggle-block"> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-1"> <input type="checkbox" id="disabled-checkbox-1" class="mdl-icon-toggle__input" disabled> <i class="mdl-icon-toggle__label material-icons">format_bold</i> </label> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-2"> <input type="checkbox" id="disabled-checkbox-2" class="mdl-icon-toggle__input" disabled> <i class="mdl-icon-toggle__label material-icons">format_italic</i> </label> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-3"> <input type="checkbox" id="disabled-checkbox-3" class="mdl-icon-toggle__input" disabled> <i class="mdl-icon-toggle__label material-icons">format_underline</i> </label> </div> </div> <h5>Data binding</h5> <div class="demo-icon-toggle-block"> <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="public-checkbox-1"> <input type="checkbox" id="public-checkbox-1" class="mdl-icon-toggle__input"> <span class="mdl-icon-toggle__label material-icons">android</span> </label> <p>"android" toggles automatically every 500ms</p> </div>