English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Icons
  • 时间：2024-12-22

Material Design Lite - Icons

Previous Page Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of checkboxes as icons. The following tables psts down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-icon-toggle

Identifies label as an MDL component and is required on label element.
2

mdl-js-icon-toggle

Sets basic MDL behavior to label and is required on label element.
3

mdl-icon-toggle__input

Sets basic MDL behavior to icon-toggle and is required on input element (icon-toggle).
4

mdl-icon-toggle__label

Sets basic MDL behavior to caption and is required on on i element (icon).
5

mdl-js-ripple-effect

Sets ripple cpck effect and is optional; goes on the label element and not on the input element (icon-toggle).

Example

The following example showcases the use of mdl-icon-toggle classes to show different types of checkboxes as icons.

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_itapc</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underpne</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Result

Verify the result.