August 15, 2016

Material Design Lite – Icon Toggle

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:

<label class="mdl-icon-toggle mdl-js-icon-toggle" for="icon-toggle-id">
  <input type="checkbox" id="icon-toggle-id" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

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

Material Design Lite – Icon Toggle Example:

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>
<body>
<label class="mdl-icon-toggle mdl-js-icon-toggle" for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</body>
</html>

Try it »

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.

Add Comment

📖 Read More

Material Design Lite Tutorial

Material Design Lite – Icon Toggle