chore: remove icon-toggle (#4415)

demos/theme/_theme-shared.scss

@@ -336,7 +336,7 @@ figure {
 }
 
 //
-// Icon Toggle demo
+// Icon Button demo
 //
 
 .mdc-icon-button {
@@ -345,12 +345,12 @@ figure {
   display: inline-flex;
 }
 
-.demo-icon-toggle-row {
+.demo-icon-button-row {
   display: flex;
   flex-wrap: wrap;
 }
 
-.demo-icon-toggle-tile {
+.demo-icon-button-tile {
   width: 200px;
   margin: 0 10px 10px 0;
   padding: 20px;

demos/theme/index.html

@@ -463,14 +463,14 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
       </section>
 
       <section class="demo-component-section">
-        <i id="icon-toggle" class="demo-anchor-with-toolbar-offset"></i>
+        <i id="icon-button--toggle" class="demo-anchor-with-toolbar-offset"></i>
         <h3 class="mdc-typography--headline5 demo-component-section__heading">
-          Icon Toggle
-          <a href="#icon-toggle" class="demo-component-section__permalink" title="Permalink to the theme demo for the icon toggle component">#</a>
+          Icon Button
+          <a href="#icon-button--toggle" class="demo-component-section__permalink" title="Permalink to the theme demo for the icon button component">#</a>
         </h3>
 
-        <div class="demo-icon-toggle-row">
-          <div class="mdc-elevation--z2 demo-icon-toggle-tile">
+        <div class="demo-icon-button-row">
+          <div class="mdc-elevation--z2 demo-icon-button-tile">
             <h4 class="mdc-typography--subtitle1">Enabled</h4>
 
             <button class="mdc-icon-button"
@@ -480,7 +480,7 @@ <h4 class="mdc-typography--subtitle1">Enabled</h4>
               <i class="material-icons mdc-icon-button__icon">favorite_border</i></button>
           </div>
 
-          <div class="mdc-elevation--z2 demo-icon-toggle-tile">
+          <div class="mdc-elevation--z2 demo-icon-button-tile">
             <h4 class="mdc-typography--subtitle1">Disabled</h4>
 
             <button class="mdc-icon-button"
@@ -869,10 +869,6 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
           mdc.ripple.MDCRipple.attachTo(iconButtonEl);
         });
 
-        /*
-         * Icon Toggle
-         */
-
         [].forEach.call(document.querySelectorAll('.mdc-icon-button[data-demo-toggle]'), function(iconButtonToggleEl) {
           mdc.iconButton.MDCIconButtonToggle.attachTo(iconButtonToggleEl);
         });

package.json

@@ -173,7 +173,6 @@
           "form-field",
           "grid-list",
           "icon-button",
-          "icon-toggle",
           "image-list",
           "layout-grid",
           "line-ripple",

packages/material-components-web/material-components-web.scss

@@ -32,7 +32,6 @@
 @import "@material/form-field/mdc-form-field";
 @import "@material/grid-list/mdc-grid-list";
 @import "@material/icon-button/mdc-icon-button";
-@import "@material/icon-toggle/mdc-icon-toggle";
 @import "@material/image-list/mdc-image-list";
 @import "@material/layout-grid/mdc-layout-grid";
 @import "@material/line-ripple/mdc-line-ripple";

packages/material-components-web/package.json

@@ -30,7 +30,6 @@
     "@material/form-field": "^0.44.0",
     "@material/grid-list": "^0.44.0",
     "@material/icon-button": "^0.44.0",
-    "@material/icon-toggle": "^0.44.0",
     "@material/image-list": "^0.44.0",
     "@material/layout-grid": "^0.41.0",
     "@material/line-ripple": "^0.43.0",

packages/mdc-card/_mixins.scss

@@ -251,7 +251,7 @@
 
   .mdc-card__action--icon {
     @include mdc-feature-targets($feat-structure) {
-      // Icon toggles are taller than buttons, so we need to adjust their margins to prevent the action row from expanding.
+      // Icon buttons are taller than buttons, so we need to adjust their margins to prevent the action row from expanding.
       margin: -6px 0;
 
       // Same padding as mdc-icon-button.