{"_id":"@material/mwc-icon-button-toggle","_rev":"713-5b748dfc24cc09f9beb3894a991574a5","name":"@material/mwc-icon-button-toggle","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-icon":"^0.7.0","@material/mwc-icon-button":"^0.7.0","@material/mwc-ripple":"^0.7.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-3n/8t1KLX3WPCihmojpHsPr5EYqaM/ibveWUqdOaWhJ4nLeIffT2v+iPJS1YA0SJx5yxy5qwTHxYpk48AC+SRw==","shasum":"25c090ff0db62b064a6d90d91599c14ab5a124da","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.7.0.tgz","fileCount":11,"unpackedSize":36603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9sCRA9TVsSAnZWagAAYLIP/3vQu+oRVWjhF5GT8QeX\nOZynuwnwYqOk/vgit/zP9nubVlL+C6Kt32fsU5RkAtjKI4SJocoUDfIp4ThL\n2MTQRpDy06D/PTv14PNOOPrICqjNPihtXLFws+YKXOsv3gMcCKA9E6TNFzyP\nGoAmAygfUp2YIDsiYyhvpWg6hsNe3uBl3okp8z13tMbNH9Q3ja5k06Z/88q4\nKg4u/9VTjRG17747sf6qxVSrBn602x+q0nlnKc4D3Ie6dwuSBy4YRUuWLhBq\nJnQHnOY7XPYesoY1JDVrStrKghBLckOUyVrTPX8bVhumkZ2DSaJKNhw8vt2E\nLTT+PdW/wy+R1eRa4SDF2DQCKmD/PIXQw7OPZXBlC3Qd7KZKVcNmTk71O0S6\n7MdyBTblu8KBxWSGi8kA+8CabD6jsnC2BWvbRXLjy1J8HAVYjYoxbmFMaBzs\nof5IOohqReVgbcVuCxUOSg0n0l09RSYi1Vu+rCKbPyuuRhHDoUqKeBHCOXPL\n/3+fMuIyW08lmwJ/Ggfsv/6ARO1Aj5C+8AmQPvw8NDmT7plrpWt2yhC47NPv\n8XlozdCrxGaIDE1erJnG8l5Pi4lmrDbeOqF88rLUrP52HaAt8GkXNojFgwTp\nU461suFaMsUNOwGN+rlNlUcZBl6jxFhqvGFF7DyT5eaQp1lNhWWMTBVUR69w\nJ/gk\r\n=l+rO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTIsLOF/F5LyK5iX6Ar/GorhX+pyiwyQ7EE+XGOhF14AiEA59lBR4KWC8WbsNRu3XUnOR/v89HsnuewmDzA5EjIRcE="}]},"maintainers":[{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.7.0_1566941036209_0.6085613603899844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-icon-button-toggle","version":"0.7.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-icon":"^0.7.1","@material/mwc-icon-button":"^0.7.1","@material/mwc-ripple":"^0.7.1"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-BdmOHk5hkZ9ohloKPdNPmpXAlm1KCb6MhOauBZAvrktworBuU0i97qvpPtB4dtjHkj8GMp7E6M60QWCNfo6rlA==","shasum":"4fd8cc600730bbbb6b1011242f7b1711046ca9f4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.7.1.tgz","fileCount":11,"unpackedSize":36644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZeznCRA9TVsSAnZWagAAORIQAIourbRqioGOVEtYHLJe\nln7d9XI35JxMwCNzwFbivRWmOSjz6hYwHnRrw9U19+GIPUS7wSe2qJgvTbiV\nfyFuGl/l08KOUBFbG7MHGHvCX4N6QBFgZ/zM9HkBX4+kLFi9ReBPV9NlrqtK\n2qETRDEjxYiDMBvQQIGO9dzw0GcTjAP+ZHBUIMNeASl1Ivy+IohWlnAts/i/\nsFAHd/xaGAkIrzZRn6pK3wlPek9x+BKNKKOrZKeCLlgBhjy0VjDREfGYtlJH\nF6gPozHndpiO9oOw2YM7ycqxbqHB4HwLm4ngKc8+aODh0taaHWl20EOnnrid\nTtTfYl9E0A2GVjy9SzqtnmS4n7eRgbO26axwESBQdKpyoWwwzn2Jic3LQHtJ\nN98z02nv24M1tKUghU4fRkUMhok9UUn7iJVMqJV0uwxFQtiPmKfYO/86QfwI\nNaDiAlCdCPKV4sdQZIaZJp8GGRL3EUU2LiDrwktkpgU+kL3aXy+CUXXtHnHD\nw6RRbDXqo0FL201NTaPRAgxl5TtH9/Zof1bo2i4Aul+61YACQLewDBYtHpRk\nD7nFz1EMqY+4N4cYtVZLZCdsodpTtDlhMonXQt3xxzLv4pZrJiLhBqzHwpmN\n7NViBeWQ2ruUcuZ1we2/0xxLK3PNoHngWLs1HLd+ShaDy1ggRbMzKU9lx0a3\nLOs2\r\n=KV1Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZVUy8APAtWDZdRm2RNAjt1+Jdl746/NEx1XyFLfaL8AiEA/MoQDeGc5Rc5NBnDwSNg+yE+QnpoETp23vdxtlct8Y4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.7.1_1566960871244_0.711197215934398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"^3.0.0","@material/mwc-base":"^0.8.0","@material/mwc-icon":"^0.8.0","@material/mwc-icon-button":"^0.8.0","@material/mwc-ripple":"^0.8.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-moWC04mTDsfl+nwQv231lxFbMgityVodPJhYLL/48OP4hMLGlz+6y/qc6mnoKLpOjoJEYsk1RHWfFxUlkSAqaQ==","shasum":"5bad8ab1366c02a8877bc4a4d8beafd20e711701","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.8.0.tgz","fileCount":14,"unpackedSize":45158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+nCRA9TVsSAnZWagAAkJMQAIoNesoTYrAIwQaTqLdu\n8zu4UNk/XORK4IM6xEd7vILe1+sPr5+lNcIcZzWfDvBSAuRlrw+JwrT/j7+I\ngtlI23Rnl94CabVQAzv3K/SMJ24VwnpMSQxR8mwu6LwvoG2iG4opFTpRxB7z\nTQ/uiTBqBKhfUUgzOgj75iEO7fgcISrUhA8pbxj3LCvXv8nb/i+WaVoIDsad\nlVYrrBMBVch7lJM/e2GeB/OLMIfEmOyStoR61/UIBhyfPCWt/7tW8GoixcaE\n84GGn09/3+22qz5gGUL16DPJEcJ3bg6APAvhHq+JL7Fr15Ts2kmlGd0XlP1u\nWu14zVp+xZzcCWSZQQwz67hWuxNJUd0+eQ2iIxIDPnaNtXGP+D3BH6jeuZ1E\n9gSNsoR8O7xBN3/kgXLMvzr67kqgBlAIkiM2/2+JTQKFWs+ygpkTOqxfYz+T\n52P0MVmdk+AV5+6xYlcoEmfeuOGw5LkGhKISJhcveLPpGt/DRTCd8Yh67Qro\nCmBWdLmvl2xVDujsjgN8b3V3KZVIEiaHIPgG9ODtbe5f0a8858o0x+QvkJeS\nOCGlMAOGdr+ZHOK4iUxF4eJMnq8PjqGCIx6yPOlQI1dYP4ZM2IUxc5vAfudv\nJO2V8GHk31x4aj8AMFeXsg8oyZ507kQRMV7UTVLUTP9Mz7b95Kjle+cNaWm0\ny+Rl\r\n=DaxO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhZEp7KrjjRMfhkRR3qUUQH0L7kYye8IRti74rxMjZ9wIhAIl2dFKTgQgDX0LXyyiPy0zxkoZp2EGjgYEQVQw3uDX2"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.8.0_1567555495245_0.3503703991239191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"^3.0.0","@material/mwc-base":"^0.9.0","@material/mwc-icon":"^0.9.0","@material/mwc-icon-button":"^0.9.0","@material/mwc-ripple":"^0.9.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-ozdP7RBx4e9PakLrXnaf9BX8fg8RC8ibzhIh2l+atjBxKG11TuwZKt15DBNXSyo1raTJZNS8kmQGj6rOJ3KY/A==","shasum":"e43fca1916e59f371faa36fc8c7094221841dc16","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.9.0.tgz","fileCount":14,"unpackedSize":44716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeVCRA9TVsSAnZWagAAKIUP/Aubt+6RLktqTpONaZhU\n10QHoECIO25LpmAM8/QiRW+u6ct92xlkh6cfMwhI+1MZDT0NRP6aUF4RiJWc\n4yd7pbbES/NiynuZDPzTNCoGi3hI92do78agbFHc1OwBjp0aBTzAdjYYTtc0\nl+sEw6aJS5yfBEJyrKeE3STBPW54qIawNPfKFX/mW+sl5vQlLbpFPq9U23Kt\nG+M+jPQqGJKwJooMLPqiu4LzxZevjyQDnu5dscEG+t3DomVCOAmnSgHU8Ryh\nr7W0IaIlKisEqIxQOG83O1oZQ88JPTzU1ooUeGT5op3Jiu6Co8//bELlQjqC\nP5bh57QojrN6wGRltw/3M1DFTyHL+h9EWNJzl0FfEzt+djWywn5uNzrcZX3P\nDE7U+lbyt5hUVSAHzt113SF4YCkDxdxp7l2EmCQApWRPcE5hskl1Sq+OCExg\nxo7RvW+LB6mNDrd7iPXjChCnbqScwD2b/1lxDPdyFu+kF+LlAjr0es5GjI4u\n0t6jXn6oaIMRAikJp8F1Ozph/nGevpmcAMQX4ByEsy7UAVheaGN4y76YrtDz\ncLoZh9SbE6ey5QGbtSUOYaXE2fu80fbZbqBfdgHtN9CPgtuHSS8TlJH6Oi+y\naoJyCj1BFKGqG249f2xnA0SGoe1CbFo/KNO9QR0Z5HwU8RmnYd4kgQo/AttD\nmmR2\r\n=Y5Ep\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5qHsr9nrGopVAgo75iTs6ndvfQot9SVyZOBMSdR0jRAIhAIlDZor8PrJqKR5HRQC84GHAlZOqEwa4Qic6WA/b6t7e"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.9.0_1569548181040_0.8070213841029443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-icon-button-toggle","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","@material/mwc-icon":"^0.9.1","@material/mwc-icon-button":"^0.9.1","@material/mwc-ripple":"^0.9.1","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-uyaB851Q2Md9pQw46KYKHNecxGJA/c/2KvM5PxOXLRTzJammqu43BRg7kO6WiHQTbUX6tiYiCYgx4XZ6hoQDcQ==","shasum":"661d42607eb034e5f85c1723549eada7ca7ada70","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.9.1.tgz","fileCount":14,"unpackedSize":44698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4VCRA9TVsSAnZWagAAfjAP/iksgQNJhrmZIAm1Uc8I\nwSu6wEogyQkLV2DB2dHbClkZ5f7Qgu5PPidriVVCNQyHCrt5gUrVOJrNnbPO\ninJU5/5PFMJQZK0dc/cVArPWqhP6HZr6kHanw74sfeARigCv1J9SiZsh+7rR\nGea5xTbVn6CZIhUgbmQKu8mYQumSvSmTbooEyEC5TLm3JBWD+gIwpm4vhNb9\n+Klp3ZG5pSqGimS1+AcH0XTI115u9+7mmaUxqj7sN1RlOTlrs96LzIE+Bxj5\nDifilw6EV1onLCrFGlmrJy5iorNqIQNV0vh/FhQunVkle5DfUuWMCawhL5nw\nSXd5jzVXjYgYyiiG0+lScFMHGgV1+bz/AS6n3srclEevPEy+nymnTwpR9ckP\nEzur/ZlB5zjvMrSo8JncXNvSDkR7YM4AsY+vz4P8ijRlW73n46rtCvxtuojn\nAAaXs37nV7F12M8CTu4Fjsp0URwDzm/fwQmGWVvoRw8j4lx8tTb2h8Y36Xmn\nwbL4r6N7+R5sc9FOWe1RNmpNS9enVoAqPGnEvssaVUZvA7fDYZPoGhW5oZ6u\nreFCOkcUICeM8N2IsvYgHe+qdnSMjspL8BAsyxdbnS3PlWp5EDKh8DhgOj2T\np5B88G4Cz796Hjx5YKGNAC8VrG+tdUeqLlfjdkFUIae6VJHXg7qHn8VgMWr8\nJun+\r\n=HUs1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPmkNkLy1mdCzljp/iEtNc8XpO1QH32RJo44nCsyp0RAiEAk3yje9PtYWo411Guk/LgKFjEi7U4utKFfHLwHB3oV3c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.9.1_1569877524430_0.3440231849915747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-icon-button-toggle","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","@material/mwc-icon":"^0.10.0","@material/mwc-icon-button":"^0.10.0","@material/mwc-ripple":"^0.10.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-3Yb0oK+74+XinhrgED1/T5ZTiqyn8nG6oGlk9rO9KzQhXe2Nn4iUUnY6qcbjX82J91HJT8+Bs9WwH0gEC8UmFQ==","shasum":"18f2367850f51926ac9492c08972d62f02f066d3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.10.0.tgz","fileCount":14,"unpackedSize":45266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAaCRA9TVsSAnZWagAAKdQP/1HIzXwVL0r56e4g57do\nH0pAC+6BqllGWxPLfoe9JfSZqbN1NHt0n0eSHyl9wImsomAsQDM7jKdjiWYi\n8sRM9f9l2fKTb9B0GL6uxidfomqoyBPBDOAC3Lt+x4O5E/fTp4EYbr+m1y6T\n+iurByB8h8zqb1Yu+zVJSC6ghWmD3t7ftwa00KC6+dHYzIfrtgT2bOelddl9\nUEH1nydb4zIlwDvhn7CTGVBBQCr+EO5hcifpeiunyB7Xg8j+NAwrImmuGvcX\nO/9JyJjXacj1oWixWrd9h9ZwQ1HqpSVCX8ySWplqltOyI6KUvdDbswbUPgWM\nhwj66U3GDtOHk2D/bkCjv4YkrjjxwRFa6m6+2Rug8y/INHMql0TIcM1jyKDy\nBJAQQ5EyAAfNkOwPGNdBQSfulcv8PxWIFTR0oLYfbDlVLAvW3CjB2WrIy2/g\n7iCVLIAdXHtrJPXX7+pyXQM2/wBWRGTjU7sY3uwc7MIZcUtp8uG1cFXw1i2L\n0trjdL+BTt/+3rVz1i0RGCw0McpCNcAggZEYqafkXVseyssi3VNCVF/sbPEf\nb3IctfG28qVYc2+kHipVrHZY4u7I+CD43WMeN/EZZvcpzJ++W/brniYnKJmz\nC45OfyC2pcxFPqSmPLO9Tlt3Dl3elhXIKU2DgNpuDg6SqtZGcHsrBt30lNq+\njpv3\r\n=IuXl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvD3cDnUsr5LdIpMJMlZptAkdCBmGWUunmkusYNSzB+AiANaaZXNIMeDbEK4jdUC8ogYYO8qLj2vdXIJzn2qB+GbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.10.0_1570836505566_0.6497350676589135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-icon-button-toggle","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","@material/mwc-icon":"^0.11.0","@material/mwc-icon-button":"^0.11.0","@material/mwc-ripple":"^0.11.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-BemEtZdta/qI5Cv9D0n/E4tbLq4b6NshTV294wm1I8TIfEEZ2+cJuM8gxOaOqqaoCsqUw29zvbwG2Hq4xhPk7A==","shasum":"ad509c5c216638cacbfa83db4faa9584cb0f2f9c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.11.0.tgz","fileCount":11,"unpackedSize":36474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z32CRA9TVsSAnZWagAA2d0P/Aqe3w7q/dyZkUF3rZrk\nypOxiOip8s2uH3EAPhj6oP27NuCbkP259RJ95sRjeH2BuNea6SPrEFqrwx1K\ne5LE1nN2YjLqsRENMbW3WvL4IG9u5p80iL9yEG0WMZ5EyBTOWpoMkWJ47mUO\n3nfND+dY6KgLQJOJoZDY+RIwl4T8egnbhJSUtuXJLmZZnZj0SUFO/00C36eU\niLpksjZvbsjHwrCqk2TJ4UQKoVZLbhs8Mlls5VJKlR5tTBUelso+oPVZ1xhf\nfxPlyUXSokGpirkTdf+W/0BtF4R50/6lII+sPFdIpTWgRWTUn1NygdDx2bHb\nZFG5aPAg/pWISHwk6+xxaJ0WBnK7CY58ifktz0Ks7PRLIy86qjNN1WiL4tZp\n2xhMiAB8nDFbQjzzp8JGlm1OO2+Yh3pPOCmV80nK0d7AUjlDKJyF/SZsXaFY\nRN/jasQKksp5zyxBjMvgSkwxgH7mv5K6laTJ6rWmH/EDL/igO/AlRbJjY6zD\nVDeJiYLwUPBWvep1R491W/VCatgdd1xfm4fltFyFpOKtYcDTxz4OMd5zs1Z3\ngjyri9yyK62RPiE7EtlffETuTuop72mwrKam0LCKenc67/wBtHqq9u7A0UFH\nuQ9QJCKMYDonYv5eWnXk38wFcK/8AaSnSTzSC7chSsVEyNPC8jJBNxCwvpfe\nBSNS\r\n=ON6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgKavdR0xywCk3Ft3KU3aT3hO6KHmXfNd3bqJGruzWDAiBLXIMgoMGnM+xv4dLvNGnGWDRh5TViKXW1KnxVHM6hpw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.11.0_1574804982066_0.7826023562762692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-icon-button-toggle","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","@material/mwc-icon":"^0.11.1","@material/mwc-icon-button":"^0.11.1","@material/mwc-ripple":"^0.11.1","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-U/q0mDPyBELE9Nd9kauUoxIVgVWgXktBhQwxxeR0d6ZrufNhe+WycRMOg693XOMA9d9iS4D8B9KUI6Vbkx/wew==","shasum":"e3a8028453a4f7616cfe1b0a96fa79075b3912dd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.11.1.tgz","fileCount":11,"unpackedSize":36474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLICRA9TVsSAnZWagAAcY8P/jrR46Ny5VYN6EqXsuZ4\nAOZaBJ7QV55dId9XX9PhjwMNVfjluja5k//6mUHSdU0Wb76ZqaA8q5n5jb+T\nheFFXLwtpcIoLWaTy8T28LikplpM6PGPRH/kTe20qrnxQwtLJ5BrxJhJn93D\nBjqrQz0M67iewuq0a3DIrMS2ANcWSGXJuG29BmJtlva8axGqMB3/sfIgHLk0\nM1XaALusMe7NRyVAYNezDty6y4Haii5Iarpcfn/UcSh/ANha++CsmAC/YKtH\nMXLG35JR5YTYDosk+8d4m9Byrb1Bpt8bYvT7XKJ70C7cdUk2qrKkq0V+J3VN\n+S1ThDsT52OUHOQraYCKHPTtLJy2u84S4kKXm1fm8IcM1AKJM+VHRGJYSXxo\n+tuKM5GvnaFww1OJqA+nBWqpCPv/haa6vnzlLu7YT7S/gRqLPSUVVbDW5vix\nEVZ9cQLioJhZ8BpDzwizl33SmVTWVcX5uAMhO3gBsFy907mjy3ypQTw0SZ22\n/w/a4YdS4nsjPYOWu+rs33RHG5L54noC6xoq1Ev1ZMD6zd+6Dg7bs2u94Qav\nK78MGHCJ9626Ne+SgeY1PIT2I+FfWsMSeUeS5kQN1VEVOVqCOZ9tjEnq3hzM\nF+uxVXc/c6qUVaPv4MO1g0Y3rVL9LXxfIihtEC4wmj1D911JtVGmPwaMQkkd\nFuKJ\r\n=g63G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhiSofDJBLkJKhtpHX6QKRAX7ZSIjj+vGCnh6nyOtYPAiBNNJ/tpIWfg5NtZ2iPLYojSkC8PCdQ89GKdtdTCimuZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.11.1_1574814407899_0.026024042248373735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-icon-button-toggle","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","@material/mwc-icon":"^0.12.0","@material/mwc-icon-button":"^0.12.0","@material/mwc-ripple":"^0.12.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-4oiGzRcfyh/2Cr+qb31OXKl9MZv/DZbVNCOor/24wXqj9bU0AMFwFEENSGngzc7fqD4T31lUzCMGnF0dYVPqIg==","shasum":"872dd8984e6d872ede2db37632582a86f15dcd6b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.12.0.tgz","fileCount":14,"unpackedSize":45508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Wk0CRA9TVsSAnZWagAAhpEP/3ewpkMFr5EhO1NAGGBb\nmAiyhbVDBkSppZxD6qiFS5mJRexEaHlYp16pCbDwQg4s/7AXuSGjsD4d/upF\nG60X4BvZxbxdjJ/b43H6FdpAKabQo9F9fqlRakNSc524HodRDHDtXiSlq4bs\nmi34jAPMeW2aclgTjjgSoqNWLrWGfCk2RNKu78YxrbYoxfRcHBnkcmEAw0UA\nGy1qYLRofMcpxDR6DC02TVhv15lX92dorRHOWdSL4X8SpjI2rLn2iQ15aB9h\nCTpI3gDPU3SkeX/MiORyliTE6l4XK+WUA/sGCs5X9ZEhPkxu0vU1DUyWNTIW\nWlhE9+zTuidXs6i+IjXrAjIweTGyAl0SG70YrJa88GGVXeGKXlFw4Ryrt5kO\nUFyeIXGZnCPP65f+cV1V36xkAIsFyHkdAO7bdQSRnsK4RsZBCTtQIl5LPnkr\nDfLS/DpuYw2G/daKadLA+2EfQJIzFopTOto3JoKo0TQ/8+xL+xweAVrodrJI\nGDHMfj0n8d4tcth96JKEa/YChsylrM5mOaM74ayVn8IfFkbRN7bpSLdTltKF\nUGt6i2tZp/9kXlGulSrnZPZnBUVGYfWW17LYeLzmjGivj4Odu4V9SMNQvOt1\n4URP71qnF1710VvdrkRSsIRjDNQEWHO/XOQ8yA9u2rU1dGSQeOdMOPlU8zJ1\nquZm\r\n=f1PM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4vu5uPRlZx/s1+HCMv+zbW4iTf81NHt+aAtnUaO27WwIhAL0HpxJLlguZyT7Tio4UiXFVWGHRlu/FqUeMVfrXeeTE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.12.0_1576626484020_0.41075622671508394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-icon-button-toggle","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/mwc-icon":"^0.13.0","@material/mwc-icon-button":"^0.13.0","@material/mwc-ripple":"^0.13.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-Rli0ixxyiw0Vx8C/3Ne+yH0RgrFC5+yeE7P0sXy0sjk2W/UBOL4sMbvOER58qKtDLSjJ4WtK0iMHRWIfcMJ4nw==","shasum":"d36d825adfbbba3f8f050074b57b0c8b90faf1a1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.13.0.tgz","fileCount":11,"unpackedSize":36474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPc0CRA9TVsSAnZWagAAlIYQAI0ur6ncU99SJQ/Vq/Tw\nyx/Am1MYYl03eEwDiHcXEXThnIK7VcAI3PoBUcJ5lr5RqWj7xfWOPPCSYM55\nFm0H/BPhwMUhl9XYrwnO/onP3lU9Jx8HOK2BkwVq/WmMEXhByWhmIMcBW64u\nG7qAxthVn3lEecX5sDpRpHLwNuBGtfANwLiSMjT+/l0lDZUF0mlc00MsTDyq\n3lB8PQp8vjPUifqrnIR6GeWXWpu5KWOGg1dloOAUHyQWWOiJWVCoKjTqSS++\nD11LnmUq1FV+Jj/PldOFgHa+pjRanKPAcsOnt4rfrYscu8RE6BDLMjEqGlQi\nONqNXQxUhQppgnrss7HC8+ZlkXFC6gOfc7rVDAOsf193bjKbTSqNxMc7u+fC\njEWAw2UooOrhg+QUD1swIrSL09B2ObJVKLf2EcW01Qv4+KPmBdZF0Z180TQz\njta85zSLyD009xQKRjtCGaP35hy/iNoJe1U2Mi8IlMSu9tpWRRQ2dL8LoBk5\nEl5mbEJwCN9s7YybdysNEeU0GvAKxjvpFjM15lbYqj88sBvpOkQ+RfyGC3aD\nveHEV2pHod4+YW3/wDmBfGtHHFnYqav8RILWDsxSk6xwTZcJoe/I80FOTvdM\nK1PR0CO0WQ135yNWxDMUe9594d1vTCuOFY/sVIcxRGxSeVztUzftp2h700Xr\nxLBd\r\n=tEVV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDihNAJX8VlZFYvs/MWwNr7rKpyBGtF2becFFdM9goBqwIhAIkjK6Q8H3cW+9IUqy0hgkR00mRsTRm6CC6bDboP3TFp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.13.0_1580791604166_0.9553076501599513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-icon":"0.14.0-canary.f790f713.0","@material/mwc-icon-button":"0.14.0-canary.f790f713.0","@material/mwc-ripple":"0.14.0-canary.f790f713.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+lLdwgfjLzCgJSMZxZUJELOQscGtmpe/QBVj4RL7mOQUkdrgn5IK8rNby8BdLvXvsIzfHGKxhwyQm+/x27c+UQ==","shasum":"9a62c3298dc93235e2eddb970a2b165dc95e9b9c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.f790f713.0.tgz","fileCount":11,"unpackedSize":36560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrXCRA9TVsSAnZWagAAdpQP/2zAWnrZivGHJ9CH+hLc\ncyg/4kHJGQXFzSwoNdyPdGkivCq1jisHaIXigF0xMjGmLa0ZBzA+/Ar85Xbo\nBhH1/2OBc67ub408bffgAcLQtfSc6dzqBidFqIuADsEORTVT5gfjiBar1SeD\ndglLT98ld6Vc/I7GW2xNY31C4k5WGqEN6AyxSCiuXSridE0sap3dYpKSH6Tn\n8imEIuZB+WPq4QunYMLYKaZi269No/i8pZFmi4flejhE2N0clK/uRJrFPpW+\nCg/lyqnkESgOXsNP2wlSg8eFgqVjQ0tF4+hXTYkaAqgaxASWGMQQ/P3WlgKG\nYTzp7rKTJvwUDYZZNc6crSA+Mrw62UKOgp++sqRhh/bDZs3xxmkgq9iw36It\nzWuf1/FsCa2gkMJKuknGF+PNQp1ZBYLMC1Vup+V6fe5idwCxqBOqRJaMfiaV\n48t7rqTJQj5po0Jr0Nj5NjnD4/gIBvMxXi5QFMEF/swfpUMuu9mXkzLt5mqy\n+CBcy5mxBiKoVBqyeeDEVVXk4BoQ8AYbJ5ZggGtiumIpHsjWXZevgDoxj8Aa\nTup/3WOPDSDCTEyk86FNhTavdPBCFuNg5bzO+SmQX9vciFex1LAuZb6cZyR8\nkNQEaV0SpgiYLKmO5l5Q63PO3fP6c/z5CWr4mDZ5tEZI0JnnWeS8U5PfPEMk\ny8CX\r\n=BXeD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdasW6Nph1RBI7ESM0YtFHpGpi9CbG3w7b2AEXHGbk4wIhAIMVDmH+RVbw9CPmnItGKix9TW4OS/Eeh4Ken3AH7Nxv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.f790f713.0_1582856919113_0.8324639573555292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-icon":"0.14.0-canary.c759cfbc.0","@material/mwc-icon-button":"0.14.0-canary.c759cfbc.0","@material/mwc-ripple":"0.14.0-canary.c759cfbc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EYczS7zXiuiXsS9d4bNK9YCpTWSGspR5JQGWxVEY0DTNrahSRAqb5HVUYYtziNovuI1AADv3x3C8yi28ZWjyuA==","shasum":"2ff21e6fcbf44fbc434b4fce9dc1175ed8c3b925","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.c759cfbc.0.tgz","fileCount":11,"unpackedSize":36560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaq+CRA9TVsSAnZWagAA/nMP/jTygvdBwby/mt+fXR2P\naeKrI78/F0ctD7MMD35cij5ZM1j9Jigkru6IAQMlozM58U68ks9ht8B93sDV\nZQtHwIzrYzZVFLqQVKpY94jEWhZuQ0utuzzpQtBzGjBbWJI4smzSwvU2Zeof\n+oeB+6DbZTZw8vohktEPO+oAQ36hEqOdn2xXa38OcYVGM9R53CiZJxD0TNO0\nzktsv3FHV9HqVz7/7pdnECEG/YrVSgWIKA1XULGrokh03x7e0GUBMounvmvr\nPcwZvCgg7HHpg8LtUBAqeyi0qYzMbkXtvgtVpCCbDY6orSZXPYenwRPrZnfi\nSZMf6EvBul3l/uEDuC8Q/RDrsidNsPOMNpZxzqZo/6ilppN5kHeNvYDOvw5D\nbyCX76Rv0l9hKTa/iuQQoUzakebS68Ho+m2YLlffExhkW+yN85U1r3X3rCOp\nChCUezN09GlKEOeTY7n/6xCO3xMjLJpaBKdP5MyVKjI5ojICAzxF7mV4XiOJ\n7pSUkh5HerdO93SnclgdJR/BgI4b12Eb3a5Ul2nCXfuGAemN3zjK+d+eTmFU\nCukcVw7JKRGaidpKNjcHW74kgOfU6CtXn9GwWX+1BIt+1A9dG0dZGSXPEJax\nn2ShBX0gwVD+Y0gvDn1xqZNk+ZOz9sdEBYYzU9MTT4F7t7DXNUYRfImhMHn1\nqhQY\r\n=6qIw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCASR+4u7pZgzxaUZeUD38kgf23q71LZLIBMfmJtF9PFQIge2Lly41eETNCTacTcJLLJUdkkWysD0ws/VnmdcV65IQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.c759cfbc.0_1582934718534_0.05240722543578591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-icon":"0.14.0-canary.97ef53d8.0","@material/mwc-icon-button":"0.14.0-canary.97ef53d8.0","@material/mwc-ripple":"0.14.0-canary.97ef53d8.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KWFuW2IJromSvPQLDXJkaPElzF2rYr12JAraK89T7NB8eecT/OEsnwXuXsV3RkhCqrfGoEhcU+hY+acl4dX7mg==","shasum":"5fcba5d273e71306c41e25d777abb08c76629427","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.97ef53d8.0.tgz","fileCount":11,"unpackedSize":36560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3gCRA9TVsSAnZWagAAAn8P/A9UpCN+IJhCk1KH1Oug\nuQy9Ndk45mAcZ+30AKer4u2o3Od6nPKKTGerk+WivCIg7tR5/2mXh1Rsxb4d\n/c3dwSMTQ3GDyDyuCkaYTguctbq3ikty9ef7OGG5tiel24+fTjnsCGzlj+KI\niAaCu8JPNxQ5l3bwFa2Uh6wnLYeX7Kro+C+/zsu5zwv4udZGPQgEllrZ1Aq1\nSR0wJA1Asz2k3AhBs1zgn4IT6PpWB1swjoYdE7J4UuDas5GegEZ997cU6AhJ\nS2mA7X/l9Mctl6yPcJO+8tV98Uyg5m2DME1L2A7ad2IOWJih6eksROplDuYD\nySnE1kYS8b5HXzvWwST2ZvGA2xdy5UmVEl4nhesCbVTy8++gkCje8rV5c1wr\n4nhxvT3+fIGTPhsg9y/hjSwa8TkRoBYWkj/VjZ9TKYk+qjlIt14/KW1WIqAc\nrwzb9E1XkR+pzUSjQdfLJt7Vkcqr6P/8cP4Zr5xhGJvLjGe5VAys9+RR21iv\ndiB4Xi3Ydrf6tziNr1nVYNObzmxwdOKKwrpbAo4b3d7kAGO1jTMhxEe2ZjZj\nupEh7ItenOgTIsYihOizJgMXiGv/th+aDwMBmU2HgBfHgGRBBLBoH0sgJ9sX\n0g+Fka9lrS8f7Jf097dCqJFcXkncyuNmOQnmizaYv9T6YOsg3fnryMnL+mHs\nU7rt\r\n=fFAV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClrOZDGLqtJ4Vf3z9/TOzdUTRj1i2+4Ep10beqGo80NQIgHU9oYUfP1hNy3iBa6aZwbOiHSzIbzYtJbcKE11Auxy4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.97ef53d8.0_1582935519955_0.8086320117199381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-icon":"0.14.0-canary.24f5fa6e.0","@material/mwc-icon-button":"0.14.0-canary.24f5fa6e.0","@material/mwc-ripple":"0.14.0-canary.24f5fa6e.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XVrmxUGmwpooF/nVC+VZr4ZAkocg0vj0h/0Mr3AVMWDDhaiuNSygDke3eN7K17YZrmIQnG7cyyzH9jGvm6Aphg==","shasum":"f4324d90d6c8e6561d1384e7be45cfcb332efcb2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.24f5fa6e.0.tgz","fileCount":11,"unpackedSize":36560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmxCRA9TVsSAnZWagAAZP8QAKUsaATka6vIm44yK5xT\nxJjoLsYm5zYkUUFSjp3z6aHcZackQE5CboTTSB4yahGS78U12RjnzM5aL7FS\nJm3Z2C2HdLJrUxhHWfNFPmw6Zk3+6VukySuNA1RmVEas58Njk0WZCVskLo7B\nJPnkfRy1xycILAnWh4AAlblqCAFbZQH3QNL/QxCgT5WnFNFFShNS1VepdkH4\nb4dO9KsoB1wPso38K3OleV+y89tD+WCGrOxVgTlXDiqQrDVONBAmZbmDSRJH\nV3unxd5aP1COvsxnocnPxVQhYBz57nOfaRgymIjfWq+ZEofkkLEViH3psbaR\nN2uW3KtqypmJ2bnFIUVdyDZtrfpyIDOFO8dpBuPJ32G1fLO2GbmURx8FNHzr\n5yPgCg+KavX6u2fdO+i6mpeawkdgTLSnLWHMAa2dm+m3hBoymYPcl+Xrsgao\n/gujgIpBPssZ1Qh3onbapJIGG5biCFjAvfr+QKWZ5pRjKIc+Qoyr6PFh/pAS\nwhYyO/O0V9lpvGhwwlSgoxQ5iqDAXmiGN9rGJIUs7amiDrHWxMGAGDuqy2GL\nAFCopRIyVFPy1a9wWeMIWnav1Pk/7z/pG4Iw/BWPxLBW6lFAYY6dARwhqGsn\nvU+aW2RXYv1LxsUAV+cMtpfH9sJ+9ShoKbgn5Mkwas/Eck4OYxV+/eIT2mBM\nVCj+\r\n=3hXv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6gQwJIV9dn9U3YrHt/SDtz8V5q0ilBvUkMbJypHtZKAiEAk7hNqwjQaA0ohe9nA8pZYsEhfeG8bhcNs72b6pJC6mY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.24f5fa6e.0_1582938545223_0.5780628802083829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-icon":"0.14.0-canary.960e214f.0","@material/mwc-icon-button":"0.14.0-canary.960e214f.0","@material/mwc-ripple":"0.14.0-canary.960e214f.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L97mhRbBBNYIA3jRp4M9ofPAJHIjL/liwaiUT+nUKVqcehqAVjphT+Vt13pSMZ5RkezhbKS2yidBhFVRVIQKLw==","shasum":"e45332672c3224ccca7f2d3b60558ffb8eacc43b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.960e214f.0.tgz","fileCount":11,"unpackedSize":36572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXkCRA9TVsSAnZWagAACBoQAJWI5WDrbnuMX208ADob\n9m/2GUrwDwqEWc9cqc82xbWAGa+A1LFF6HPn7j9u4ewRxvaFM6kxDntS51cR\nNK9tihl4kainksrwbsOkHqXFGY7tRyxLnVOuMeDjovusIdDbUuBl+bCe88xx\nEEAZCTnqTZHyoDj7mIH9COG/2WFnMSI5DFHnZPHalPYFY8qZu5o4ZXomEIDz\n5IhHcoR8x+GWLbC0Ik/6H038BOB6OfqcDJjEhONiKUekrPzTM1542V0JznKV\nwJ2B55j4D64a9R9iAy8F3jGDU50DbqnLlQAkjzPDHf8OUG4DPMHo7pvbKA9h\nUFVRRIqX2jhlyc39377nGcYjxkVbkdc9WniYCanmDMkB2Adv8c558RNZtAsp\n09arO+DYQ1VXol35alOiAQ02k5HyUx7ci4C84M6L3U/gnCoJocH2UmII+oKz\n0S73HMZklfKW57kJrrjHXF+ftuSUME7YQCgBS1XOiQUm+v4hU7HI2o+MFjes\ngD1tIZY0W5lpYlYviAGa54FEOFhJmWX6Z63OEn3Lmv2vTaeND7KGBjire62w\nYMHPEgBgbKItyHkMfc8tI9UMuVgsq2hONB7eb0qL3hx4kYA70errsUn8zKAM\nIj8iUdQl70F7nEhyoNpUNby1SP7846M3IuhnTDD0fmdxmSP2juq6K9hgsbh0\nDRK7\r\n=TzBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/wxNE4Jj6qPqHIeXD59Xp7Lngco8oepce7X4/eWgh3wIgWmMZRvpPfMAX1a3tmWxck7kmYrlSd/wWNAPG33NOYmk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.960e214f.0_1582945763593_0.019076391127488934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-icon":"0.14.0-canary.a2f046f5.0","@material/mwc-icon-button":"0.14.0-canary.a2f046f5.0","@material/mwc-ripple":"0.14.0-canary.a2f046f5.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZJf238r7pWSkvGTlGMUaArTJmD8Pg2i3SHjCQMHceTZRK60HKJD5xEljl9u37rb8xvGDS8w7MSpovXH7UFe/eQ==","shasum":"b01125bfb194a2333ea0baa52b2c5a4e5b3b3ee5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.a2f046f5.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatfCRA9TVsSAnZWagAAGUgP/j8R0RJImfuyUAyTB2rl\nJ+W48SqvtxXVEyLbHoVdn7khIseNMmfWO7QlsiM1o0zELDCdUdJe25pUvwvD\nF1x8UmO6rbNbnrdeTldO+IpvSOSAnA38vvGSIgWcPB0nhBcRD1XEcBu+QcCs\n/NYg4E+m8Iq2Bm5fPyJu4EfbplR8fjbdJBTOOt9+3z6fRZuknTgnBHDEZkJs\nMZ0J+MzHdVrWCDwKnGkYNFsM/WzbPPhDzXy+fQHD+XCi2VHTrRnH0LgLl42i\nvLEmU73qSNix3NdUYRuz9LtlzyawzY+TAETjwm5bZTY4cx0px4kO5Xjzq01H\nUQjNgLBwrGEad9yzCaMqv6U+OwoLqtbirgUXjxEtu0Qx4kXXQqVZYCTywYe0\nRKUE3bmKCMx5/3jLQ5QtJ/dABspB9Q1TF5eM++B9d8Zgfz8gJ3aBJjWGQcaS\ntt5JdeA2nmYXsE14lVkc/2X2TEb9g+kr5Vb45JZgUTXlZM94ADnDJb/XK+k2\n2Izc8dYeX2YcVWpnC9Rl2bdsf0PLd8SIZ1C7sdtOGn0YaBcNFcP335LtmzTy\neeFSAv8S9sSSzrOQvVXwDhSY5m5oztvdzMne3Xe07bzgiVjTYVcbPVF4YGEX\n5V2hi3HGqnqoy7KdxmLsAcEuSIaR4vA5S760naHPJfLJkQZ2arwQOowWXb4t\nhi1n\r\n=gNXh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdaJYJj3oD+aSRXAytNS50W1ouSzidIwqe/q9Ox6GuYAIhALLI9dEjC70u/dO+J/1uKA9GLa128GBM0LNqdCufaRAm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.a2f046f5.0_1583197023119_0.049324864783633515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-icon":"0.14.0-canary.024f371a.0","@material/mwc-icon-button":"0.14.0-canary.024f371a.0","@material/mwc-ripple":"0.14.0-canary.024f371a.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4nn8ySkrrHu0lkFAlqiTN0q/FJ0Ezwo2Sd2IG75zgcYLIDRPZYumXToHSQWxXK8fX/BMHmzHQTkv/lyRSuSl3A==","shasum":"f85db264816996a98a12c1b18c17d53c4c0957d7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.024f371a.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLvCRA9TVsSAnZWagAA+tAP/0+wzkMaeXsP/vMoXHoZ\nGvrbIlHStiODQgrAPqGF7uy2KHGmoyJD161clhOYP/bVj5ZgHquJfjCdfRJx\nkeTCEqMvB2TQjRK+Yr1NTJFM9yxZXOgFt1epoas3zNOC3RjL81X+H7/DTc+D\n6RWJ8LZoSHFml/or+oIIxBw3czqmvx8ZPT4ifrsqGuoFxrQ0ATV04IUi1UaW\n7JEoRTBq3bNrw8b1O7nZaXuqD3P2K2UKXA6uW/F5wkZa8LWUMTm8t+f63xOW\n7jEFBNslfc+LmsEHNT01lt8yVVozGWOda1pRE61DeHVG8VazCDci4heeHgG6\nunQZM61YZ8/ieVZ42Y8LVto6hDaCfnv4iZMvv+nw/Lwa2oRuNKS7pRdxEMAf\n7nzclOiynI6GbYNKyKl3rMsBRjNu8IgTQZRS4aPyREJYOSEtcstPUaTQYz8S\ndOb2XfYKwiw8Ram83oUJTWEbI+MSyAmu80gIhSJj5aLKA6DXMKu6G3/bFxb7\n7nvnjBNiNnw/UkghDYBb/qTxbLt/VIG9v2xulEEa5LkPYeqmd5lthXEH2vVS\nWGjEMZByWEl+RMxIRPEHxjUOkJPuFCeU6/eIMTgqIO9I3psvgBgah2/eLzru\nz4/mm4T15hKza7QUSMzITRAvZmR4k0oEsHHA4eWetx1Zo3qFTghG3xkjWf4b\nr1SO\r\n=LpZI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNAp4yQpvRt6Gx8obC4iZx/K9eAbsawz+2Vpm+Vz87VwIgebEDBmNEWXy7r57OmW2qzQRCXJEwjy41qP+Gb5xPfgk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.024f371a.0_1583198959182_0.7006054401513477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-icon":"0.14.0-canary.2f164110.0","@material/mwc-icon-button":"0.14.0-canary.2f164110.0","@material/mwc-ripple":"0.14.0-canary.2f164110.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZH6lW2qMfp1Q9mq6iAkcEA2UKEmjn44HukT6WMvSNfMOnU7rZiIfn4d/2nn0/FY7p6S1vF6tHrIk1JLuXu56rw==","shasum":"1cf8f88f9ce05e7a2b61a1984965a39866d2aefb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.2f164110.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1QCRA9TVsSAnZWagAAiJ8P+waH8weZpXPCasIowmEL\nQuCj79VRhtskIODeafRLFWPFVMI71ursNpTGpalbrW2g74w2E991jsid9Zu9\ncgnJYL4lFNI8ETTrtkMf57FodMilXJJ3TOHj3ZJOehzvllnC7yA2Q7fsQOFu\nsayEDi9F1ybPtL86T851b85w2LjlAYvlv7lsamzLZ/lELDWD9BOctYJ682/P\nQDO0G2/haKmLqS4YSmSWOnR0RnkIF8VIj/syUmbPp4JsGz2pH7Sdu5QuXAeZ\nmrDY6v8GJxy885ZWEv8/HrIQSRVfZkBA1OmYDoDknupj5a6QhAAj37HImg7V\nyTW8x35hzBrG4MbNF3/obReWL1pvmbva8mvjuuqO64PTEN1c55zhH4dKwcXI\nxi1mi8CJgszZpvtyAlinVqI6KZk8PhpvVIlkFtzr3RUyqXIaDEw/7SYGvCo+\nC2hVnNKCQa73rQOkbS6M/tLctZ9AGcFXzWMjJGOp6NydMR9U8ly61h++vvHO\nhIbdh3wXTSmKaXxQY5W6TFqQEt+Os8NH1qjHF7nGHl5dQep6up5d2uto5pSD\nBsUwLj6qMUGVVQcB7UjFPmMJpRlw+AQ/QmDZ3XfxpIlTb8QLg0EP+r/X9xAK\nZ4U0VQscegSX6tjFxtB+5gTe12itGoSd10zGxNj1amhW40XJ7FkthFzW3NQ5\nvkmw\r\n=07lD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZPYucyokcYXuHBorkcXbvrnEogDBABcq/MGxe03Ia+AiEApsFTV8wDDaGxu1RWkoRwtIYo2FK33zwesTeFFhSOoNI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.2f164110.0_1583271247565_0.9156788716706132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-icon":"0.14.0-canary.edd465cd.0","@material/mwc-icon-button":"0.14.0-canary.edd465cd.0","@material/mwc-ripple":"0.14.0-canary.edd465cd.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OT/JL4sjvGYLKv8Kmb9asw0BU3sAeUPWHyT5dyPaRc2t18V/J+a+0U5n1YgTNcEd36BOwi/TE5YLcOMwZCekrg==","shasum":"4d36a11cc25cf5a6dde72c6f0a679cb478095b75","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.edd465cd.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIXCRA9TVsSAnZWagAAY1UP/2VSLsMfYkDWWIOKwoQr\ncXiqYNiAwNr5ZRESV1XWkTxbf0kh+/fuhCoS9ZkEWIkSKd+MlLf5R6shENgc\nv84ie2RZZV/WpnCgBYeScWRTV6NDsJqwtOb5qA2EHnB/maDUI0fwunHzzuD4\n/AZ5nWR1xV6T5X6bIE6534mXY2FYS77UbcufyNS08ZNDsFzqKw/dkxAnc8I6\nN/9oCZDXCKqNzmnlXARlVmoHYr3ArSNMU6wiMmfLT/JEjnqGh+Swx8cgR13b\nspGq4QcV0aGignskBJns3yf7wB6UzSS80x/Nm5c02bpPtcoVV/vM1tGy4L7D\nKxOHc3lgkJ/hk/hsvAkwCk8/HRToE1DRGKFzKiNtktq8qheoNKPsm78Vrmwb\n8BXYFI52ciEeM097+xBKpnUxv1DkX9k3gO9C+KaP7n4OZhoVHUzkeZsEpPCE\n7yxLL5xQB3uUBNMoTqjfV5A2GpJWH29z0GyqLvSTKMjDNqBSuCrZDDY6+3YM\n0oShrpa4ZCYDN1Ck+0IzllIf76xdLCVcKhE2eVFCvfKWF9poQUzFoUJCUyHx\n7k1z0064vEz5jdKrje1gUBXSnOx5GP+JKX0/T/j1IotLHkMJF2ECshIw92tt\nMZrixE0QBY2BUUMr+MEutSyK793b1U7k7jGmOi3VaoGj+TO0UBO6uYRV2AEA\nUczh\r\n=VQZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsqfKr3EbczMjKiv7tdmocSKo6qe5JK1mP/D6zueS8TAiBePXnADt8my96r1Gq0X70EAzBmc8CKDGnJdVq1ff64Aw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.edd465cd.0_1583280662663_0.02966717222465065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-icon":"0.14.0-canary.2b02d017.0","@material/mwc-icon-button":"0.14.0-canary.2b02d017.0","@material/mwc-ripple":"0.14.0-canary.2b02d017.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZzNwUs7AGs2lRrpyxil3Wq6IaixCksq4hHijbtRVmwSu/kcJYiRZXDjTdj3tBg8tvcn89Xz81n7szA/zvakQKA==","shasum":"f9e8b9a4b8420deb9196038d67c7952b3965403b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.2b02d017.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1UCRA9TVsSAnZWagAAqu4P+QAyASaotwlS2gwfXpM0\nZ6LkuUYaNmS5urEGe60G4fAwR+uyyzK3k/IXDT9y64lCGe+IQmDnfHP3xUb8\nmO/7V3OuQELocCqvTPpFPSEK0siP8gxaIJwGfbag/iCQ6puvvxhhd4TxaXRY\nOC3eYobju8xvyyrsiyurthtN6s6dchjsOkrWBKIXWthfVvMziVlfLtCpZK9Z\n+wSguoCKUCA6bpMo6u78vNTqlP2vAdQSjdMVbfvuTUOhWKsepcC2kg7G8Dia\nb/V4yu8W7zpXNGpiHEnXlq7OJpPfWFIqT6Midnxv2pYlb+ITew5S3B3YQHeA\n4SHnVjfqKXMS67AjtQR47GrF8+0M0hKo1GLGBPPfSft7kwNYkFSd+Zn+nGAS\ny6cYnCNVVcUF8K97kAROeCeMyYE3B0wWNrToDQ0a4VT/rBT/9t1DsKcMyQIM\nCKFZFKXVbIneMIBEhnrYgScdY7n1ICez4ETHT7k4+N8sVXh88BT2L0/ctBOt\n9H/MFwDk0WR9XWMwhYdpodDKFXhoDUZage8agAxizkfEcmxFjOf7HEgJMbgo\nG1fzytRrsG6gSiLPoA5o+CCDIiclkMMIqInxcId53c81ST0T1zCzvwTBJKib\nDdSaFbpmeZRZcUvgQiXIYGQI5L7NBIA8m43uqiiE8ThndFiuXMVck5ok4skV\nzLvo\r\n=AKka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgYysm/O8X1iHrFztxIibMoF8eFfsyLwok2bn6EIbg8AiEA/1tMd2nUis3L1CseWlfjOy9M4KmxX6Ko95lcBWSQ2kU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.2b02d017.0_1583353172580_0.46293024337509814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-icon":"0.14.0-canary.cbdfe453.0","@material/mwc-icon-button":"0.14.0-canary.cbdfe453.0","@material/mwc-ripple":"0.14.0-canary.cbdfe453.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YkcIyQsvBupE1Tu+4/He3CDrOeRPd7KGwrCE+X7C/ej4DntbQzwUwx2+aQJhNU39q8okK1zYmIhUphEVN5VH9w==","shasum":"30d687efadfab3032df6af9b62b91484c673cb67","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.cbdfe453.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFVCRA9TVsSAnZWagAAmb4QAIxLVBUTFWbsKHjzPoia\nf9Z1Vq4wuRyfLMj9oObhYQ2riwPhaP8nhrVrypOCs+YBj8cwA4cSoLNI8uJs\nWwq3SLT6oeNOzBURJ1cWt1zjW8dOgHzRSmNjgyp7p9N61d+oPV0w7xrqqrhC\nbLbRw2hImDYDC+NizcTFplMUgn9QWl/OSCrMwsNNOF3MGvlkk0f709qh9gKf\n+vs4gFhkPpZ5Xmxc/qGZChhwE4+s6NiO+YE7P42f5wOHIOV4sX71wvjV6NN4\nvQ6DOhS1ugatBm8wn307Qf/DxIOw+aUjAiLcl1SFQu8ShlrefXgLYaturlsG\n+41SsO2iKgHkxAh7jHwAwANXJ1r8eQDpFR9KNMD4fyI6i/BgYGVq35LskCiL\n7cmY3JUvjAzQtj1YfucCC6INn1NS755HqJd/liraoLwMM3XumG8n/BwurfRW\nbNmZIE5ihN6hQFxb45XK0bxozmLQHS1scptDwsh20NVxk3ZA7xtgTbsIdlc+\nHwlojrpfm9tk1eRbxyF9bJJjm4R554YGvd0CF0mtIH8CbyKP7UTYPV9EYHh3\nnuaTeXlyFsAWAoYZB+lt3yrkMqe6aQT9B5T7ZTcO1LaiPW21vvuJvhQJCPrx\nI3AMEvYfRplnycQiLrvY3kHDQYaqViSxe1ZqY+rt/YdrDsPINFLcGl5UjgFs\nFuvm\r\n=21uc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfPB23J4WZe+Ftml29Dl3UTgRww7CqMRScVQmKyhgCMAiEAsDVmkifXncU0b8Fd56y/xSXAMBLkKKyk7Ks8ubyHmRc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.cbdfe453.0_1583358293301_0.7071435248529738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-icon":"0.14.0-canary.02aa8a98.0","@material/mwc-icon-button":"0.14.0-canary.02aa8a98.0","@material/mwc-ripple":"0.14.0-canary.02aa8a98.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-O1+1M9Q1snxlFloNYV4SJnNZg7e2fWCM85U6TVH9+VFbgykXk6yIrgFWGd8R33YsrTLOGK5wJYpYtOT4GPruzQ==","shasum":"ca284995512dc80368cc67fa36c44e388dffb2a8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.02aa8a98.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtR6CRA9TVsSAnZWagAAZsIP/i/QzkBYf0OmOVgHZ8ts\nfupxzJNJipa9Gym7B4WUIQwxq8fl5TyKYBWnhOYg2QWXjd5+A7i8IPSbdO45\n3oMjPTudBnNU6ststpPCWMOOTh+M1jk5P2r04rrTS1+WdNXSg7gvzOGCPS3V\nV93fUpljfLnZl9NZgRMq4YvCNRMpbNgz115N9308XzWZub4oPtTXdtRE8QP/\nEPTEeJlW1VCDy0yxT3/mHvHCwW9OEaH86ox4o3vN79tZ3zT9rx61iBMsmF3A\nd8OW3JJ2NTryN02WYzjqjj/uJOYCUw52oxWIKDEeKK5M90XzBLTXVR6B/W9m\ndem7Zg+kygqqAfwkIxKq4olNuin/frqEtNcMD/0L17qJIlnSTeBK3E/yMtcQ\nr3C8/MBSLTUdEU/JTGYbvhmHZRud86eve0zTcAIVdNiapNhDc9eW+PTWUDvG\nDS9SI064dpzvgxjcf6LnwIEuhOPNHY+lfuwcNgtN+noB6UE97PjCBsSzMfOP\npj5kOaQNcIhK34cM5bhPvUDFBqsRbk8iAVgtScvKLk0ph6kwx1nCYATf2M8M\njVaoG9J96nIi1EBOudOTgl7t8KPSN0VjfVG7AQgFxNPPMCGL1ZH+Xi5Af0S8\n8eGyPai4jW1grPzwKpU63edKuByZ8qaCbvqH9vEaT/Q4RZcIA0jG9mtI3+SR\njxMD\r\n=M94r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPe8BNRTiNRjA/TTN1NEpdDUKYfdU2ttY55sQ3zPwt4AIgMo1hmuzh5HR83+Gg8uNuohQ3LA6xTAoF2KPWtQ8Wa1U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.02aa8a98.0_1583535225706_0.5017630446781973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-icon":"0.14.0-canary.7cd5aad6.0","@material/mwc-icon-button":"0.14.0-canary.7cd5aad6.0","@material/mwc-ripple":"0.14.0-canary.7cd5aad6.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/7QpmFad6POqdpZRT9wMj/yy+rOi4jSgCpFAi9npyAu2LOORStF2Ofsv0WQx6/+7N8Iwg0CLSu0TySipi0bWLQ==","shasum":"052bd166483811d0f6cf94599bf180356cd94715","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.7cd5aad6.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs9ACRA9TVsSAnZWagAAwJAP/0Ra00w0V/pVqJaAsM1U\njl3qnHUHYvqX3dN2sXVGaW8bsYpLpgUfRsSRf/Ov8cOHTOBPMX9rSL1wnrok\nk72RcxKrr/t3e9nvf5+0A4Oyzpu4ERbKmwMGiJIHCssiIHwXtixREw6rDxbC\nXV6Zg2p6+0m4oEGv6mw92meg3sg+mFivLUDIwo+bNV1kWwxVRox7nn4GSOac\nBhaeM1MyONQfN2RstoSqemy4GYcEZUU8oQKPtqPCKlchQoLR9SZ0jxm5vsFG\nE7KQGC1LdZQyEeb0bXTjFgF6E9FE5ty5BY9oddIkSREjOyEJ3iXCm/g094Sr\naclSQgLrCUh3CTspbUb0PBoOQGhG2+O1figVOXSmf6T7go670/v3tBnhWQ9R\nKrpvBDj1Wf6HB8Tkcjj2wdihmc3GHJNv9IJtjn3hkFI3R1e01Ue7GuWtIROB\nYp9jrC8zbWHhIibTMf7xXA/vwBaS1EdcUxAZDUoAqAsDjlYeLOfUg7h92ObP\nhHTA0wv9BmpRsOoKb87KVAnf75Njvk1Gwk5mFwp813VKPoO9s3l84DDjlqqy\nT7FECMddXRsA4LogWgLfXp6ug4aHeu30kQVHjqUrb7ZjprlUXCU1FRLHdqNk\nqHhLdJcBSJnWjUf3SlJYNSmneZuYhqlo6yO//0CIcuwOoQKck5moI+hVrd2m\n8Mfl\r\n=Uf5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPAIPEdw1Zi2lcHKKoS1ik5jwWAcxlWJ7HIq5mZQ6LGAiEArPgHCl+/tNagMCDSa7k+OY2CBsGnCdhBK885yZzLflw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.7cd5aad6.0_1583796031983_0.23212552715712875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-icon":"0.14.0-canary.3a79dfa6.0","@material/mwc-icon-button":"0.14.0-canary.3a79dfa6.0","@material/mwc-ripple":"0.14.0-canary.3a79dfa6.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PVqY5KU/WTjEZYui1M3PDHT9EI3RbSUJbRfpFjnfkdPKq7a/aw8FGjc070fGPhCOxMpm3LXgRjc2YAW487EmZg==","shasum":"f2c4f50fa9a7b1e318e9cf40046eb49b72e437b4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.3a79dfa6.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHlCRA9TVsSAnZWagAAIYsP/2DF4Qx8FnoK80h4ew4Q\nka2ZxKQqhZtI7bd0+fAcrPnlGDYqWOATD6Wic/zaIA3nI09fY0DSJ4UD+uwD\n+o4pk2CjwHEFtjvuzTfyDLB8zMwolz/vUesIBwCsJX5xTJLLwJCNPgipkn1a\nDS5Q5mgGVKi+CGOM8Xer8vYYp7KTYrLE7n39fjZSTJImfnqZ+VwMW8ilgHN9\nIRKaLs8N2pTB9wfAbBY5fZ2dS0t3Lbk4neYZoLfGZck5eGTMv6edyS0eV3mB\ngXiPSiHwoVqc9kVV6dzZaYAudUvc2bqOFoTQW8Fcz8l5zX1mZZC4KxgCWsb/\nwP4mUvBKecNNGt3V8qqaXRIH3tjV7a23Xre+J/7kEF1EyBKXDl6QdfATxmWK\nknAzHIHNd6wjHalkqzCdIJ60So9oWpivED3pm9dW0u7Tt1ZJupIgWP9GoQQQ\n/yw+/71jRxaAocmPLbCTzCArtSqkHK7O3uJXsSRoa3n9/BabT9KwYmUlFe9y\nf1sDTJl2EnkyEU0/3Iz1/f2O2VDIbBso6WOsXLC7pAZxre60yQ5zl/JJ/Ayn\nr41N2JcYe81lerR7y3BpcuILvrzaRQes8f4A/xO+efBQFWfAgNt88LazCEaq\n4jtyv9WeUsZ1UIHoqpqgSHku9/8bkCOCINEw4FFUsFab2jg2A+S/1fBBBT3Q\ngO5y\r\n=Bz7L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICU8Qf0weyFbtNzBhpN9DC2rVwLhlRrBzLErpTCgMPOTAiBQT2R4v44+23F0crOCfNgLN2jayVzMGA9FmPjZ10omcA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.3a79dfa6.0_1583808997515_0.26642930232996154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-icon":"0.14.0-canary.22e0f5c9.0","@material/mwc-icon-button":"0.14.0-canary.22e0f5c9.0","@material/mwc-ripple":"0.14.0-canary.22e0f5c9.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-K3mg6cgZMpOB2d3OdaX7BhOt1vzS3ZPu0eYzbxvXLgNjIj8Xz8E6LiPl9jh7XG+o3TtxKMEZhr/VQDfK99PEEw==","shasum":"4cf53456756974d8dd9d032c360488726663768f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.22e0f5c9.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLVCRA9TVsSAnZWagAAyZwP/j3d8aO05qEMUiq5jIM2\ngw1owauI5Mk5JQw/n4TUEf8ffznAgNzh83FkUeC404UJUylblDgBQV1ATsLB\n5CQ5wTACV0l0auka1C/fTHxAv87mvGeaAyX//d9bqAAKPymusBN4OGlzHcN+\nZ7HiaUke65+rc0rBDnceDHjgFb28WiSxJA2XfgPUuNkFilN+NaBuKMJB36FH\nfhDk7SgInFRCwpMV9cMzEn4nPn6qPcUB+GRUsnUBaCQ0v5aaD6GDDW5qmgBo\nY07AqCR0s9e8sY7FshXpj6mS81mxYRCbaF7oUWyNxIyqxk/O/Acv/zQYGVDA\nx0KCXd7RUB1jECC3ffmI0F/X2kyWwuBEqM+INf7EBbwadp5lqYTFseC8ucmV\nFvj0F6McEpLTaCMBueP8G5vVRJ+YgsqEOHBjLOAjwJL7qoOoLb/UMzOiq/vb\nu6xa0HjVKBdmsfdo1vZhS9+DA4vJX+ZPSsA8fzqlpjyfWNmKTe5fpZayDwWE\nMGLfHPtjem7V8I9JmbeXIbH0BjhYTVqc6SESQynHWhAQM+mMmclFxfMDRi0a\nmqENT4ntIjoq2d3/f7XKHFXPsve7cslpj+h8+yVJOo6Il5sQsnsRWAC9vMsk\nYVsf8ihJ+tLChC7gPZBnIElH/IbJZNqoVfRZIUOmZC7xHpUZkRLOgFFraHfA\ndig2\r\n=e68W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWfy9FuLjGlhMw3Yaq6D+oNpS0MzNQV1Awd7tFrGQgyAiAV8i5Psntq+3zVxVhgF0P6gRdlxZKsV7LRllJM6s2moQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.22e0f5c9.0_1583809236857_0.43269222282904773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-icon":"0.14.0-canary.f23a1d1b.0","@material/mwc-icon-button":"0.14.0-canary.f23a1d1b.0","@material/mwc-ripple":"0.14.0-canary.f23a1d1b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0ReySlAIK+Tv296Q6xSMsGHkBmE60w+9wf8+DKVdWsVMLn2ICLIQgQzDN6Gjk0TkJ8tiyTGlsu/tPlIfTkaK5g==","shasum":"22c2d32ab7917d74a91c35574246c1a4eb20b400","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.f23a1d1b.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8XCRA9TVsSAnZWagAA3VQQAIcwrXrU4+rMMEvlOYIM\nyywsB4oSHJib5f4T3kJ06h92vkII62KfaQIl/3m9lC2sRRq4tu37+TemVxkt\nkyyoCsaAKlNOeyJjM/chKBtqmqjRreAKbSrNiiS47w6pex7bR2cxWTcxDOs+\nobtAEjdxOaUFFnK6KAlJUPfiWPoypkInlv8/STwGh4s0EZkonSYuMtsXGI5X\nCGQGiP2ohDHI9vM/1Yd3rdi3oHh8mR7wfudi5LvjGZvfXWMvcRTeP85a+T88\n6aeuPQYKFpe1tQIbv1bkzMfPhI/clJiTm7Y88Q2udJU8MMCQdF+17SAa4rW6\nQ9ZZcYpLuk3MmopYfNtIgHzD18hpOb8lReiVHvz3wKJYWaFfZNovkudNhOa0\ndT9OdY0uZYK247tIqMf+kB8a/9SXItdAN+UAb8sP2e20yqImed91Ik2ShPno\nSt25v9sKD7/cf4v3JWuvKU2Bi6fpqigbAFKTXB2AaV1zKxRXJzAAm6oN8JPo\n+i9T7q4tzDJwnG72Zz7UUSewVJoyMVMOqOVmqcvZuaEt8AyqdguAPnNxnv3H\nyzV6aH8bcDo1HHpHarYrhlHEq3gusJ/1ZHthrGTA1bUu20PAfFHVwGfF7y/k\nGANag9lGIMvbhnbXiZhC+fuSE8bYSPzSIbAq9tJb+Ynj2pGF8xO65bcLysEd\nrVji\r\n=VJZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHU5di7+bPTc5qzMvu8pWW61rqt2KPSePhLWTCxYLv/OAiEAhtRNq0auWuIseQuXPlDvgm5J+0BqIX/nOfZUxaedoJA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.f23a1d1b.0_1583873814701_0.681431010406359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-icon":"0.14.0-canary.34b2d69a.0","@material/mwc-icon-button":"0.14.0-canary.34b2d69a.0","@material/mwc-ripple":"0.14.0-canary.34b2d69a.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-l5Qdu/cka/K2wFDGFh0ECZNAF6dFlhj0mCs2rFXe3ILJ/b8AQQi9IgPN1HgmNHnA+K8ermDQHv8rcEc8iL2mOw==","shasum":"e8d001fe05029d9edc2d0fb8997c9bf5ec67b7d3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.34b2d69a.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANcCRA9TVsSAnZWagAAGfQP/jQy3VNVStCAVs3nk2dM\ni6xb23anqJ3KTxnxwsLjeh9rjJQ0cQfDOCg/koncBi4gy5nkcDbhmBVB1Rns\nulHeHwuIzOlRggiZIre2wp0/WoOicNRdTo6I0MyxqhVSsG3StV1/sIbK6RDE\nP66VkYXqk5KpEfR0XZyL4smXaM1fFNT7mK8PLa+01hotEKh9Hw7ormQgcT0y\nuE7nfPsVtBcaIyt8G0amxEkgarOoNwS8hfTVoJWb+4njlDB/HtkL7jlROFw/\n9QAStztL5nIU10UaFm10fxZ5IxqBT8x/3uPZttTphFABBdS2+RNlMRYY7TvC\nL/vEzGbf5l9xLRJDEz71SzXyrK8V5UCg7y0YN/Z6ssH/fGmyN+JhF31UDLb9\nNx0cZZrMDIhsy5BYMFWRQTEIrMiqicUUqIjP0lISDbQEMbyWmLledkKBkH2X\nIRbB9BSjWhV4Tp4pKYaWVzF/dufK4njngSy0MkQg2jT66jtnQBGuW3OPSQqI\ntIrFJYwxxTPI9gzzDi24U2/Nfe1d59k3NZPAIZY6nAAORyUwzPE8w8Vpmmv7\nv5uOjwwkk8nmIdu9GZpICVkogiDxwnUD/n7vVLNoR0n00oameK2BWabKp8BU\nidFluoM6LbJPLOzjepsoCkxuSMcYhiYSQ6Qin68eYTOuJGOpFfs3a3mmIpeR\n9Mxc\r\n=nvs9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuxAExQhucBK2z9MMz76Xdg5uhByz0yNZ4QXNnYpwN4gIgSBrv0Qi63sinMexfjn5DAbmAljLLhklF3/AM37BWoZY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.34b2d69a.0_1583874908258_0.12061056527947289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-icon":"0.14.0-canary.dc04abe1.0","@material/mwc-icon-button":"0.14.0-canary.dc04abe1.0","@material/mwc-ripple":"0.14.0-canary.dc04abe1.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GUeCPWfMguL3YHDhE4PJMxfO2idA1401g6avRXocErKzGW20P/v2JANEkRJE7r1q4eMaJsXxz/6Pl8yV+cUILw==","shasum":"4f92a07c25ffbee82668bac641888a576f815be2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.dc04abe1.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA6BCRA9TVsSAnZWagAAaBsP/3uxAEpngzyMMGt/+MDT\n8iEn4tzRM6DiFoejXIb3sLBwZkMW4DL9wGF5XhvOgCuoehbXCFUGvF5B01Ju\nC7bwjHWmHU8kMJInwv8PrUYvf82GJjjoG8jfl+GSKUYA02JuWZe2aB1dI9ix\nmsNezjxrtXJzmbrhJ5wU6Ftb6N3w/Gm0xSZTSC4EMQ1ysgsxX6EkFRVXCh7G\nug9kghx1Sm1l4l/blNqGkxFpI+tEkChS9PXvoSf9x1WWV2qAPzPHyx8mK9t3\nPzXCVuva5A8YORzA9FY+b6fJI2RVby1qmHTACcDEKkH2QOfDeLv/slUn5xLs\nIzqmp6v6gC8v7psYmRII27XUxAA0+156wIuqpD5Pd3Fi8106uCWmUDN2lepY\nE2hZdM956ghRM4OQmsRVL9mIXkI/X0hP0wZ4jOMXR+1XkcqoaeH4X5f+Jwk5\nnp6euFF/5K8/9SQPJ/MlwAJY886zvbqOr3VJZ24juHPTzKaIKm9Qwo/xOPC4\nvoxhHLXrd4XGjgaTsqW9jQ9iHGLkATiyBK3WCl0/MBZWXLLu8bG/K5Xb/Idw\nUIrk204Hq+e2cdKzovZuGQefI5qiKEGIW6YdabHJFSj19QkkA8cPr7wQXtI1\nIYB14FSWbVCIHGD1jDnxhD34Tq4BNUrfWad6ZT9fOSYWsCF3MPeLli8wwqQ1\n/IQj\r\n=Pu6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClGXBV8zD4z0sVYx4JkbPL8KTltTJ5Z8+LPT1Wnvd6rQIgaZQ6Ej0d+MYfnpI8x14ynNe9F4xT82Z9PBndcy1dUHY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.dc04abe1.0_1583877761258_0.961316001280714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-icon":"0.14.0-canary.04ccbc88.0","@material/mwc-icon-button":"0.14.0-canary.04ccbc88.0","@material/mwc-ripple":"0.14.0-canary.04ccbc88.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SRvu7sHYD1WgGeSWi6PzCFeSplKTt22NS8OKMUGYy+KAWcS+YMGEWyE4IAhrhV5bY2J/szWFplADrGbhHWhnAg==","shasum":"06c4fffb0b213c1cce01949a1ad8392a1567ff39","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.04ccbc88.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDJCCRA9TVsSAnZWagAAhocP/1N9Bh7B/gKWM22EHTfW\nRVzxl5aFAjbl7JOyTJhvpbpJi4upavpXukVeRy5AJjlv/D1HCmbms/9NES4G\nWwsx+Teql8uZ+WKNGrJnU7KLDGkYbd0C/ExHjR0JFd2a6vpdFkjiJHjlPr8T\ngZUB8vqdBgmCk9ZF5Wfmsvf76O043NhU5Uh/bC/hKGoquunAdR5HQfilbf9A\nNPgAA5cl/pUSzpg//Jl0nNIgs1hSMcj8fNvFBB7G+mrgbVTDucalCwEHuvnq\nTnOsAKbOtFffNZJyJyaPHDPz4TdLpmYDwnL2kAOL80SNJnNxYJCQQev+cgmE\nw67zNA4B6jwozmL4DYpplF8xS2v3ed2zpqEdyX7Xp/pPD0yJlzkFLhSqRwZr\nMeNVyaZrU57N1OV9qcUkFD2m9qbacNCTxeD4deCQq3F5mpRzlYte0fgAwiuo\nWI08qhHkWn4KwEBioYeLDqNFm1K5Y+dluxER2y9f6+sYglMUvT3wIDrzXv/H\n8QglsZhJllzBwRzXc/2UX71H8n3rLiZlIkShjb9bRaiU1bvzWYj+9cP4jLyR\npgFWF70pPhUfFq/t5SfHQcK0yLJyFpsFEor2G0R03K8jz85deYuaobvBy4Xg\nUDQo1lAwJxK+bwOu7GAsfEuSexigo0/QA38AErYw8piREYpLYn+vcLVIRBMk\nVjgE\r\n=iAhP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGb9Iqsdt67fKdB3cSaKI/Tjk3BBlG1Dx14LgRP4OOKjAiA5p3zDnEfd8DdM2SJNWi/Ti+aZTa4pDsg0OZh0LcqxZg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.04ccbc88.0_1583886913610_0.9537230769957783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-icon":"0.14.0-canary.55338c25.0","@material/mwc-icon-button":"0.14.0-canary.55338c25.0","@material/mwc-ripple":"0.14.0-canary.55338c25.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8D7zWSjc4cPKl1lPb0srjo0n7n2vg4DrrMLmj5KTsHYoVjp3Vgnv5nX4XIM/fNLO26t2Uu/vbz6rUdoWMQoNbA==","shasum":"baff49d21bf2690b545fa4f1ee7f7386a560a100","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.55338c25.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXVCRA9TVsSAnZWagAAeC0P/1+xZoYP8+8Zt4b+P+Rd\n750nQNXhHWIIv6grM6L0r2Cu2akzebtzTCb7NYNHZHJLV+JRd9THbHFtkI3P\njWq7Gd6kta/TW+utmeOoU8tMWP2KhcwpHgOxTRzWJUHTmC1FQx+7/Jl4NgLj\ne1bWAuop3fSjtRcCK6p62SaG08/UXWO6RSZeciuOUTqNHTrrVcKClT+N/WG7\n829mnVDW0zHUChI5nhHjWS+yl+n4H6lSmxf+Wo5RlQNGzTD2KptQK7aOAiOv\n6DhLwZgTtMeLnyXbGhmyIEeHEVcxjDD8VTokQuMjyGLyjhVZ8HpahOjVkIWQ\nrFKkuRk4zlLMFLEzA6zNt6rvxYnLhr++dp0jG6C4ohzuOHbER0/U+vi67O+P\nUzm3GtLkVkZGesSDhq12CnidPqC2AJtZWPJnww2zCF3cbbh/9FPbpQPH0/fY\no4Hd7EHH2o3USpuP2vk2CfvelMP4E1cLjp3vbsitqQngdMNrY7wzeH6k/AG7\nQ88f+jjfsFAYCzLNuqWOlsGRHAwNK2260KmQr3Ywf9eSQe0VKPEtBtrxRZV4\nBIeQXnqlU6FnYkzMcZYHaxWRMIwONXO6uLPZgA6Fisphn82k09/ZLpmGK8hr\n6ZwkACcz7VChAPyA9s4GhExLrj+WSHVg9SomKwkzcnumCkrb7g1KAfk2deyO\nME1k\r\n=EHzX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCwN7/Uim3HfvSOQHgh/+w0xchS01BlaYOS7X1gBgvHwIhANKwr0stIEyhj4smhMMkFXQMWP8TX54lGNZc3Rs/aBbD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.55338c25.0_1583908308974_0.44972709790585585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-icon":"0.14.0-canary.b7e388f3.0","@material/mwc-icon-button":"0.14.0-canary.b7e388f3.0","@material/mwc-ripple":"0.14.0-canary.b7e388f3.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hNK00ccx3K+rGbLwo+RG07NfA3TuvEKhyOVEKBAo8s1L+WefNJrb7J5rxc6HJNQbD1cKKz+fa/jaanFzJT5wLg==","shasum":"c9d6ac00e5821d7c3c7067bd327b6aa4fac9895a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.b7e388f3.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUf1CRA9TVsSAnZWagAAoQkP/2EoCltKSc3wIU6QKG0I\ne6FmywImioRzIA/SveRWyId3+oukPMz5YPpb5jty/QdFpomtI6y1pq6frIxD\nO+pJZHO9pDO/dSR6Oa4psZmauRX+YvunhO/J3zgTSROb0UddenbxgYajxyg3\nABw1rMu2uDJKDWUX3E2PeDR/+Y+EPaZOOgtMOnz/Uoz1G4OfZB/FAIxKxt3U\nHcGp5R5y3fV6Exl1kNCx590NGFJD+etkK4SYkLMIs/77Yt88LhpgX8TZK3yX\nERjX52bPJcYmgjtXg8Hf/BEKVANmzQsLxC4z2CEjHCT5FdMxzBUoUkMcZLTe\nZUcJZ7ya/uF517LHt0Cm7oOtTUVW6umxe/bMywi6ZlufjK1eYCBZEIULG8Zb\nnwZ4i1e1PK6v5yg+u9hKN+8lg2y0fq0Z5dQfD17y1BkN+TpClClY3Tp9ZL2H\n5Slq9tnMr34MR+QwuJy8LOgsMa00GdNjV+bfXbrJf+skSCaXjoesGDUU39hU\nZMPLecFzySKP86hvK5son3WJ5Fz+kPaKOOPRtD6bVtrUj+BRNeG9otgHZ0ip\nsm53EZkcPas3t6zUsh+3FimvG4WJR7B3XkAd+rSokQMwZc2qZOI2QN0azdE7\n4kBFRHeON6ZX0HetqQ5eje+uiPfjyNvTUrCRdJ5Eq3BeMe0V2wvwLeojf6Iw\no5qh\r\n=5ZRP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHYhWwAXE8co0EMlgNAgj45Ej+aLp2CMDgKdzYzXqmJAiAsDEwASFVsQFXRKCSViGOGqYmHD+xDtiqwG45sDqJiYw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.b7e388f3.0_1583958004879_0.8199920194865995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-icon":"0.14.0-canary.b3211481.0","@material/mwc-icon-button":"0.14.0-canary.b3211481.0","@material/mwc-ripple":"0.14.0-canary.b3211481.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cCu1XbdTP7VD6yAqc21Lsbc4DDzlaU1ZTFRbz1BWDNdQBONXnU9Bvq1nfV7znHEqcoWTh6Yy5K5LVjk7ZwqDoA==","shasum":"3a2be7973ffdaa0da6335e52b2c6ef1797346069","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.b3211481.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjyCRA9TVsSAnZWagAAB/kP/2skqSkfz8/vGfE6wfyx\nVtq2nLTAe7qLBmXZJYDgy8L9wPFPusUVLWYtNGzDJXMCpAznc5aed+SNsnt8\nGqBCXpuj8O+TehBmgbcGeqnN1XN+ckDDuHYj0h5jyoK6h/35jQlIHLA38YZq\nYRfdU6VhjYsio9VXcZJYcQoDt0eV4aCwmmtSLqiP9JZyUWpbGHUvBlxEj1gk\nX1s0nZA2HdOklOwPuUgxyFm8IxA9OwEKnYo52V5GJlLdAihViPrnfp9chtbR\nbQWx/dLLeHBGT3Fh+pV6BTYNYqBqwDp3SmKOOrWjAaziyvYRkYvquPkK1G5S\nKPi1JNOBHrOlDwQlqzg+261yBgp38Lz0Cta5IT22K0WLmUOsU4r+dbRzorS6\n8qNx8H3w9THGubU3VAUZJzEzjKQ8XECfnGMjvS3WzCLHM3dQkZInfxGJxkQX\nloVXRuKkiaFb/iJExf/G8jSHzzB2KO1hztj0U/HQKUI9xv/3vgBJ959d4NxA\nFKQzUdLWrYS6AiPUKhRjEXNqkdUOduGwnFeRaiovp7HuM4XemwmUjm5EFTec\ntLaNjfY11nemB7clxENFrELRVjDY1sHd22t0n8FmI4gVARNRjvnQeR7tIY66\n5qtmFZ4lqMZ05ltX15//BTQgxn79+pGG/7n+6plxGDFfbrzWgZk8Sz1OWpG3\n6Uo2\r\n=rA10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyTKU3uNFALQYpXpko196hRMyAw0AF4+EcdU72CL1QiAiEAqFczL18spDXoI49YKa1KoNmNECqx2QucJs/7RaE6gXU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.b3211481.0_1583958258297_0.8678148056169901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-icon":"0.14.0-canary.0b5c7f23.0","@material/mwc-icon-button":"0.14.0-canary.0b5c7f23.0","@material/mwc-ripple":"0.14.0-canary.0b5c7f23.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tn26NHu0v+YbTt5vzQik/0zN4xaBtpyIEVDwpIGCCCvkd5UPhmhE9tQlDr8AAtVwMk5whPt+TdZ4xXqc0x55hQ==","shasum":"7f6492408aa2b1cad33741e9266589311bac8aa9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.0b5c7f23.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV4DCRA9TVsSAnZWagAA8N8P+wfwidod9FzLh/qbkrdL\nDP7Fn2K6f3/ERI8mBnjfz6teAzBPsRvCR1IQxOzXomWRcxLvBwqyfmzy6MyY\nDLaxGRBMFcGMAsVJbDNjNF8JjWyEnDYCpCqihwdyYhsgBN5QNdkqrye1woKV\nP75fgH4rm9357TDM0sIz5RRn7zQY04MlXmorbQb1M7DektqrpiioJKax5xov\nRIFiFxWsJxftm36zR/HtB6yCzTZR7igFQ1ROOGHXFs/OFGvUmb66rllxHTY8\nxgyFH7dU/jTbVLN9VwTEdftFctzYVG3UhyopNKbjyr+5U6pTNkBCsCLRWnQi\nudR01VC5Ldi8Y075ietPDBYF8gIgjctN7HSO+pG2w1pmK06ojgqTv3jx3Hcm\nAynEGIvY870gyxm9zjmP+9sbCJq169inCywCrQdFXW0I7HigrdZkg6sl/NYV\nUwitSWAw/RgRtHKNsdAojocmN6Ml8hTPs7ybEE8aoC8+BBli+XOSd/7sQZlv\nHVL9tHsa8+VtMWJseOivu4icJfjfIo0GK8uYeskyq3tK0r8WxlXIvd6P82ah\nl4SeG+MEK+SYYHd3ggxxjwVz+R841tLrSWeAQRwQsmsnC5icb3oFtQqWNKV8\nE7N0S7NgoHs5zMDXj2a6MZVPMdWBUQtwWuk251tagQypD57bqqn44FacIjTo\n3Zht\r\n=W40i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD25sTC9IP6hXf/8D5KIwUFoVPsTR0Y2wslvDhqX1cbJAIgDuwP1TdRHomZpvIIRhdhTcnpeNw0yAdtkPT2TIUOb8k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.0b5c7f23.0_1583963651532_0.2692449793350655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-icon":"0.14.0-canary.6c0f0b27.0","@material/mwc-icon-button":"0.14.0-canary.6c0f0b27.0","@material/mwc-ripple":"0.14.0-canary.6c0f0b27.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BhI5uv25v7tZfKXRz2Jyq5VwAo79pHjRH3hkBQAwg4h1asIDxMp4YfhrhM7ZJgUQenPglUO5IpCbUZA8NoaaPw==","shasum":"445303b096cb7b0cbc782f13f573247372665d55","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.6c0f0b27.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbrCRA9TVsSAnZWagAA+q0P/1YKJdfXI/T0MkM/FyTL\nsecAWXE3XDkl0Asap6RycGUK5kGcxY54nGsbPF+q3WQjKWf6eIINYxoecWT3\ny8Cys/KiW0pmfHBV4mxxnTb18R+/Z0Ft3ip7L7G9mCSPb0RSdbW4hGELGqMU\nNKBcndG2iu0fZJZEEc0TFy/3/XMhTU8fBQsZnyVvcS+MCQGT/dgCDV6S2GSY\nP/DtP7AuyoJEbvcqKjcl2kEMqKcAukgAuuormivo4JWwPMe2a47mJxVlHUfP\n/Berh1+FLh0EdlOXalGN7omoI4cU8r2QIbTCZ9UG1XXk5ZCESP9JDdXTZh30\nSoBstUaeL/ZtsnbbyRNutU+vMexuodXcOuHCw6vIpgasvzdCgBzxNfET6aZJ\nUEZV+JVjsn6QmwuOolQ/2AHGrpWn5phFl72kvjaSKpGBArTJuRAzW2wYTRbV\nv8f+BwN3pIBANsyobphy/D2Jh9dfQznvWyHcE1wP4IauV/qqh/713AqhmS2z\nmeSCGVEM/AAW60PgKPotEg7jCLT1+y171h2J04tpdPcd8dqPJHOmFNjwt9JE\ndL2RM3IrhCJJgPuaVUf404iHq5sbo3UzC+488HP9VKb42xDR30WY6p6LS5fq\naoPopWhcTBjoTYsMq+sfTQcXfLc/9zI6WuShLLQS/fDwdg8xsE/67XGfhjoV\n5bV8\r\n=qYQS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzxD6Aa3QaiJ15o+SGiI21MSvueKFlPliBvy7sqW0kUAiEApwz/LcLKILESO27AilqpJMsHtFVnZCIaDHE83B5900A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.6c0f0b27.0_1584047851209_0.41861940468456327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-icon":"0.14.0-canary.b6c53425.0","@material/mwc-icon-button":"0.14.0-canary.b6c53425.0","@material/mwc-ripple":"0.14.0-canary.b6c53425.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zZozx8HlxYi/qKWWJSQKUros3QBkSNYwUEbU1RCDaxGWvlmuNKFUBmihTxjbIe6ug2zNYu4/PMLzvU8gyUI6cw==","shasum":"0e90ff9febf7fb54d5113b973a6926706dd38d86","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.b6c53425.0.tgz","fileCount":11,"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sNCRA9TVsSAnZWagAAu2MQAJmSjsZvWmI0RxeXfZqo\nSB8ITFf/YS5MBaxZbkgW3U9YnSp2zEG7wQ/NWlAU0onxstAUJq1Kr04u/p/I\npOgo6K9p9N0OdEr5RKwxUqqaBNcWd9JY7vUCvCRK5hxQ3MxhV9yVlh9CkCm0\nC8WLaoelrK2cSPkzeeSZkUYU/huro8A8ULhIyXcSKYsFEwyZarmRS8QE6BqF\n5OhqVnU5kHGoIan+fwUMecUP+Ff9MH9ocrwYcUN+S9+LKtT4E9cWrpNA9tC/\nzdirdU0LyBgylBA/1Foy4AHa003BLFhgRoWNQF3/dwl/tdbQZz/zJPFvYOQ/\nV9dKWRJHaZCA/jKSk7nGaspON2NPIZCpb5YKO2u4qEbanz7uOuDUUVcXtPIo\n6hPn2WV3TP3SRqRC9nffLlrRRy9jEp/9YG7YU+Y9w0+9xQDi2pn7ykUpyfUG\ncfzSr06Et3XSmmZddar0XheTfJojJe4/S8jRiZrdk0a3LdNGvTq9T3IYw2ZV\ncScCDp9eOq4lZSpt3V1p6W9ASjXomVQC8gMgR8OYyu/rSVg7CJk7GR3He/H+\nGQPNdV6wVKgYjoPK6pt9B/zpll2fo7JY8TI7F9R8eBQ88gMO8SO8QPP0MJnf\n41wzxUGtsewHNINJ0CU9wgvPiNgMlhmlPFavRLYRDf/LU05QFJp+OOcg41Gf\n0ipE\r\n=I6PU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqbGe9+C7ddIXXsDA9nlZ54rPgKjoW/r20HN1kfJf7aAIhAK9G2qpOc/quQdbOSTCqPQp9iXfgo9pvUSkOA6i9LYs/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.b6c53425.0_1584118541476_0.6767015990555745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-icon":"0.14.0-canary.306cabed.0","@material/mwc-icon-button":"0.14.0-canary.306cabed.0","@material/mwc-ripple":"0.14.0-canary.306cabed.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-A6fvA3T8bzpNlCKBVywIBPaZk0sPoFfQs/VfzIl0q5SD7/AS9w9Xs/VbxTP2gSeudF2QzOC+v6/3E7H6WpkiHQ==","shasum":"23cee686cb25c4a5752df6b76e8f63f0425fdf3b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.306cabed.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6KCRA9TVsSAnZWagAA5tMQAJVnTyKh3KK2aozTBqjG\nBsNz47RiK/mEbuK0YY5pnorKsGXdNxHFbQ5yT4Q3A2ynQiYa/coHB+rL7or9\nptsVyt7u8z5YBEEoITG7wm0iCyf+BTAMW7viRGJjVBa6Q3mO5XCANyBl0hrb\n/5n6fI9dGYivuvbHY2enI5aJqx+WkF9MwoDgStIeTztPbGLOPSl3CqJ6C3l8\nHkEKBc63F4eC9w98LhBYkUCMAVAu3CJqgdbIr50x58a7Fc90DtS8YvLIgXb1\nPvhkRbmK+wOoeOOoy2FtxVhEdpLBNPygWDUjZeRnPq26KZsQjfC5FdPGBOf3\nFzcaf0Rz0KT2jHwXD9l7TPQEaCovQ9+KOehq6phhiPZuE/OKhLlTuUyxOfiv\nFduUJ8KqqMdvJbb/g/TFntTtSduBSDqAEt/2Hxd9Zq0l3OO9q3m7sU1ndido\nq2LYBcLOD04uNuMN9h4iPnnLgcxYpxzjL2uqwINM2P7ME7jVB2W5n/7ZW645\nN0MbGFZ7u37tg0mHB8gvPSLZnMYx0LBUKv+WosTJkPyYlHpX4VwXUpvL0pGM\nfs3TQEDI1tdRZh2zhlvBQ+iXpoptZ+ZgKnuR1Aw6MBv0ogVIaBXKPREuUgzW\nx/XiTyK7O793rlP+lqWjBiKF+DIAceF/Ip3yfjYoWhxsx19fSrnYc51oQ1yU\n1OzL\r\n=I7k6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt/iKlST+gbbdDviKRPO3Re3aphyUAsY5T27ytPKIZ1QIhAIxQbOC5zzKDwaK7FIPjJfQoH+aLkHKAJaJO5NqV+dgZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.306cabed.0_1584479881819_0.3856668452144334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-icon":"0.14.0-canary.4e250cbc.0","@material/mwc-icon-button":"0.14.0-canary.4e250cbc.0","@material/mwc-ripple":"0.14.0-canary.4e250cbc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jKvcy2mSrn8aCOjivL+yb3zqi4Mww+TQRENpTLDGxaB2AcrNH+5g6hObKtnmRDl7ZSmLDgpts6J2FJ/Q+qP+mw==","shasum":"6c980cdfe3a60db67d92d9a9a3c03f94ddb6f4eb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.4e250cbc.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/6CRA9TVsSAnZWagAA5AgP+wWy7VYmE0g+uBL7QPM3\nah746O/6/q9MeEu8f1qNuuVAFNtaY5Yu+NfCGgiep1g3DZAHhOgh1apQdN7L\nuj18ifHPcZo23F/cZtdHnssdyMa82rXnYhaaW5bq7OJqWUhL1STwtaCWpDQ0\nx0V2Lq14m8VnWqmXc/H+SqdCfd+v+syzxVGZlI0GHpzuNYEluYa+zDdOB+ze\nZDLarFaIbILyodY9G1yGo1sMHDWLD3RP+u3fgA7CqkGFJDwqZGGE23zzKBNr\nzLc4ozRpkj/R4797eLowErLHhF3x4N1oDzNT2YF6xr/iVzOJ21v4p4mR1Adg\nSyF1plHQCbgp0aLuw8dOjweUoqDWgcRwm3t3ABj/fum/eU3peS44cFoPfuS8\nW0fiSCuB/pnuvgBtM//ARM2QoyeHBAxsI66RL+mnia+lngc24TXd71OjvW84\ney4Kc1JRrU8exakenX+pNEwrhLPdssZCxdM0GhfAHaBmLXEMif3kjDo8Z7kN\nL/IOoNhjBcks8vpxMR5GHyKGrRHreykA+HOCMBOk2eOjyJtVmu7tCmTq0Rcg\n2njqMw1t47hjxKLbSd7HTgCK3UtaNtFt+rO3iOcZ5nrbFoA19uFaF1g3jtVP\n3bSlm0HLsnQyhOZE5EEaFpUp1vtHk9YGsPqbXGamPXRk02K7jDctTWCuoHk2\nUDEN\r\n=EM17\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPTuK7UAATpIYSRqiMtyacAb5JvtSjK0b490Bkbr1odgIgICj5AI6pg2EMZsnx+HOXdp5usMBaL05UedYUosKRimY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.4e250cbc.0_1584480250074_0.36568084534290146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-icon":"0.14.0-canary.ff82d9ec.0","@material/mwc-icon-button":"0.14.0-canary.ff82d9ec.0","@material/mwc-ripple":"0.14.0-canary.ff82d9ec.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OaMKYMOk7eQcFQmH/B8tIUFYRLlfj7I2QXACuxsYf9mZL3Fo9k+5wNMPa8QLPzaMHikMawMqaQJBrGAj4HM5Ow==","shasum":"44c3d423fb47ea7b4f19d5f0f007331a6f10646f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.ff82d9ec.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZTCRA9TVsSAnZWagAAkW8P/1GPrLFyhtPBxQ4UcgJE\nx1KocEcUHAqdE7XTqRPDIJJNr+PoSAYvQY09Awklj9dTN4q59tXbAxFz7hFw\nQyxF2U6VLtO16LrM7yCX0mSyfAmps1YoIhYepRW3LaAA2W3LuOxQueHFXIMs\n9fPd8E2Ew8uSMygG6zXmnJ6t0yyHIr/46sOibQfUqigHcLEVyfz1JgC34+La\nN3CGpA/2pjn2CRLQpXOharpWeCsR9LmyJ4zIsCsSEmIZdu3M8/xBh+mJo7mv\nvqlqp1glKTiCdqwmItGp/GRAAsYRFs+VtUnG+1DoLXN3GVNS4hcAobuR8fcs\nrAJFiSG7SJ2Kgth6eOSihrqVoKynNxbitpE1bn2WBjgdSVBHWExkDg0aaifK\nSADj9cceHc7lBucIREIwoeKyDkMsXDx/J61TuwnlLrNQAFu3O8171d6BS27h\nv2D7CdIUoo1QGYDYyxfsm8rHwLUUeYpHMUlSsl41TGhBEjvfJmpKxV7739UA\nmqKp8Xq9DW8tNOpsR7pnwHUSLpgWO9FKMPbwqe1V4tR8Wa7n9jxAy4ZIRBOp\n0So6fjKQFeCD04ma2/Qz1BtsD6AoFwHd6lCIhbDDhh7w7tmi9CWeDZxyncxk\nYLst2PUJohdc5hJ9WwdwbuMf2lUHiBF5N7fTyfJ7AZtYfRhfSbq5+inecGzB\nKzIw\r\n=YJ6G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUTrsLER3MxWzHEP2kzYc32r6s5klgT3iT2IBAcDxdQAiA08Uf9QzCw4GocQ79OurNCq4pmX+aDdKtGmUH73dBlNg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.ff82d9ec.0_1584555602677_0.021651013955858334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-icon":"0.14.0-canary.f50f48ef.0","@material/mwc-icon-button":"0.14.0-canary.f50f48ef.0","@material/mwc-ripple":"0.14.0-canary.f50f48ef.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NwDDAqTiixHAG5xTEr3pEIqYP8jtBAbQDCGlnDcoRL3Q7t2/JRJXqikB9xdeaT7o0JtNlq2AG5BsQ+FsL3QJAA==","shasum":"8fe54b29044ce8b548839e4e0680e1fdc0ff522c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.f50f48ef.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AtCRA9TVsSAnZWagAAtmkP/0VeiHFounnJTGcBrSyj\nupLkk/2Gyt/rX970lrhKvtmgAEvUKeC39dPiaTZjRYmP2pCdCMfaLxZUBBny\nUZ4+uZdCfCkJGaz1yw5TQ1nf9KyOO8PuYLdGpLZAx8xblkoMxeeb4Rq0FI8m\ntYiZqn4Gyy+gg4bilpajIBejt2ntRoErujZfzgXx8NLS0P6Qocr5g3ZpTmoE\njaquyCC/ir+4xCfech8uapX7T+60QBS/Kin4pQj0EZ4PPAQSz5owVbq6jfkr\n+K2Vrjqr/sGTGTpPsywa2N37o3GN50l0005KK+r+cMGH4xLvPY1Bsucm0TWy\nVYaf6dCojyYktVk3XaavNZtV7xV5ItrMvnGHXrbSahc70Xq8/Q3oBXE5w5EH\nCxiHp5Li4eC7PVWDEbWeh+oZ9eNg7XNCQpzPKFKG4OU6pKJlVSqx6O5UMYRe\n5SM0I9EgUUdhj/RoCQHNUHQb1dOF3Zsfw7//1ZvbHdWB7Xyv5n/pt2FfaKM0\nVPRdWLbjZOHyIe8+VvyZHOW5KkOu7nZJzsjjA9zD4uY06/QQtu8oV9jY/tOj\njpfHSnvAP2f/UPyhPzscJeU+0/umC8xSlgi9C4ZugpnaoW1EjkWpM6VEqemI\n0oRHG+4UVz2K3TYHoqw/GVlmNn0JpkkIHRSs5CHn4hMgKxpOZ8SfkXnng1qN\nvnHD\r\n=7q3n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASF/5jz+Jmr6k0PRr8g0Uy9t5AG8i8hjnLjVuCWADpfAiB6ysL2nVw0UaLpZ3ICRxvxIeTTcVRO9SGKuezhmSGBZA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.f50f48ef.0_1584644141176_0.6954527171750133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-icon":"0.14.0-canary.134cf877.0","@material/mwc-icon-button":"0.14.0-canary.134cf877.0","@material/mwc-ripple":"0.14.0-canary.134cf877.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IJLgIG9QvbBbeFnZQrIeKHbmHUq74WWKOxb88PtS8uHikYViznZ/ZKyVkbBkyGPdK1Ly+hQqmMG0Qea0Bz4B9g==","shasum":"c160ed1c30fd0b15dab13dabbf4cca8a799f07d0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0-canary.134cf877.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9iICRA9TVsSAnZWagAAOwwP/0bRQAm3kYAQBe721tXw\naY3RvuHxhVL2AJvKw1aM+3uabLgj83Z9URbdssz5/KPv1AidgNDIVOEY1EDm\nZcBmRMpH/KkGelQkkXUa0ewHAXN/64YqBqna1roCI2EN9E9YKmQtT8ulNP0b\nS+H9L3xoKaKu7EdFAm9nQfkJF4cgpM17xKCtxJxBvS9B+d9SGAUQNHyfVLq/\nLij3eM7TDwp3vrtfpIDT1eotdOEgRNmhFxgyk3uuLjwFdp2opHYPLIHiG7ul\n7Gl/BNjzXEQAEKMuvEt8st2rXw85S1lF/QsgkZSyHJ97s7gexs6fIcxN6a6X\nDmFxBjRp88VJAut4mhOFJUQU6CJU5IHAh8kBKMWpbuQDYbL/zXJBPIVuvpO4\n7EGRTZB7Qlw3VoN/fAs3QvTWYlXUACqr/H9ez8xyDFinRyGA2BhNXcYF8gey\noyiyvsqesu8HyXfDmhTJQSyqMyO1k3I5bePsQl/LOG8SI8GX8pKFyG1xwwKn\nkjCjPOS5s0Zkvg3Hs69rKDKW78fg33j3HLreA2v+KfWGEbgJJQ4vxSc1URFf\nrELsYEgulbfFLHtbqxFlnFyXlUHEICJpe+2XvKP9sXtUwfoe7iLgLuYHrOKt\nvZyOcl+4IYyUYqpV1bYJsfwiJeTpB7dIIPglUz4D5TTw4x5sqdvj4yfE6jWl\n6HBL\r\n=rK7V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbFOyeFM0CghdPUqXuMDo8zr0ggzStrKF3M9fbN8DwnQIgBQQHzJSOEzZ2rqX6GsXrh8ABwr1A+G7nPfWr2QPHC0Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0-canary.134cf877.0_1584650375924_0.8400463909317752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-icon-button-toggle","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/mwc-icon":"^0.14.0","@material/mwc-icon-button":"^0.14.0","@material/mwc-ripple":"^0.14.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-TuUWhVSWiyaorJF/rKAOxT1qyqG5MUoamyZ8dLGcgTAn8uEoA8ng3vrF9TjTPZugpeVvpu5AhVPK4v+rXTQpWw==","shasum":"3890a9ec42d7c4bb6d74ed6113e768f343c0c0f3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.0.tgz","fileCount":11,"unpackedSize":36654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QQCRA9TVsSAnZWagAAuYUQAI7EWzw5wWb1U4i8OBzt\nkRNtf0CuAJZSLMgBtJ+DzhNzMZF/z/11jbOP45N9h7fq4meIcN2y+rU5/EjU\n//nuJaJYK/KEPCEnD7LrjPC+T20Z27Iru7VgksSnFFId4+0bFBTouBpA+oxH\nRGJ4CuC9/bbPJsSad32ZiRxNw8hb6KGXIlLWc/szryqvZJNJULEohKDZuU/U\n6mV6lg+CQHmkDZ9j7z3sADQgiO/XsigxCoq/UOALckicyezZnODtat/XyeUZ\nzKfnObpq+HNxetStvOLsnImLh/heRyijB4PTNXC5C8y3eX5m+sXDJgO0epnu\nM0xrgiURtYm2TQq4/2ZPIJR72ClzX1SBWVY34YyX8SiLvWbRriAG3luBEXED\nS/tbW2vECK6EZ5NKmbWA7sISWY+T5M69ss2bGGs8Fb01dmvK4+oZawYZai8N\nh+Cj5FOAwKJZzmoRDN+GcHZ/uciEy191AhumhjwTEP7QDJbRZF6Jv3G0b98Q\nNIj39X/8fngqHdYSzMvKFjpED+oFq5RbdEOwoESggOefLbgGG7wTgtY6gR2s\nU50X5SdSjv0OE4CGwM8Zn5FA4Oa5jF4N2CTDABew87WYnBm3xMUz2P8kyg3j\naTt9je9Bix3d2AOXwY/osaDBz1/wre7xRnk34SBVK+M2Be8Om5s32jZBpsMJ\nxPvw\r\n=FfOb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDA1LEjZyX/yKtcNl495Ss9VffI5y6tScQ5VWtPaN5BYAiEA/wYKjFTE+7pgdNlzlW+WXABYQ/9+cxiu8fGNbQjOXyU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.0_1584653327776_0.945249237017769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-icon":"0.15.0-canary.2c1a4913.0","@material/mwc-icon-button":"0.15.0-canary.2c1a4913.0","@material/mwc-ripple":"0.15.0-canary.2c1a4913.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JghnuzcNIsaLcvGCHyZI1b9rtPiA5nVcbscaQ7EIpF5S0uhVU5rH5kBWvTuyB0MVaQeRDe34DgIu2TTQZ1zFVA==","shasum":"92ef8a95b46d79d34d749836aa456a73fa07e223","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.2c1a4913.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/m4CRA9TVsSAnZWagAAHsoQAIwljqJZBzCveoX7S+lw\n39nvklLJ//el0JSlzJVmcKfLkKzEFMdOdkE4Z70BmewwEU7/KJArBiCcVKAV\nUqALCvdIe70SHMLySONdXM+PQXevg9sI3CDOhlD0BoVjSuixI2go0Ngd4I4R\njewbsi91xEfmWzEM4CVmd+WUVyks2srpcBJLjaJ4Yn97MMWvQJ42L5oWyreh\nxGT49Zj6SgQf+S9AW4OGzGwDRG+AEfo/KMz7VVUDJ3oJJPh8MrkjB5j+xc3c\niY855IN+Nydeg0FZ1aUGzXRBMF74Shs9huLIjkpNIZgikPI/8gt36s9R6s3h\n8TjP4Vno7CW/n/6Rdg2N70v3WO0qB9UKw6T6mNYrVIsMxh1IJCJysVki1/mt\nZBt50mxyyWFpT+RYX3l//TdEMtYOJLQtpkPy3abfwNwAD0/KC9gbQgVMGKDt\nN0WPX6usFzoP4m0CD4EmnZcWtGd34Upj8exHjRkipmI12j5UUjRTq1PQlDRS\nzxnDUY5nABTuswpeAYnCqj+RhTnGWACo/JqF6N6Xa5ZRzh3VoMuCAqk28eAm\nLEOWPyEDKzVC+HvjWecM7XVBDAMXmlj/LcTeAXB2Uy6YmwXkB50XBLwaOdth\nG4Zb58+ydZgWBP3aPgopcvJ7epfZGIu7s059PAH13fFt/n7eQRGM2QIFIuJF\nqKkn\r\n=p0DB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICajlJp28F9Q8WslIOpF81OQrI+NxqCBb6UIuohx99mDAiEAqCMsEBYnPBbxbC1bK3LXCvdqryV4WxV/QnB/fHjkXZE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.2c1a4913.0_1584658872587_0.8265619888382467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-icon":"0.15.0-canary.3a6e481a.0","@material/mwc-icon-button":"0.15.0-canary.3a6e481a.0","@material/mwc-ripple":"0.15.0-canary.3a6e481a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IaRYR1aWQqWp/ik1p+9HRwICUyDUY1zvKA1Ozi2ddugMf4HvneQFKVhhb3EHBfAzxIH2ok8sx6ikKn4sWoeNlw==","shasum":"d6d24ed4d73833c7cad5d53f6a9492341d131789","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.3a6e481a.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfJCRA9TVsSAnZWagAAS1QP/01UJiZjNi6PE3T6WCPb\nLlbNDxoUBcRxAEdRydU11EAJIaxsEe3l2aH+V1NzHarV3SsCUsV+rxbHUWOZ\nmJIefnmlvJBG7JLrR/BgN5oA1BOOryeVTrIHNFIHwL85ZtFXieV+6vECUKon\nQPAEkKzxw6jp1Z/6DtSWkk663qPe+R8WEJOd65H8aglaM1g1eAamqvNXUqmw\nwuf/LvxFqvLq9gEbjvy3xeOHxF8kq81f/cWf1lmX6P1mnC8e3fp2zYZHFxOY\nKUIOkEeQstPcVICagQ027ulibW8UAxcLKCf9w5Zct5V6dU2rZ6+H/tOQJr59\nnJBCps0uKUKa1MzCfEqLolv9I5/qt+qSQp8J6c8DLCkANtvI8K7ogMwdmBvW\nRQ06Ohoet/xV4pXgxeIMwasgpULYgrh6Zy1wfp8+xxXWnUA3+0yZcdWEbgC7\nWbONsmMPaNZHUJIIpY/vAzR9QLWaCDUQ9WWl1nw1kzzbtKznXbexBHV4gpuD\nDXUROpF9vqrVZA0NHKYGSPiv4XHi09NTqDdJ4QlJVkE0SAGzNLDHEYagiitg\nwA3LONU0BNXTP0kEfonFlyG0PQQg1BUeCRm5xb+TgHEltiXKuRVFLHgJivdt\noi/SSpW5p/Cpa7j5kj/vwxBkvtq/tIXR3zfDamPc2Al3osJA1T4k6aSZ4wc9\nM+Ea\r\n=euSz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEInXlNJ7vXUsCNb9tbWjs6gJVZrCHqW8BT4RMz8nsVsAiEAn2+zRSlUtTcKVcNWCVwI123fbTx84nBea0zY9dqpXtE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.3a6e481a.0_1584728009166_0.45887395044061385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-icon":"0.15.0-canary.603d6eb3.0","@material/mwc-icon-button":"0.15.0-canary.603d6eb3.0","@material/mwc-ripple":"0.15.0-canary.603d6eb3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-heyprn7FBR/YSFFpLHSpSnJ73/tOUWnjj1q+s5eJFOQVmqS/b+Z0YElS0SP+9La+oGwxedA9yZKwW/yv26fRmA==","shasum":"6252e7cfeb8adb93f4e1e0f99af36c7d104c0f0a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.603d6eb3.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdMCRA9TVsSAnZWagAA2PMP/0N968IPlcwyjPWeBwYq\nF1appaFU2bul5aD71ncMj2OABiRvhSbPDqrnwA5MdS8Lhh3e9wDzvzvYmUZy\nso1AarjS7yZRqln+p8Yx0QYhjGAP0YkMUJ7q5Q8Gq82SyMmgugx2K9gvDIHs\nfE+jUpaHGAeaRR6QzgUDWIUjmBnxcfjeXqIATqJeVMt+eMTbFfy4mKJ0ZUaT\nElSrYAisHh3Pb3waEiIcEguMfvj+GRXlqcicQBrLQyq5quHz1VQhKBri27ea\ncyB4H7scWV2Gffy0Ds2P74E/Xf4BFdnm3zEeOEgh1dRiX+rMWIX2Y3xjp0vU\nXHiFqCDOYWvIDfZoZ2GOMbSBen5GY1uYSuWi3ASRs+T/spSRmFd1Vq9uP920\nFV6Dr3OA1KMoz1B7cG1gs2xegoocCrjRyRQ9RbbLM65sqphRJo+Kjcg3ex8W\nsDs74GIzOPkslS/XarQmvGEZu7sZ7l5Tj3xHV9z/sbawBv2HLQrmYKWgoxR5\ni0TGgBbscmzpYQo45vP9615lvSjlFJiclE/Q26FxssC47BWspeS1fMhT9Sa5\nwDzBbAoliOgbQhIemfgLhA+OATEJY6DawXuB9p4pz4pkkt8gQ9//Nw/RNHSz\no6MeER4DPHo4POgRw9K1eLEA8fAENbxIG82r45+bTPB0xJZUA3jo+i4kBft3\nzIwZ\r\n=qHPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUIkz7ZY7/Fv2Eq9aFnxXfE242k071lTiLxb2lRjzawAiEA920j1dCQZEjNfjibDAyq4uD73zfpMT48SutuzuTyRMM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.603d6eb3.0_1584740172295_0.8344380254565149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-icon":"0.15.0-canary.05c6a93c.0","@material/mwc-icon-button":"0.15.0-canary.05c6a93c.0","@material/mwc-ripple":"0.15.0-canary.05c6a93c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ad1Vin4937i/1pFLePp0MX4EWWDjKu7IKqAJqfKvLjd2MOhWOieoo6bRACSAwLYaD7tAiRGAX3UlH+qhE8OFiw==","shasum":"5697a477649fd3823aa7df75053b1fc42154240d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.05c6a93c.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWfCRA9TVsSAnZWagAArNAQAJ39vWX6joTlBt/p1bAb\nz6vypo2wx0xcmbiz9TfsnjV4O02CkIMa/IC6jpslrqJpyO7M52BCEEg36kab\nKQb9Kc3QcXLMEou4X2gkdhdVY3qkO4ZNu5LxE0wUzjK73hBlI4g8oZSyW9kE\nWoGukG+BVRtLU1CZa4wRO0dQ4c+K5oI++QIrg4H5fqY3UR/wpLeGe5upJG/V\nLLR3ka6CGZJ9PzQPmakzjP8TXXljOFSZ59S89ZItG//rVwj3QBSDvDKnk2wq\nJ97KjGVfDg4KGxHZCpRKoPgh2fBqBLVGPkwyK97rg5TsqYzaDV3AZoOzHFDq\n6N8i5ZFEEfKz2yeuPeF6rbGKxr0YhjBkSnk76s2mBq+JRDwsZ9OZn40KrciG\nndr6pTUSFSBUn40wDraDthLzY3Qonp7g26uRbo47ZHRsCGvIBM0yR8p8fLOR\nSVBo5I4eo6t8hBIqSLDNPmpH9PIcOkBM29hiu6W0V54YEd65qA0jclPKkR72\nchhGegEhBwF7lTaczNRWkk4KvjZVbcuDDdWkAF659NrwHzLopIo7fsLkms3V\n13XpinbGTAEqrqqxJiIP2WIbgS4DVC2dXeoDCDQyBWKIPzwrQ7c92SnzxORw\nIG9eFMtI6BnKhVc1I45UXh5IP9e8ShrSx+dAbcPv6e1RwJfakO2EljR5mVkj\n6hD5\r\n=PZ8l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3mg7MtrRtf7hnKCKV+gwJLk0T/AuKr9GoTIMS7bJ25AiEAlNh+OdHOgx6lawji/G/yy/idj2TwgcIgSH3XnpsMt/o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.05c6a93c.0_1584981406820_0.7104233430401612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-icon-button-toggle","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/mwc-icon":"^0.14.1","@material/mwc-icon-button":"^0.14.1","@material/mwc-ripple":"^0.14.1","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-9Kz/tcHp1VBvDg6EF2nhNDOq2RaUDPy7/7qlcREKSgiITg1N3/2db0/DSVURZjrR4kt9EXEiX2b5CQF8TyZ0HQ==","shasum":"aacd20aa59e0bdccdd0aace05f95ed470f785986","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.14.1.tgz","fileCount":11,"unpackedSize":36654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePidCRA9TVsSAnZWagAAZuYP/RoWIBg2Va+q8CC6IOUP\nLq9R+gM8AV4LzjE6IoWLaMPSzoH4kClhs4pWxQKiVbbVmXnQ39oei20sMfp0\nfVqBLpslOSvHCxlEreNQUzkSYTJzeaXTRtg04YhMQoD4lxyaQKBptnbVe5/7\nH3qLLUi/qhYjR79o5q4ljvPpqgH5idjnXpM8zlCphv9poDeOrmzXV3SIqsDN\nH4Wj82Pv/+lwkcQM26wD9xz2FThOMSYGRcTOtSyFGlhdeKQAV+DboKjSsQ02\nQWiIXCr079Abb5C1InAsiPbbLbkECn0eNgf660NufYCsF/EI4JwctHQloLF/\nfih0rBKWcBuXDB2ToohiVgoRuGqGyVHnuywskBzjcoTVwvPN1nKwpx4SZJwk\nbihvws1MJe5y4l1gIWX8EkU342YCy2fSrvkbRJgGKJvyWv8j4UZWW4iQhBSY\nDKo5i7GbHvqUTHzLFQ/2HwagxhJxI+MKzmVO4at5K7z6KBgHXjEU7SA3D/rq\nZwsWaXrszy67+7NCoNbfLN7hIJu4yKBwYPw8V/BHDLzzfgbMWxbn80gzcoqA\nqKR8PJMVGy4h17h1pIv3B6BamlemsFY96X9MfQC4UJY4TwS1DGYtri9N/P01\nCdJ+KgTse5uOCUWleuAT1e0lM6qabsCFP8+dy2eRQ3O+uSlYNVqOFtBZ/qO2\n0Nmc\r\n=HOWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaiE/et+WVg+dP1mkSZKTvFFtapFbTtJyYahLf+6Vr/wIgT9AuG3//Bim7VMsiDf2BgCStRNvBPu7qZevUUBObNIM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.14.1_1584986268903_0.3498677916155004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-icon":"0.15.0-canary.4e6be3f4.0","@material/mwc-icon-button":"0.15.0-canary.4e6be3f4.0","@material/mwc-ripple":"0.15.0-canary.4e6be3f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-izZLLaFOPZQ4mnCU9oQQsVGrcUuMp0w3UHuoHpljlC7PPFxrux+2Vw3YIE/wtI5DqXPM7KBs/iokz9PNY3pVGw==","shasum":"4615079c1d83e809e1ba5de138dedc0dd4221f82","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.4e6be3f4.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSgCRA9TVsSAnZWagAAe9EP/iWr72VTitS8sOb0H4Vi\n9078mmnqtwnRHhBg5tnPqJ39/wBLLyFAvVuw2QnzqELcUSrs38S29TYOu8Is\n6K3XlVAktfqex3r424Yf3+znjwzrELMVkDPYNYLn1j7ttOppXk0J9FS5E+Uk\nmbvsLllAkxsRHzw07Qcn9BSYA5zO+ncHHxAIY5zAdGlIDOT7TpfcT6lKGkrL\nnFZYJqPp23dN1lIdnG6DIgmJnRtSjY1JuKRoK0Oy+WGDlj0V7kJqPna0IPMA\n/LdOJYqLRkggzIvL9mxtE1YALAswtT6KmadYlnWvCNm4H+qHJsC77nqw/5fK\npJdCOoxAqCytP++LbGtu8S4tDwv+jqtDPpGPFICmtEj79v65vfihABDUFaTY\nJ8Q//jdV2RLUYkf8mqspQ1TNfWQAJE1nsUtQ2cxj5xGntCKiVV4O2zBcykm6\nJHHtcs0XXucnfEFT/rCNOW4RLQbw6M6uiQ6/uvIaCGFxf/z4nvt+2gk1FwGc\ny1NXa7y/WyiHLIxlVz91NFQWAnOBS0yx+oDBpEUAk3cnjM3XqEuWg/sJbEMl\nJ/23o1X64U2tpdhlJN2VE93/EfN7XOjB5JmJQBItwfX7unGTxBkZ5r5HRssJ\noBpZ58X/4pmzghqWqgY2YSHTYNoe16wTbwS7oBlBNj5UrFaJTnRlQLeUKgwU\nfTjq\r\n=pXMM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/md8vcFHU7JDtalSZb1A4QzXR2eOo3LCnW7Qz3YbUoAiA7i+dmNCQ3oyLH5/7Er6CFPFvDRmNsILq2+CwYPFfWzg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.4e6be3f4.0_1585083552001_0.27609092810965086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-icon":"0.15.0-canary.c29a683d.0","@material/mwc-icon-button":"0.15.0-canary.c29a683d.0","@material/mwc-ripple":"0.15.0-canary.c29a683d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8JcercbAKzc9e/QX3Jc0/zlT3OTjLcRB8nIs7U6vlcpCVZEFH7d5t7r2yMJqKT2br+zLMzin1M8RGFkKA/F2TQ==","shasum":"288a07477436784519a3ab8e57744763f3cbc0ea","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.c29a683d.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjICRA9TVsSAnZWagAAG+8P/3z73aaQmW1Qi/8hvpry\nKZCF2Z9u5+LRv02+Sdy0KadsQzESOzNk9a09/+Isu5yl5y/rfV/w6q1vzlBx\nesDYwo9xdiTSRdSxr8sNVDEgn4+8+JDm+zckvyHDS2/eGyTwHbUZ9r1nX5e6\nxiy1mCzADMnHNXiN56JK7LQoB4faS96yfjSKQyLoQIlSdVcNe2SZnlcToF56\nJ3D4OiL9jGfeT2rbrNawkyciPOT95rD3/fw0dVa3xS6lyElUmyzAhyu8AsL1\nFOkWzqLHt8CU/vk67hdlcPLBvDmk6xn8zflwCqmAro3IaQfpaP6wvXqJxc04\nm+CK6i3QifucYVKiewHhjmi1psQn4sVp8Hr8nDIsovkHlW+ShXfGhNjuLL/r\nj5Mm4S5rjYHjQNjVFC3wmvZuxaxZIs/nnvOTjgmlNdXZlpjAyqP7TPq+coDt\nrDFTv4Ybo4oteKGGxnrJzFYJN+RquglV0mCy5qpKhwpSx/RrnkmLaSi3Ij/q\nin0jsvVaiwyYSBF4p6k0C7HoGnORb4j3gOhnj3jk20pwbExGBtm6EnC6XFKn\nydL935I9upiRqlDw8528FKPauOysB2OVvil4JTr3XsU79k/0wA4CV5ttcnzj\nUCIDaWOJm96wGCbYLE1F2aPENQVpR5nAxbwMuCSPscJjNF/whJrJaIIpKIbQ\nfCmc\r\n=qk/3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFVYdMiZRJUqCkVIuwAM7G0uxR8TFVseDXcAlB970JaQIgeZgDLd/P4VMwGhD57a6zw+qeeXCzLzQRQB5L2FBDSVU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.c29a683d.0_1585084615735_0.1818592414714273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-icon":"0.15.0-canary.fca3dd9d.0","@material/mwc-icon-button":"0.15.0-canary.fca3dd9d.0","@material/mwc-ripple":"0.15.0-canary.fca3dd9d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Dlx1seTNiuF1vCFvpAPB/vXR5XMN10SfzfjKyR86MCPQpFKzYv63enaifZbdglEo1SCV4YB/v4s4z0746Qby+g==","shasum":"440d9dbea3ede330e88f0e2a982e5ab61a20d5a3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.fca3dd9d.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepscCRA9TVsSAnZWagAAg94P/Av9xo0UULxaDsyhcoEM\nrZhGlEMjJNJhWI7u8ItyB9z3np91R+kdrYOs73Boo2eHc/p6jDH/TUjaVxxT\nkiBo+6w5cICi5PkM+CNjs0Fbbf3k2fieT11hM4S0Xczb4EeqlFULRVPiFwbq\nw+CZqUsG+h628x2stI31CY0T/6x0a4MuUXam9ghH4HG5YARLmshweTw2V8tr\nrKAaEGJ6Bd3NSXllHy7aH4gHxDP9DvEpoyE40vGHxU+veh83PN4MC3hu5ueH\ny6jzW3F1EO5+2b6hK0HdwcWz6ZE/WLt2WCIywxJ1L+HNQe+/RGrq/n7VNBX6\nipCNPlOs9cZhJZXdnKsPj5cVCE1st7S9mL1WBdC3WwFhxOW3VvV5wQ+wWJaK\nlXY3BBEKlc0YFkt2CDnZ7J4tv/IxgCJMO9kPoKGYMnenOoHdhoKXCOEsE/i5\nWT/ghKN3VKi4uMqCzS+MzEnj4I5fVM3iN5cjvdLspWcbjvmlU3CsIRWuJUyR\naHHoFIDAmmTwRLUeNa8Qm1dmOKwbcGWWTsunm6fIJZWsGyXyEaM4DKawiXsW\nh+ys8NwJCofJ7HUYZCTG8J5C24eKUO5fDUlMbMBm/3zmuxK+BsKTCt0yiH0r\ncxCJ3araex9LIQ1u1o/FyHsJRTIgjNgUHyoA5bqseASdtqc72RhuU2QugJ/v\nEX1S\r\n=Dc21\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIouP8Bi01RMME7ZHu1aAK0grclQkede6jwAXJg5OuoAiEAjuFtYLYY0zLRbtSVFDzszrcu6iZmvT1BjWNb2UtENmI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.fca3dd9d.0_1585093403926_0.025770633687902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-icon":"0.15.0-canary.1e73da49.0","@material/mwc-icon-button":"0.15.0-canary.1e73da49.0","@material/mwc-ripple":"0.15.0-canary.1e73da49.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AeNFYbmf3DB2WYU88D9xhGGPFQxnObtJZJDzKOn30EK5uGlqYhQQsmnP73L91UYFyO5jdyzHzNX7Voo4d1UmPA==","shasum":"a84c1a96ff2fcd7b0d9473ab69dcb1c5b5e01e8d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.1e73da49.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81qCRA9TVsSAnZWagAAiOQP/0++9rMkWNNbvRK+WnEI\nN8cngZOwXez5d1jy9bfOTfEFYoeBPuuupH/Ewnktmtpw3EVhQ+3icpfGct/b\nY2ZXQnvcctrQySDHDKM4EY60BkfiuJrT6BTIVEdnAliDv1P+eMIzI028nY88\nl4PslbaSrMQRzKJFu0/hqqRIXvk6gUUJtkmtg1Sjass+f95T/4AteYdoTg3o\n5WmQDzqA+Zjk13zGJTUBxMcPf6sDkJpUzjGz9cyVPZt2BKSQVA3hVs3wNl17\nfn0VmnACV4C9poX162VdoF7IKpqWPhgMN+6Wl9AFlzZVnBztjHvcFl++OtWQ\nIGABvKGL6oJkG+56VhFDFYRwFl6e1DNK0sDS98ZmEYoIh5mFShEOd7Gde3ZH\nyM1InKPASge6kWJRFHjDfBuBBcrD+qSQb/oM7VDdto+9GpqH3ZP814Joo0uM\nHE2/ixgCNb12CH+2W21X6uskofw7oAxshlnprBhDIGn7x/mwpdvGoct1zQvC\nFQPhU2Dx1Vy3ax1AWu8gR20M0j3LKZhe7CCMBOliotyQPqVnphsMczr33C9N\npNwR43pq2aTtKtAZ8KBQvZVJOgG/795yl9vDIn6d3sAzIZkYA2smmqtfol5Z\n/E2or1eQvkkDtbRTuY87AMlTq3fOhnaTABpGTfOIe4RM1FaQjr3WK1XmPJR7\nnJC+\r\n=+ytm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBeBCcXTlIadiAzLewYjNPB8Ul8UO3tiQ+YGObglTdQtAiAk5Am9fQEGQ/vnyV2xfbsR8zp97mZwDFTxKaNs9FXlAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.1e73da49.0_1585171817701_0.6382200066999821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-icon":"0.15.0-canary.bb6dfc5a.0","@material/mwc-icon-button":"0.15.0-canary.bb6dfc5a.0","@material/mwc-ripple":"0.15.0-canary.bb6dfc5a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-M8eC/fxWsCRn3XGzcNiS/fZgZmSWh7eexTzvkkmerJCZnZXEgJiyJ0CGrh9vi08HKo3paYb39J4DR++jGKmEjA==","shasum":"206b19cda42dd8f6a1e9ee3ec97fc6e1bd737a55","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWNCRA9TVsSAnZWagAA0ggP/RnbpiMRJrcHbvBzcuOI\nx7Ir2PLAMw0xeSkJ7/Tz4R0/aV7uVcLhHxpesIpg7K9t1wtGUw8N/Csf5ENN\nE5wgiVW1x+uuDzGSsYHngcn0VPCveEjAYw39n3ZCtxecRHxUy61yGrSgupSR\n69FN+72/dksJQG1UbZCZmO7Ab1Ib1rZjG8gdNIFLi8GMJWw5HfcVwYeSkkzP\nLB0WSOA3jsAYvk3wKlZ+Do7W7hE2ymUW5RYm4mPJZiU859D/uTk/Ix3Tzu9R\n7cfnylZ40SK/rsai24fb+Ps25baK9jA7gykdTqVFVuxUVOBjua4BAhEsNQTQ\n3k3irpEX3FKhy7CfWxhhqop8iEsgpvIB0ON8MNzHuLCsCM7aEAH7enkTnLTP\nmVfBImbrX9ZhMRPnBLAsQPNDHiqWVZbQaZlUnWiCs9DJvTIpLVHsOLj07oqU\n6MIA4uJUu97VEFENUyhQQ5B6Mac2TBJ7bMoPf75bLOWWqd65LgEHbWT9Ohhl\nukbVD+B9y1f31DcnAahjUpeeSVxV0EoZwtAYGp/Mb+fnwHEHvVEZdUKTqdn1\n10wn7KvbfaW4KzUHo1HK1vXxmXWVYukzammRpCOXkZ5CHw03C+hznvpg4Wjj\nX7jrY+Gk71fIU4v7ypJs9M/jITsl+4bssXp00jPrYFplfJo00fVlgEFGhofF\nVQqu\r\n=5+Qz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4RepY1yi0nGCExFXMl6LxMrl3eu3VxbVgbdXxM+ntTQIhAPVNcJmHftMr2J8s7O8wVBCwJKtVlwAabLfzKStIjyEc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.bb6dfc5a.0_1585272204580_0.7487470342599358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-icon":"0.15.0-canary.1884603d.0","@material/mwc-icon-button":"0.15.0-canary.1884603d.0","@material/mwc-ripple":"0.15.0-canary.1884603d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YGJKsSewCZcIIuaaqVKnh/uOsuZNbspDiSE60dwv9Ypd1qja3CFrxfSNG/skrj1b5b4wtvqCQYfnleb+eHdSBA==","shasum":"fbe4934df4c0b3d8d9c4b11fcd8ea7f5e0f11e6e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.1884603d.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpGCRA9TVsSAnZWagAAHbQQAJYgCNvgQIwWgfs6It+H\nAtmRX8hlNdmrgiy+gq1BhxHSwjwMNCa8eLg7/zRF62jLh18w9Aq5V/eNnkga\ntyIk6kltZuRQDdaJgd8OtMRKcHxX6oVhdL/iBcs4ExMh8h9+T7fEdjVyAW9P\nNPy9VyxmnHWCAVaLfosOQgFT9hwt5YIkTVD5bYrk+AuMWrzCi1rYZkVxFc47\nphJ5zmcuS18bsD0qXX3eOHqvXFcZ9pX+pU5KgDdCGFHRD2tondw08rL7s5UQ\ntf6BDPWZEjYjFz19UHe0uwP+SwmPdVZ49mMFvXRgrurZpyltZN0KKr/9Yhzj\nLt/yZfOTBb9Em08xYbJvcMEiZZS1XDlG9KhFmmBK8r+7QHljUe0X4xxJ0oDP\nI5ersRBzR8E4xWxGaBu5LQZ7+3ARY2ey+ty1zGbxXNPKcyMirZ93LgZEkbv4\nlqkSPKG7IG3H7pUxZ63U3jILzPVmV2Ie3eSHjexh6cpyae4rbroHv48n7EfR\n/DzC8mL0UilGKQfALBUsiAuUj6QOGSB+0GSglLcIdlI/Y60xw4ecWaLiOZlF\nQ8GrQtZjB2v/GBWzQ1+bE1GNx8pV7xYEGlshvqOEqUUof6CtB8ayYL/pID3i\nT8LASyGsQF7Gtuwo8jAr1dvlmL7kaFbLHlhoYn0UHwb03rO91Y7FigiI8AR9\nvYq0\r\n=TmDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA58MSJuFy4HqFstpujnOCfpMu/Zwa4y2rcCthRLVUtxAiAhwvaVSAgB3Vy2SCHOMUdTI+GAXbOYJPoVglymxniBUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.1884603d.0_1585338949844_0.38141338812521575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-icon":"0.15.0-canary.aff73cab.0","@material/mwc-icon-button":"0.15.0-canary.aff73cab.0","@material/mwc-ripple":"0.15.0-canary.aff73cab.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4z7337BnstPAWvyvY9nG1SyOkENMkd8QqQ4RWrRfR6Y5eme6fgUSv+NKTl9NlYf8TGm3jbmjgbgGhqxNX9oT4g==","shasum":"a7b890d96933e344e3e58559d523be1aec33b725","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.aff73cab.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmy7CRA9TVsSAnZWagAAwO4P/3G4FAN7AFveAdqGa0uj\nNNEq07hTte7hYIiu5Ddqh70w6pUNwQjklinZQYjtYt2FYPtaladlUUN6bu/2\nz7coY8eZuCe4efHQmY/buLotuDuuUOYn7Q4DX0gko0RdL++r9/85h5kBfqQc\ns05c9M0kGcsC8Q7mRChSlvwyxlTk9lL6RP1GB2PRwzFCtgWOknQ/l+lSL8gE\ntJYs1HMLo+w0ObTJ0KU33yS8oCO43f6c/vLT2THHrLddCFm0gJppIHJOBwjr\nA44xr1RI/6lqeoWLZ9ZLYhWH2nUTW81SNnCoAMD0xtUI/yW2jZ+I3iQPGuYW\nourGr7ylE8qmSTQ2nWujNMzVz2xiCrtSec3vDgDQ6hLfuqbK18AhJ4oISp7X\nZg3SqxHL42oUL//ZbaO3BxPJ7bf2kCI8ulzl1UJyo5n30MUb9ObMKnEH6kke\nvVhkFbNRWcpkcwRshZfumwMQSDca9sdtIyJWwv0LkvYt9Y2sAg9wyCvwLH1K\nO4hsafQ783P+JDcDsAcOIZZqU981IwW15rBAPbm6sORl5X0PFifSl2aZuPVH\nZQqVd553EygImPZjH6BNg4+6U56LGWOD5F8Y6EKEde/XUaCaujYUA0qURXD/\nE5AdngjQFS1mcUf/dIaOFYx21V0jW82Jr5qqDHOKSFgNxI7otwumoskzaXU7\nMcVZ\r\n=Hs9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeceX9L+XSHRhOzh/C5G/V/KI8okpVGCAKejbtpTPLOgIhAL6zn9hYx/AJ0Z7vHcf03JlNaalJSH5JB5t2SSspXVVE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.aff73cab.0_1585343675496_0.42019107879343953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-icon":"0.15.0-canary.63168f61.0","@material/mwc-icon-button":"0.15.0-canary.63168f61.0","@material/mwc-ripple":"0.15.0-canary.63168f61.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ev7BgeGcLMpUy09dgPJpUg2sNCilE97355c++mMbyeO9cFVOpRTEwoWdrwyEOBbyR7i4Ehtm7QewZ9jX4YhlWQ==","shasum":"cb81c8c37fa70e71866f503940e8c5516b1030cd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.63168f61.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gfCRA9TVsSAnZWagAAWisP/2DASEujw/mi+pho1yyK\ng9ly1sVUHHk4x4At96uoBd+Cg2TfdsRAIRDMGZH1TWt+Npfac1ilkwI/uK0J\nbnpVlkpgr9m/LeUErzRHLtfX3mCW7Yt2PXu4wv/yOMY+emA24s+e1Buc6LkW\nVoJflblZRGtbJqAVgLn4I7nD089yIL2tvY9MVMf4Tk+Nv0ZRC/B9QBkiEl1u\nKIUhZhIA46tqENzce/Rc48lKePOrhKmJkUJ0sO+WW10Nox4iriDl4vxq6ZDT\niDilLF6QFK9KJj9tCAgeiwQSuwnhVeEdOhl1b472yXMX2bY1jATJDCrwntIC\nnGgc390Q6l4jmQF0RGrm6kNl3muLsWbQki2THFvFkksf1PeWUgUxE15v8w/N\nlXopiViMukVwc2ICPl6SbOmdIjZ+StVXcwuZJidbF+z1/34X9q2A3pn2LpDq\nrg0axbFqy//4sATB1POGUiMgwZXUDGANKZ7kqInHgG9vlX2RKateNSLVtjl5\nwAaRfC14BSkU1nglGAbzqYqT4kSo+yX1VGFkQo+fpG3ijhfMdL6eDKm6aCnc\nUOg0CsfChM1EA47ncYSHs18xlSR9EtF5ddH4V1T9oYTimn966UHV8V/rI6GD\nJczKe8m3JpB1Ez/qfBNwAYBnyOCs+OQ8zIs8U7Q4Kn4maiczeMA47CvFLLwF\n1xzm\r\n=/MPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh1U1iJIif4dgOBMFxsSJ8EKHJkA8fKvdPASDjP1RV1QIhAJKGBaM1FJX+cZgKIcknnl5gVBPtPeCzpGc6YhW0NC+C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.63168f61.0_1585678367409_0.08810726603170105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-icon":"0.15.0-canary.9fb79b3e.0","@material/mwc-icon-button":"0.15.0-canary.9fb79b3e.0","@material/mwc-ripple":"0.15.0-canary.9fb79b3e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FH/Hq6M0XX8cF17UGnnyS4oYKladPY77Lhu97MworGH9NFDMXzhmI5w528BqSwrz6ltjxDejEm0Y0nY8TqXQPw==","shasum":"dea07d1f63e10cf50312e7ae227ea4b2f4288fc6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.9fb79b3e.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QkCRA9TVsSAnZWagAA92YP/jfBmMdEB8pepqPQgoBj\nEwXD/rd7pCgmC0NZ9wj8jdcpHSGsQdBh6klq8Kjd9lc3dP9igrSrlBKwPCAf\nBVsoUs4e9u+zGvFdHmK96oQzzmThgPOxejrib+S1VZMiLearLDflBYx8Oeke\nA0yM/zYmH6zn0pNlNYm+csSre1T8S81jegGmX9a6Y4KHE+7tfOCPoYMgYRyj\ny5xdN0PAMuW1eJSXJ14YSOfdpoRME8pGDc9K+21x5pYidD5x30NEJESEVrJ2\nsis6Krr6utiryeLiujhc3bgz/bRmEIIdG+HFcHlmX0GR7FWowqBu1IFBi7Ji\n/kUNzOpyIWmpc0EgRRh6dl3q536JEelBK1neakmRkQ9MRXybpGcrSYsSwSS8\nM027rlPLR/rUJqxtgzVyOBZZJGdyA4BvYXHPh29jnGfTqkpIn8S9UffAqx+H\nMease2t7sakyxJN1C3kGLfQ4n2yhzgRxkzy+KdkGqD7k88PTz6XSox1hFPno\nWPSE+GcuXgD6w3c11v8j3IfQPfw5FvEF7i1Yj13/1PEbK3PtLc3KV/ttnhBm\nxHzVtmkO8aOwhjY3Lp40M35ahNTgSSZOt42gRluB+X7T4vgnHztD5B6cMAGn\n+vnSt6KH9n5T1CvmwvNoME8Bygkr8D1H5I8TzKlz7DzYtR4G174cy4TQfmL+\nYFKb\r\n=uLMY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXnnbYr5j+3Qzq2KX0EdzuQ+ZUNIGWbwAWxym20XJKQAiAE1vvgu8PHKszA1eUa35/dBotJ3l+5+mZ276iExSiP1w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.9fb79b3e.0_1585689636042_0.3252054149631889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-icon":"0.15.0-canary.9bd3e9e2.0","@material/mwc-icon-button":"0.15.0-canary.9bd3e9e2.0","@material/mwc-ripple":"0.15.0-canary.9bd3e9e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zoDnYmuU8df443Cacrrd/INxlXmDxnsMGYliT2C67e2DzB0q+0Xg42zbhuYqqCp/AbaOalSy/waDKgomuej9YA==","shasum":"8db5bb2172a386eccfadac0a1b8076992ef9c716","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91aCRA9TVsSAnZWagAAWAsP/jZMF4MSi+ECjPPcAd6B\naOFfUNKdN91wNOCDAIQ1pPPlHSNwQjghgtCIarLI8FWMB1K4Fsy0SGPW9OYL\n2EviIIYfGYbQ0DGuvSqBfLNOmoN6yA3Xik2tRy+vxwTs1Mg2FJOox17lEUmj\nPuoZ2oU1Nb9Ufw/5IH3OV0hEYBPbTJnbj/9n/7lHlzdNWfvwYg/R5pbUo+dd\nUSrHFkicMFf9yVOJ2ht8X9CjQgsbh1l3tq9CuYKNRW+VjVok8l3+9k+MEIOH\nw/K4zMukPRM7I4t6enZrisixK4RT2755vITiR6dxrmmXypwnL1itZGh2HMrL\nODz2Ng8kQSQL9JmIO+1qPlOSvfe4xKZbrb7BWdglv4EJ20GrXT676dKdEx0E\nB/ikX60xYHIJk2qhjmRHTvS13/J2GbcUzYHBicB/YnctXPHKsN1juCdkiikA\ng5ldwTJ3WskgEwopNbpPCMOJOSxdwB1NCloNH2QFbRlqhBcrJtM7LlGm773i\nR4gClPsBBhK4DqtreEYYQJal+waSRD73SM5aD1ToenZ/DuMQ/5rCw+2lnJ12\naFDP+eZLqn7WNUphy8xrB6nmS58NWi12LMJgUGkgny6aXLWY3Nf1w7X47x87\n6JcbZASEIXGzbJWXkUpRwYqXqvIhRHHQ4Afdm3WHrjZ3iVguRxG5Xg/RjQDz\nxwrW\r\n=+puW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAi423Dw8tKJzW2YSXs3a+fjs0gqYyCC7GQkpdMIpWPSAiA1ef3nCZCF/SmWiZONv/nf4BzfMwC7hRB1S02hFb1rRw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.9bd3e9e2.0_1585700185966_0.7788450213684683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-icon":"0.15.0-canary.072084ab.0","@material/mwc-icon-button":"0.15.0-canary.072084ab.0","@material/mwc-ripple":"0.15.0-canary.072084ab.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-erHbWBXfEt4rWLQQLMS6ceQVHokFQTcUlUiULZP2eSZTXZy+psg8aCuvTAdOYQGaFvx6lEvQj3oBqUV3wtZL3g==","shasum":"d677c35d1129fa1391f20506c33a19b540a3d6e1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.072084ab.0.tgz","fileCount":11,"unpackedSize":36738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAMCRA9TVsSAnZWagAAnHcQAIctHEWt88/6vtZLeSQq\nqb/76JzOSkb6xRjsORl9NXAuTGyqUWw5aSEReykEbyvKlVGBusi+9g/qgUhn\n0H2eb8OpIezlonUZl0pazxBLMqpLvO9Udd3j0+jcQg5i89e+11Bz/AldwTr1\nD2gUa3IBh3WZQzYQdQENU+H+taDsCgZUVwcgvAmUu6WjfHnJum4BpF/NVS6U\nDgqf/Vf4sHkpcpVjtSjhdT0gyt9bYnJYKEVBhKXtop51F8K/2D+y+xdJc+4m\n8avQ6lM5DUggNL42P8tX1LJrcwoiQS99w/lGhbzEmK3iOKNUwnxQhefp2mJY\np0OfioJ2tSoF5qjYhFAszU6SkVuFHDRhvOJEfdVElrIBASWQxbQIKvXfaVnq\nBpiYW1PQzOBtzVEdzdnAFYI2Fol7sDA5fSEm9W6WqeL+XXn0sT3h8iZQsOMI\nPgJgAXf6EXOv+xCjB0c3jRKTpw+2/FfxnioTAnIbS49gVLbTrX3yy1J+CKQX\nUWdOBa2u3ee+2NiGyjrw+xCmXbhRfPBHEauBpE6Ss7yGO6WNiiLj4O2/tCe+\ncTa2hNCzEGYi5+Eb+6w0CfGJ8IDkwlBepJ+RwTGf74eNU4/TUkLOc+k+yTK0\nWOM3CeAFPj1+W7zJmbVfQ8SJNvznMXU8pzQPjliTUQW2LVd29gKblpTv1m8P\nCp/3\r\n=F3d4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEiuyRa5FWv/zNp5wsMT6cYVMro6veqT/3xssy+EfW3PAiA4Gxq/Y2jvThMBCuzIoFROOfH7szAcaUwiiXV15l4oUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.072084ab.0_1585766412352_0.6376115327453726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-icon":"0.15.0-canary.4dec04af.0","@material/mwc-icon-button":"0.15.0-canary.4dec04af.0","@material/mwc-ripple":"0.15.0-canary.4dec04af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rTZntgLr0tS0zFUWlLm/2dzwT1SWCA4KFcTljq7f1OFSLyfKvkmbR7j/HV8oXACJz+v7mO+QWTjtJLZDfe8nOQ==","shasum":"82d0abb29b1b0a41867848df8c2f8f6d0ffd99f2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.4dec04af.0.tgz","fileCount":11,"unpackedSize":36738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zNCRA9TVsSAnZWagAAdkAP+wRtxhGtNbDrLvuCLGFN\n4rgnBVLZ2tNcrYOOAzHnzNsABvMEYzce1QeVsLdEjW7Vw4bPYTLdrmVIoSGQ\nhWR+liCgu3g94zTLCORCTSx7LbP/1QD6uFFtrFg7X9SR0j1wu/0IwwqPRPcQ\nTWRDIk4fODlrxtVg/waJ6LFHyjMjUNovFDVdYzC9+rhnpMg8+tCunELk5Hef\ntTuLa5CbX6nGYujegizE8SP/+Fk6fBaMDNcGrzaWbSZREpVvj235urGiT3xE\nafQNXrJpoXpsDxp2+sVKTKnAT7J5WP/u0t0UE5Bnlbgp2OT/mQL225w2PdbA\nct7964QAWJFKzHDqGSkYxlBzFt9I4y2Bb3XM4haeLw8J2+Q46XqEdvzQ9+h8\nO+ZQQfu1bCliMDWmiSLly0kmB9H4cbCVUfk51iwnNgVcaF9hx0yQ0ZgenIDQ\nS0Y5ReftXxvvrSzTy8EBhmzHPrwYRXL8WDYJ+G3sVD2YqKgLJI5cJJkrGudj\nc+vVCamzJnDatUc+TDJgxgWZo93qXvTLcqoqzQ9ChIyGqVsJDM5MThAPuIHZ\n3zj3FD5+TDCyUpFvYnaDfuZfXKV+HayAAR2buGxFORhUqR4LaLxmGmP/7GRf\nzPd5NgqMSlCWXAuKkdDZoM5d66aslzHDXKgKuf3BE5bYjZb9gYC4eGAK8iuM\nxr3I\r\n=JV4W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6gQ2SKcLXfL6T1/J+DI4VQhgYnvkyY2xrlq/QtR4T/AiEA2iVMwmeWLUAoZ2Dko2wCqRqS563C69eoFaiA11/bDSU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.4dec04af.0_1585945804696_0.23163666402169514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-icon":"0.15.0-canary.9b676354.0","@material/mwc-icon-button":"0.15.0-canary.9b676354.0","@material/mwc-ripple":"0.15.0-canary.9b676354.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oDzLJcZc/fCVyLO3Ba6yVm4rdyfwyItmZR0h5/HlqciznN/4hc6CgkbfDxYFMh+Qy1KTSsKNcFS0MDrtHIKJGw==","shasum":"5e94690749545ede96260827f9b02b8225dcf072","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.9b676354.0.tgz","fileCount":11,"unpackedSize":36738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zlCRA9TVsSAnZWagAAGYUP/0PeCccQ5O2aZTQ9Mkde\nIoKFTGsR8I9XjTpX10j0NIFCNvvP/zcXYa6x5pHC+2uV4XdDNubfqLqKBw5g\nrJe616qVCYTiFHU0kvD9luQIsAg7UOjzN1v1yD466duKntnZiQX/z+T0wG8i\nUilZawgryJUg1b6LsIBH61ji4dBWy67QZSkI3yg7xDHjfe593LwJPdzQNFQH\nKpKgK3zFFtO1BBYtsfZt+g5goqaz2mZBg2tJVbAxJQu0B7EicE/l2jJ/GxpW\nV6CMd+oIalN903BqAKVIzXqAVUi4KEWqbU3MnMhLiijMOQEj9USJvesmlB/Z\nJxtWUDOPFAiSPnwNisIQaqquqMuq0oWS1PyGIrLro/c7e0ykTPIeEJCRmCmi\n4mZacsffbPJ7b317YgJri3z7BlgeKlWCGjw6+dA8CMk9KUCq/rNE8pL/EHiU\nHYFl8qW5SwTmL2rLTLMdneRW+aYJEcR88Req2AYJKgfoIYFDFLeyIRpQMRBf\nbDr/mHMBIw7o19EeithHou/8L7GY081iCl32gubj4pmY3ACd6/5u7BKmzmcE\nvrEcxdHtVN9TpjAKJVMVKjastu4Kk7TVYBgqbSaSYCLtyMIIRz/L3NNC27/W\ncSngYMy8aLZ6iH8F7boE0cl3j30mQqacgppV0it4EFcxBxlMnU30qkqeaSih\nsGfT\r\n=fcZk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSg9TQLO5Np23mnhYShIIwb7tV6VZ37Y6B28lRJd0v3AIhAP4gw6ioNtV4fQ0osZMBGgjfF3kqG5m/1ZSiKVSTfLmp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.9b676354.0_1585945828924_0.11022328974170548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-icon":"0.15.0-canary.6b946095.0","@material/mwc-icon-button":"0.15.0-canary.6b946095.0","@material/mwc-ripple":"0.15.0-canary.6b946095.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NshIuPcjeDrN3m5YNt5MIslSrQlvVhCzYOdpvsxFbB0AAOVmAR6g4HqKchh9VQhMMXf0v240+RpMvup3L0XrVQ==","shasum":"c26e26dc1611a91ff2652ae6c62c438b578fc834","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.6b946095.0.tgz","fileCount":11,"unpackedSize":36738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mMCRA9TVsSAnZWagAA2egQAI+uD+IVkyXnfWRaJJZb\nQBj2XBJeJ1Is7z8qHiszp2R5ICvkfOobdsPg0iPw7j0BIWGWr0HSxBg/Aqbc\nJSTamMAvWOToj+GSjH2UmPcZszg5A87sW7zn/uODQvtCKSfEX/kAWwjLqdwN\nt/S4WngiFIv3zHJ7iP2QF8io6ETwBLdeH4c60lbOFmJIFR86w83WwdumrynH\nSihxs/A+v10iCccvaihKtW0LqavCTMPGR1rOiMDwTdNgJXmVxuE7tmxoX7xn\nHZYKQzKxE/EdIFrHgR7DFuhPG43zLtisLJNpOKSkZhenReZmCGrmSeYtuzui\n+Md1R4CAhYvkOaMEqPgg/kAvulCctYFCMt9pJY+IDYaKa5f+HDz3ZOwYLM/Y\n6E9O1IIWhAaauCfWC47dlT992i+T2MPpDq8p6/TMHrQrlDJCZsCnjfKNqIAX\nuhtyCdpd5PxEEHAWHEaqPhUqy7Cv7d7+ZRknvall9KkkBbxG1itS55O+Glfj\n1sB3agxZ//ZdnX7riTgSJaXurokaUfz0Y4exZhkoDgdwGL/TFSAb+KZwxA64\nQVf2kU5v7bfAN1u5PflIyNapcHMm4sGJAmJuCHOVSQ2zuIoCUaGKJU3Tzn22\n5n938PVLfxmoSRPdnQ8e6Hy22h5R86CAZ85Jux4CX5l3s/N8XMHDFxnvzUsq\n2OWy\r\n=NsLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3HYpDeYw85VZszuBbhaHDmpngs+dzWvxMEZ5yRixBTAIhALovx1KXyftZVJX6Xo6JPrJdNlh8aq7jN0h2We6tGagL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.6b946095.0_1585949068573_0.9174668443278502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-icon":"0.15.0-canary.5ccbfaa2.0","@material/mwc-icon-button":"0.15.0-canary.5ccbfaa2.0","@material/mwc-ripple":"0.15.0-canary.5ccbfaa2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CNqt3rjmR5ksnnz9Y+TdL+fWC7HI/n4L2CTiasMDpfWYNrAVWXi2b+IX+LUE6fQUg1+L0pvMJjkU0VGqLr/06Q==","shasum":"d3b4f5e00f59da510b7e7b625c6c1f0c7aa2811b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6reCRA9TVsSAnZWagAAM3UQAI0TKzYW3rOGybQbs7Hm\n8WWYCJlysbIdUiLFAMlHBQC1hsSHeRr3BR2LV0Vx60OftqgNFrXnK70vE5C1\nFAQHXU0tCy+cxTOopMKcrYmoqdB6dowgWgGU1O9p5M7pi0EAdI98mBTvHYKb\n8dJoXISLsnoDY7lVouwSLfLyWtbNHeuDN7wAOj5uWOgOMQbJcPuH8gmZsCAh\nyxYUbFEReXi9KWNGSMEIxS/PbfMPC/Pr3YxBoE9fch/B9c3FkE9HgwLmYnOa\njFizA3EQD+M6iQABuY6b+q93Y+7IH6iNxMwyswJoUTD3nuCOpBrWN2VXLnnS\nJytwhib4fu87zu/BM64588rnaj1vfEpVx//loUG2D4yKFkKZg6/yzCfkcqOV\n8yh+kBYaT/yXReUWuiYH1SHU+1aIXU6alIMG8az9VebCmV0vdvSLK3LI7Ib4\nJIagJNJJXIQC8yWkKNque9Sln2LQ0WgmrpjUv9E/PCJAecZUI1qK3KRN0dzJ\nqGStygPQTIRCI09DvMp/aT0r5dQGcnavfqmo2f8y2uy45oCN31tWxtZA6ddU\ntvVZRAvaKI5kYmDSzDnN0r9f754QN5ZNEcuYbQDdKljWTiObS4ytCGy6NFNI\nDW1AyIgjma0JzLd/kSomeSQ2OlNFjUW28kHnmXHEGF3aq+pn+Yk9Gdi4+bhM\ngK3t\r\n=IjBX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5o9VKg0z6AKY+nqvoFF6tElLXYXwqABEICgivUGO2iAiAh6StO9vO2/ypZOcxYa1e3uaM9fch1rJcckRBpB8azMg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.5ccbfaa2.0_1585949406257_0.1391863856910449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-icon":"0.15.0-canary.a0ab8772.0","@material/mwc-icon-button":"0.15.0-canary.a0ab8772.0","@material/mwc-ripple":"0.15.0-canary.a0ab8772.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0rxrQHgZvvM8uRlUjBBVVPklAf/7XZBZ5yP8hk++p0MN6mz978Hh3JjVv2W5leV2gvx7JBkWPoe6p3Oq8+Io/Q==","shasum":"9afc09c173cf7ac324101015e396e096c0039006","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.a0ab8772.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3lCRA9TVsSAnZWagAA3cgP/jpHb8mJ4uSlxWmg1Bhk\nnM+aTXYCEM5BDgFNHEcTN3wRPGj0eIou2GCqeLgstacrr7faR/5zCCt5XYFI\nvQN2UqEM2cqksflR0PDaSlEMaf6Cvbqpi3qxaf+GGg5Uatrcc9XyKVgn4Cpy\n7Fk3rDJ7nY5xAnBwCQ4VxdHeg2BdUJHaHLQguQgnl44vv0jnJVzFeRyD9JkR\nR6x/LrGmidmwspKto1cnlPtJEuukBsMJ4r+8L78UOHRQcDboze5iyUDmkCiT\n4bxscAaGjMOglwnd/FH8e8JONJS5H7K/eyjYrCVV0sdqC5yaVmgJuUt4re5b\nNlAUei4KGdmKjy6P3qNwmbd2/NqhsbqrV/KLJWIBZvKXAX8QN0UeNfk5l5HR\ntPQc5aW7249P1fZLQp0zYP04dYHdu4Af6Q98fV5PVHT6y0+kDGT4l1WlChHi\nhQrpQRFrZZk9L6OevxGOhD5+vn9yaHBPI1ZcO8Gf/SCfYkB1CPWvtDqpIPP/\nbXnrCIg93Xt84VPSkMPENPn/GF7Q0YCkP8wbToQah8I++bwPwnaWbFF3DG/F\naG5Kdk9oF9SqjO9JxKAjL807/8wZcQ6ZhgcozxNTRSl5/xpRe7y567ivUv9Z\nsiyqLBIH0pJi/0YqQa2uxTcwb6UiYtdDrDHSpHRLUD4eL+9+xgdymp9YhZk6\nwpWt\r\n=Loqg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8yo+zWT+qL50ftvdn/WCbrnzabORsBJlgYPt6WDEilAiAu3n8XNqw3czhuXPaOdiBeeKs1bUJvgpvWktTyT5KVIw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.a0ab8772.0_1586290148724_0.6658772088895986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-icon":"0.15.0-canary.8d352305.0","@material/mwc-icon-button":"0.15.0-canary.8d352305.0","@material/mwc-ripple":"0.15.0-canary.8d352305.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SOhsuBvjpKR3ovH2QZ0PewQw3K8XqAi3tzP33Sf+pw3rkJB1BXRr8Uy9gYfHqAUs/NMQD6QXXcjpdEuY465CCQ==","shasum":"ca23711fa6f02601808016842311a31626051c5f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.8d352305.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPPACRA9TVsSAnZWagAAxEoP/jYYcUE+Fk1MZC3ruR8m\n+zGfuLOvphp48HQLw8+1uJcCc4TuBVfyrEXEwPlCjPf96YBkh6Ub+byPsrmk\ndwasZQ16mF1mxvnT4djbPKukWq6C0y5jEpWcPys5M3mfJStTIio4HSI9aipr\nA9prDVWGuYSSRJmMk9W4PJz8YsH44mQnCZJ5AX+jsHEASEHPDDprj6G/9K6H\n10R1gLCxY+e+q6ejAnHHpw2ShobSUg8o/H0ORFH2bJEyTFMqDvJ4Oc8DOHM2\n7oLucCfWFGXCuszgmYnODPtWLtulsWsvZ2zqcKBLVck6EwoJOhh1KSmRgeBP\nT+l6+5Bcwe1LWvFWe/eQE+NKjSFHOSmtbRYRE5J4WPD+X7gdR6w37MAoRvUS\n1H8RRVnEx5ckr9uYFKwXWwQTb0cqfiuNjc/gJ9m8KcyVrIr1SrCaxPyZ3Vku\na84OlAtbZ/DOrE1w4A/PRFcNw4iKhDs+HU+S9sDiCGp6B3275c5jstF0sCDu\nAV6tPTtEd65CcKCzg3ksjaWA4rJ3WvC92ysMxCzECKCbJT/1/4KTIh0tD70F\nPeTDIxvocSlyc6jYCUwLsf8yVs1rmDrsvvVR3wSsOq2EZ/Lr5Wv/OHreb4lt\n5pgCq0xJNmrvtLVlubzxixbgJoqlF4dZHcHwLIm335A2wADkYcqlABzomgib\nYU8l\r\n=OoYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD373PbNbCYslBfETzkQlfl1HIxrQuKKINMX2cWpdtClwIgQLsd3MP+CK/NWNx5G7szydCL0b++NJH/SQuRIzm1Xq0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.8d352305.0_1586295744443_0.11839183580182944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-icon":"0.15.0-canary.31eac79f.0","@material/mwc-icon-button":"0.15.0-canary.31eac79f.0","@material/mwc-ripple":"0.15.0-canary.31eac79f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZCSDnEHWFXkuDszlib7AO98B4VbxAuMe7VZN372omr68BBPMg36/Sugi/e2YyzbzKBc2kISMl+ZHZbKlOp2BUQ==","shasum":"824e3dc9ab6382cd2c1949216e53c0df2b1a237c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.31eac79f.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdXCRA9TVsSAnZWagAAsNIP/1hhDKm37bllmUpa5p3i\nr+B6DlI7a9UxGlqvOTrirzFXVzcWjCqhY+qOV9J3oFz5IhsY6RqakA6Wdlbi\nGb2yeCTB/lC2BBakeaw6A5QVamyiZLwtGpeewmUtwLIAXx/t3BaEJkZAEilD\nzQoYFQmxm33jUigX5jUslDDmkBZ6F4xLLkEDVhPn2mRmDjhVlL36iGeIRNBs\nBKE6sOMjF9S1382sFXKPPn853XX9oYSNg1k85hrYY1ImqnBSjoirROuJdgOU\nDxfETxLzAV5uOk+cnRHSyoKg6jGE8CcVR2d0X7RRaIGNGXEzVG6MqcF5KXO1\nUV/9S1NjOBgtDn9HXWtfgyxCQ96XvuX5wilCgOe99k8uiKE9QMFmmk7Eu9yE\nJBFfTZQwY7AYQNW1GaCKLPVKiLY5NkPu5QGHIifEU40matjZuYwstcg50T11\ns8dFG0r/fYWHs46fSXWImJSgCZ+8hkC2MbX5g2L5KnjC6NIFjBm+wyUAN7Qr\nosa5IPuRmzbbGj+mQRWF0x7BGvhZ72vqE29Gql6oo7Jh9RGYNaPG5MPYKTBj\nsizF/5Q7hPk0C+E173bAWHuS2JQaKCOCV85v/07pV0+ULLEvrs4pQll9NxJA\nyKZKT0is/+cXvi/+tBE7a9lkfRxdyynKAyXq/2WFPPZoW3Nf9N+swvQf7xLY\nWUsK\r\n=5+Xa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICg27WYGKUnml4Z4U66fEtpF2z+zqmPgjtXR0WpuJvxyAiBy8VuulmWe9NHSk7PijDGW6TsLB4qPdrvthpoLc38U0Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.31eac79f.0_1586296663096_0.7744446094955444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-icon":"0.15.0-canary.ba05565e.0","@material/mwc-icon-button":"0.15.0-canary.ba05565e.0","@material/mwc-ripple":"0.15.0-canary.ba05565e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-kIutSAl9aWAIbPjPNPfg/VeWlbF6dworUEABvbMiYnRnprzTdhRbO93oiStfGnZcMbVGxeMWNUE6dPhCbGxUZQ==","shasum":"7f6ab909efd8f900035fe65d8bb5d336c1c467f0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.ba05565e.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgrDCRA9TVsSAnZWagAASLAP/jmpvvQFs2ClJ76XVXm6\nY30aRJ/DCDDi0Q3h1AGF8Iy0hp9kJy71v++3cdnAdKjpKCDeIRgxMB0KBbMc\nqNNpn1E5tUzZ7s3Ks2LyHlPamMMizLKEDlNecabk+daxY4P7abpTJ/LmfcN8\n17FCKSP/dkcEQEsvXxQopoeQhu4xR/vXayxRkX3OgFfzwNt7hQfJSd07EOPn\nFXgMqRqYPAK/nxxfknnjo2kdC8MiJ0dFY+N+eviOIAIkL6eS+S8dyd8uoaMV\ndlqRFVVfp8BQzAiHP4WV6VSWk2+hbZHXLDSyL9bCSkdzZ5NCF/fqJMhHWKNF\nFnY1MynlvCmaacIl/9k/KtRY0ndvbh0QpREVI8/LiVGFiMjW3FvRKZpruBzq\nHWWFmOoa8++WhmZS9KtLBa6mABukXYRbhyZBG6mjv6GSBU8rbLwhSiSh2mAD\nYAYRwN7ppP1BKj2Y75wl78zcAouAUKSijG7Wfdjav3igFzwPTUzSzJVRxcBj\n+hgx7RnJcYTxTCbfMtw38MBcUTKdF3TLRCQXgGf0q1OZshDZ+bZOAFqKZ/Ac\nuSxXimZMCEYTXtfLQiYm2RCss9M+Bf+dT7ZYGVBggeC65aZxeN6SspJ9xM//\nkZh1D0zLEwGTexD2rEvwVbdm4SWCy3l5c/nrrN3bTDMcIyFJCVutxMSWg32z\nD0Zo\r\n=WLp9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDk1IA/+nLyvEwW1zOV58XFcH1FyW8yVhg2TeZYLEP4AAiBB0g3aG8dO6Ac+n1SdjKblL6KDJuoZMKziQFAs6/ZdZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.ba05565e.0_1586367171325_0.6701549125983157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-icon":"0.15.0-canary.25099f79.0","@material/mwc-icon-button":"0.15.0-canary.25099f79.0","@material/mwc-ripple":"0.15.0-canary.25099f79.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-3qwKqyx3Mlgl10GS0MwhOMKbtaAo4df8Ql3ay2jTlLiLodwalUUYMeHM0f0kN2yM/VCk7i3CH3eIsbNqQk9ATw==","shasum":"f569a50c99062c284cd0b3f186fd678ccdb4c347","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.25099f79.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKSCRA9TVsSAnZWagAActcQAKMG/tHDvHTvtBWmu6rP\nu+PEAQpvbd8nPMv8kM2A2NJsvwOnYa0UXmmorTa8OWgO0+NBVoOtxs+cYHRb\nScqaoeDSqPx70Ppy899BOdu1kM7L/6Xx/0jbf3h7DpkdpVOceLXzemM6cE1a\nq113ZVAPgEsCZW6Nt350DdfxR7z3zEF4GbDSrAXLthUZQEr98KdP3kdC8f08\nKq/ozfCGtiRHtRC73Ml+60bvDyXl6Pb8zySBO2NkP96qWCch48ih5L0ry+nn\nOoLI2TdvBJ5FbvsGkC3peny0gcp6A4Fpz6Bd5lQqxK016IrRhg3001hIBFIJ\nuyIPIXQpQxgK6pBzGyJCXZ9Zmpwo5aLe7++yqKQqL4P+i7KkT0/ObF3v/4YA\n+ICZSVrtIAvFyDsSr6iu0wlzGLczubBeMEuQe4isGD6ZC7DxwM3ovBfBic2J\nYN7YlnYaz9h0u6NyyRfo2jRidBqKwyxHKj3LJJDiTOimsBjGSVQahx4rHBwA\nlkqy8favPwUyBLayed9EwzUET1HaJS9xIH7pWBfL4l6tunCDeJ1YEMjzTFJe\ng1rCidkM17tSHOMbx/375Jq8dlVUxlvFJwesz3zLjeoq2n1JRUH32e1szPf4\nLthNB1y6t5w4zM3Mhk7ca46F4TAe9LkSzIhxUx4cOKQ49yNI51YPHZfXG+sI\nNc8w\r\n=UJM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrigS5yFDpqRk6lu/9HCW7erdqVIv6eRIDL4R8MAtoggIgMnIQnjjTV9cLYFtyH3jyPQui5S5m7tugaPrXlFH7ZjQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.25099f79.0_1586381458072_0.14442448150541032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-icon":"0.15.0-canary.447e31c6.0","@material/mwc-icon-button":"0.15.0-canary.447e31c6.0","@material/mwc-ripple":"0.15.0-canary.447e31c6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-s2EIYG6GxmNWTz6L/C9WduDwYBOP7vsUSv5YwdmoMAj4AAbZLex1G9xXq6DmfWuWnjMIj1ajwxw5Clhc7EaNNw==","shasum":"e7cd5826c7d0482d0e6db6a8e550539f8f2acbf6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.447e31c6.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejneECRA9TVsSAnZWagAAZOoP/0m+RJ+YTfPR3pQphsKz\nNXfSYIhuHjWdqkpxiNHBRmZHTTfe+lOdnnvSAWkZXxFlsh3VhLsUDUSgO3U4\njMb9V4cjc1ZE+WTM4LZcRV/8As1Efev8KQK8vL86XA90Z0nUvHjNJTV2XUFt\nzB3/ppkdxdZN3UaqcznE/wsknF0B44iCdqQ7FWVn0kSvgT+CHL/Z3160xK5u\nnOWuVrS8rRFLjfR4PPR0Ql9Wt2exLSrSxlWiugxZBn+JtpnTaUraDLsw+bEK\nGcwLdowQJbsIaAyMsVQbnRPhHLhUW5OAmZBVuDTlz2vuDj0nk1ou5sJLmedq\nBOlKxFz9G/5MoFCt5I8YFEAV9lTERLPzPlaUqI0PAlY3VAUa+MK4C0RsEyz7\n/lmWCVY5W/y5k9K4Rci1bNVin3RYlR4cxj1cBwu4dZRoSUt/23aPq7mp5Jz5\nPDvkzaDZGgrbhwr0aPujeba/C16MbSfaEa3uoIBoC8TsAIXt+x1U+k5HSsI2\ngrCcqgv+AsRUoYMYFU26IP+/sLXzRbVEaCPFIPg2t0iAU9qiHNRQ6NbMnKne\nmAGp8iw+55CCqTFCcL5RJfxSD0Fhf1RXKUdUXlGfu73uRbmZwttdPrlRBXba\nlCpuT+eTEO6NCaAXIbF380bdLU3VlD6KOOpkTuBqE+QYhaHoODFCqEOuSrIT\nAxYL\r\n=PGMQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECQ4iiJHpFXr4f2aBsgDf+CbbDQ1icAC5B4k4HQaKjjAiARh25o7jKLiInoF/cUcj35ziVFvSxTNG2vCmKaRYaMjw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.447e31c6.0_1586395011812_0.2596432707242917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-icon":"0.15.0-canary.d6dd84f7.0","@material/mwc-icon-button":"0.15.0-canary.d6dd84f7.0","@material/mwc-ripple":"0.15.0-canary.d6dd84f7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-pqZVl2RloatTaQpDGZBnFA1DiRUEZKyYBvuJcCFo9riBcMcqQhUad6vIgdpP9CRaWlDyyD5ZGlcRaHH7vaG0Qw==","shasum":"5ffada8854361eaf220df9c05f58c1f0aa4b70b1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.d6dd84f7.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmHCRA9TVsSAnZWagAARrEP/3Fm2R9qRzGlzCibVAEc\nYYhrqshGeBkqhO6hnesSRzu6RJB3F9oXgbfwUEXKCIQ/iEOBYnJbDotP9MG4\nsI71NfzDT0PrTd1kifeZ03a2AhiIkOsEjX7rwRFP0Z62vtEXtE3QRwbuCUA7\nw75NCDoct5eDPYQyemiKwijyeWdcRvjKMB5opm8fg6xG9ODgf9tPcm4u4Pdn\n6++A9+yWw/9/1bozrmnwHp+jAGqM67KMFy+fu1Mr1sAF4IADfRc56JeAD7hl\nvDxeC+iSf3W0vM8XsOy83rFITjfMSXRWhWUEowEhCrvaBKN38cOCMOfpT05E\nod2gw3YQo3wG1z/63heYGC1/n4xqHammu6M8xDtxxVJv6mFHoNmGzfWZOCKh\n4toKE3egbN5aAWQLlS+8cNgWbRSy+usYJf+eYOc7YAEaagFme+wrHngD+in1\nlUC0BiLxOEiW0X7yA41ln33DgXEGQxuPIIYiZUOQWjczDIVHI+RlKxabFTl4\nQO3smore9EGz3nuvv9U0lKVyNsKsh49PjNcTGX03JqoqD+SX9QfKrIBk3ztv\n2v0eeVIhVxKTyTnj9O4MuQ0W0MvkYm1SEJuf0b8Aglk88nKt2C41dnEZeZqU\nMsj8vMI9JrXR5V02VOIhpWDYJVlSoWraOQqH9HhVp90CqdKuzBscNp+LMu1d\ndumn\r\n=SRI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtt4A0yWm8CBhdpQGOgFqxHS5cDtgKML9UBypgW4W+9AiBTmT9CXzHMjws4BGCY6o59Rw2Jh5BHTvF7M+3abSTHTw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.d6dd84f7.0_1586395526620_0.3990462309710203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-icon":"0.15.0-canary.9b03ee68.0","@material/mwc-icon-button":"0.15.0-canary.9b03ee68.0","@material/mwc-ripple":"0.15.0-canary.9b03ee68.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-heksqNVk8R8rilPJv0dn/Ecdoq36RCH1UrNNfM8erhgZiGasqthHezycFQZPWvZMIJkJE44hZRg8qKNXBopjBQ==","shasum":"e9105576f1ce98a524619be525c8782a684aea4c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.9b03ee68.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej399CRA9TVsSAnZWagAA3AIP/RCq+qcTlagcLGIqtJ1q\n39ayb1R5HhlY1XY+Dm2W1OH4dI6kC4SW+LPnCpidAYLiOO5qssMmgHMY7ctp\n0LPlqEuY1ZbxzoVflZdM6fxaoNKp9SaO+02/ZbuXAtLuHJcRYfrXBQ/Se8cQ\n/gAlw11zco2DGtFLegpmvSgu5BssX2MCgE1bXYN2ceYatRrqcrVU7n1l25/U\nK6dFxD8DUPZoUSqqnuqqOncBVSuLnjuXemnpLrXQfwl48hI1zRKCS3tTX6wc\n4Uwn1J+H7LEzfaMuWVgzZbU1yqPPV9oQLwAmmA1SFsKVE5+feSlCUmjhGgk7\nWKuNIhV7rOf9oicqzLfEPH14JfhPvDDsI6XwhSnRO3onmOzGEIPIjdwmntNF\nKbbCya2juur8tCrlYIzO8PQM8zyTXwOfVc/QDNFXYk/1VRNCDJlfZU/sVwMS\nSqvxodDs/mnGAKk2NoOg7z2YWvXFJO+3hsx78WB//18utpPeNBvNFh4N5pBM\ntOn3QL96aWMytNTW1HmFr0ICvrlHFj1LZgYeuo9IZUJ+pbTZcMDbB/+hu4VV\nOm1mkZnqOaTU2Q8TBP0RSC4D96rnyyCYpkYxoz++ttJ0yj2Ytmc9kh1JjvPa\nH7IlsJC18Hpg/xLSZSL6Dw7NUMGiubMSDyAfoztHLGn2bQipcvVySvoy8Wkf\nZtaL\r\n=vwvB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFnZNQ2ywxFDpzdQyj2lIgDNd+RWD+LbqQQhwP0/vqawIgMRiiNs1AcBsGIwgUz3U9TiLNPHMiPUwT7uAz5NUtQeg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.9b03ee68.0_1586462588937_0.5342402702060407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-icon":"0.15.0-canary.bbc25b10.0","@material/mwc-icon-button":"0.15.0-canary.bbc25b10.0","@material/mwc-ripple":"0.15.0-canary.bbc25b10.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-oW7QxsG4lBQEYI02TtWde4O8H6Rq6rxRpqe0POYw2RjLA/gWhhpaaz/xjdlX2nTny2Y6Nh5wvGEahCCGJOZMMA==","shasum":"db39de6c451c86688bc7879fc505c9ad371731a3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.bbc25b10.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPclCRA9TVsSAnZWagAA6F8QAJBlVcedfJ89GQXPptVB\nueBXDkBbx6UBfOqEivTF+qyzIeuHaB6eMIABwvIxTMeTRFDvv7nDKZWCodEz\noYluG7jeepiEegqhPNzfUrvQCl8GOKfNiec1rIkRhqoX2YAzVUEzTCIMi5CJ\n3y+7FWBOYlhAAtTHjOjQpvU+DhztesmGMKLiIhdyAcmrd0kGJ68ko2Yti/Us\nBYrE6tyZ70zMLG/YuaOkaIB1DEuxcReMgIWWqowCu5SF18b26MPbO1ncn3pC\n6FbDvy8Kwji8L+JDxnIMCgiT2YaYqOYq0rvDzMHhPYy8Ywiyx35ttBlx/dnb\nLTsUZesLWgQG2a08rjcJuW7vXJHDmUQiGL+VoCoLOZql4iCRdySWVxnBGNyh\nQF9wnMjKJWpZ7rO+8ywdzwQvyEvOJOx+V9PMhjEjVvmS3ynBvzJzuYvjyrJr\n7OmD/6YkOGYANUfmUTZoIGi+8Wn6zI1twqDWrGdOouFkJ4zyZTo+W33is4k4\naeb/usGH8aXNp44TebdiYu13CCLN0FqUiFgkb88Xrw7CI3vsQNtx8OwnIxuB\nq2+DLbn2z6w8rUIG5CMJlv8RoY9bZ8MkR1JoJFDh5MQ4Ss9Bi0pDCQve75cP\nz2ZYpEDd/7cj4jfOFtmAXEJuA5KocE12hRIdOTQxKa6lJkNLT7vSikYZsEDU\nLCLV\r\n=GVcI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5tH3ouXkJ2WOWABB6/VIKSPVTOYohEydxpW0FtkHMyAiEAl4Y/XaMAX83/sl3YgErWxs9lph02DdFUfLxwGjSDNf0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.bbc25b10.0_1586558757195_0.5996292528694085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-icon":"0.15.0-canary.339cbfd4.0","@material/mwc-icon-button":"0.15.0-canary.339cbfd4.0","@material/mwc-ripple":"0.15.0-canary.339cbfd4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lP1yfgVn+MFoAFv1NPm62boDz/sHIVXNE01wkDGoYWOOIPuDcGU/kwnSyJl6k5Y1sKjqOMCAziMnnBu5gUIfbg==","shasum":"6705eaf16197112cf0f498682e51efa50cf38c18","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.339cbfd4.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0a3CRA9TVsSAnZWagAAIqgQAI8VojYXdoQDaNTW3WfR\nF+RGxADo0fJCILbM2KnFHEsvtaxDzbutNPpUz4/lFcxL3VHWNY31ongDCarm\nmmJJbeh1M0d86Dplp91bvuNPAhdpmcMZrDO9hrENiMUtLutZej4bEpXykm1e\n3IcQ8woSUhYjz+XOCMuBs/9VbarQRuOvGc/34emLTmM5OhneQO7hLEq9uUqP\nLaH+SZVyGs+ySU/XwTEnLuom0Z1duvak/jFDcP0/YJ5ra5caspnkUt6m2I8y\nTRiVOfjOFISgtcyrPQclEYUGrn9wwOTACYcAkE/6ycVydOL3T+mhishj31P9\nqkqXARZ9SXn1OOwRLNzf87IxkJpsSeD75ShFsN0e72IxHnyEX/+hKwe8BZXe\nZfP4qFV8jyul5QuJPlHrzDsQFrLXtDXBaAAJVNMnyUpiJmdmgVcPB+KwTXDv\nrlQSECa7ZQyHnDnaRW8PN5+J1LmpzIoM6zbirltJ8L/gVR/kZKupcTXgySAN\nVM9y4qoIvawlMf+QTgKe1j9QvqI+mIknSjS3MnjlcP+NBdYmH2a6v9QII0cl\nB95Hn9hAuacnh5ZFbnb7gDouicp6sQZ7tMjyc3p3+m3gv82ltKm2OomJPmTM\n/D0n7Rtxq8W3qiVTuPsMhR+fD5y+b/TwGI3bHDb1/s6tm0iORfinaC2rUBBn\nSyLO\r\n=PYvm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDEbCqrm0sqL87zIg8EF/coptMYbOj/SuvsnRMc7tWVwIhAJmyCbbl1HFhMR7Uc2tWNb/78Gfb5ppzXCmm8MndVDYY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.339cbfd4.0_1586972342552_0.9214826787406036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-icon":"0.15.0-canary.b74ff19f.0","@material/mwc-icon-button":"0.15.0-canary.b74ff19f.0","@material/mwc-ripple":"0.15.0-canary.b74ff19f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qCyjIBhALmUlQeWDZlvU/ngVxSuHUfEhcrSWtVLNSolyUSbFwpe7kZMcNgnvVrSKTL8lUXVAmsKwwwEU4RKdpg==","shasum":"b919c3600a1d99089a112cb9807ec882e2bab128","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.b74ff19f.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jXCRA9TVsSAnZWagAA2SEP/3jl75ugZhwd3plO4DIa\nAW79vzDGJkwo3t3xHN+uI0BtstQYH0kDYdKhL0Ep5qHwNqGm2m43UraKM/qG\nZMq6trCFjf3TVMAulMgxamez8Sqkyg2f6c830MCK2pd5eEvX498UEKm2VjkH\naT6w6TsQ+tvZwimob1t62rcwVglR33zI/OBsyr3ddIC/2oU0Xqw/6+XengAb\nbR+RB7ifP70GOfRkYzcnkHh9FIR/AeKdWNdILXmQHr6Q2kKgo2WEQFspo8RC\nlo7yDA+SZ2C4Ysndy8KDZRMRQwGj0KWUl9qfS3NPTjn3Xjr75rEgld30NCao\nLLn0VUmsbYqyY0cUiSuqbQLKGNcU+VrcAqS7ZgHsh82foEJ6fLOgnULzVQsf\n3LwQEvma/RtenJK4RgTB7VWfny4KO2kRD6ArD7kgOl8T7JwMoRZ7iU1tIZ39\nvrzQynLm5AzVS3qIFDhBqCVdjhjBC1JyHbMZujU2oAVkInz20EK4vOoc+FNP\nS77tPR9PBzH0MYVz4arj6zMxZhEDgWJ3XwO3qOIbXHSVGLrn3+HZahqK4/y9\nUJ0mtgi8zR0pzs4kkvSZCAIxz8nbfZMlYOcdclI9V/um9IeCJ8vT5yDaN2Dn\nJfRNa716D5p25rGIQHOz+0ikMR/TwBu2oO3U3DgK5y9gBoDIZ8Xs7TPeMwrQ\nig4Q\r\n=J8bB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUBBftZ+GhShef/UBJVhCstWizLrCm6JJ1ukyZ6YyUVQIhAJnxsw7ZD8y0gMk4SisoMsF3R6EW4+ySlHoM53ShQUUQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.b74ff19f.0_1586981078884_0.5555963535942654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-icon":"0.15.0-canary.aaa16853.0","@material/mwc-icon-button":"0.15.0-canary.aaa16853.0","@material/mwc-ripple":"0.15.0-canary.aaa16853.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gZsB2Rw8lP5++JN1DzlT8+NivWt0OEtxrI2Q9B23QUF2XRSDYdvtYzOwuaKjdVyLeprVXXuKydxXwy2/BB14+Q==","shasum":"b41903b764e13724de6438fda8c2293abf6a601d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.aaa16853.0.tgz","fileCount":11,"unpackedSize":36740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42PCRA9TVsSAnZWagAADxcP/1puuN+tKF02Y/AIgoJn\nM/61mFe+xn7m16FbUuCthWfE4t86ZGamLHxOSUl/23M6AguzYaYsZYw/CIY+\nIwu5u9VUszijlr1JKxKCA4GDG0OYWrDw+8EvSmyCxwFwqPfm93NJrjWNwa+d\nM78HPTu5b17hvX7YeWSGpaOeeu9rHwJf9YrjbOLG+qpS+9q7vW3udzLoazom\nGBwZ958S7IUjM54JuVYXGnnvQs2+FPjcjaaYuBCUfNifQqXqMASTQocLT5en\nFHwPmHt7mZ8+pcekdmLcIOeWT5yAKB/U0taez7IECvB2VbEhz3/RCuwCLX0Z\nyCdGb4mcr6rdBmkfmko6jtqnHFpp93Fm/e0ok4Zh5tw+DdMXstWSo+iywLDM\nYNJ2Jx+AX4V/VKwizw41fXWTrvaFXEpy86y8HmqwiaUBQOzIOG2ETCrnoMpt\npOGM4XJy8q4ZgaMI7Y3Ph1JlcRpHt2299EghiCNmyE2/cq6VKabcVBG4oa29\nacKCcnuWSr1BlBmChHVd7f5+0yQOdRQHOsdHS8VT7KI9kRAm91g1F7dB4vmg\n37JfN1+CPphliVrf0B810/WF8gc8b9Lgznx42pwcl63XWPijdi9sXFIbK+Ho\n4O9MeQeLyQFA5LHZ5nzY+S3+mOPiTGz906ezorUsQ+OXT2ywILy+9NIB5PYE\noezl\r\n=hJKF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChvAVSHFvqCQeNLQmbOVq8YnANYnAdNIH8HggagAMfBgIhAIW05Q63YkqFKknIM8p1cRa/4tet9j20+2U+eF0/bP5k"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.aaa16853.0_1586990478800_0.5365426279088221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-icon":"0.15.0-canary.826b23e7.0","@material/mwc-icon-button":"0.15.0-canary.826b23e7.0","@material/mwc-ripple":"0.15.0-canary.826b23e7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2Yk9/Hq8UIT7giZ3h40AZgIRvHvzuRlaiceLPsvT0isuokMzwUQqkHvD2H0GQXtj6u9bcSILlJhQJ1Zmdo9nzQ==","shasum":"efb0daeb89b218736634ef45af989b27ac117908","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.826b23e7.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqWCRA9TVsSAnZWagAAMc8QAJMFB56+TuBMiwK0WBPR\n5wSIEvvjll8EZYtCIQG+RexdlrXk64xdBwVsrWTNjG8kIfccvCkjANisr63J\nOk/TyMOIW0Jo0Rw0x3eMCOeWb3WH1zloS1UomGslpQRvHAgVCro5FQf7Dond\n/BtMgz1YKAPZugS4N7ir7+f7g9lnnuMx5jGum6w1L5Fw/tXUSBQFGitmlcri\nO5wz2TuVWpleBpdCpH71VX6JFdNqKqUi1ga0as5nOaEgDcdzfW+J0l4eeY5J\ndPiEpdOC1eyXEdUFGlnnDxRGVMv7ceGelQXHZOkVjKpv0iAkRTbROdpCns2+\naJIqUKHfk26I+ydCc02p2OBvAoNkM2xO4bhSQi8YaE7b+VLtUPZSqQy+Sc9x\nz1hHaUewih3YENcNiwMHioQIHMzkeIqa0gW/vJ+nquVVajxaL/MDAgvu2KU3\nXh7u3kIwS0531B2x8bW1XMV9quVK62+CQafQwTLkfuihD68PBooTAnUQo0j1\nFZcLgNWxAWCvsAB8HOs2mC4CUMldDMzpiBNgyRvDkpLvR0OoRcK4m7ZUJyEt\n+1YnVasrWH2WMcC43nRjSzBHhAkn5yhNG+lpTlCmUJS7cokRhTBD97/sxDZX\nz92OyHUHHd5nSkmw8fdupzzLfaADWMxIe5nb1vs7z601i9C3MonAw2jD3H4t\nWPdR\r\n=voa3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/ID5NnV4714gCxOvVEclWuKVUFGfOYPxaG3D0MpHRKQIgZUMc7PnZuvRQdUQXwPAD/AAF0a68KHeEzr9fVDvVN44="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.826b23e7.0_1587063445664_0.48170648272409333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-icon":"0.15.0-canary.e1ad2b2f.0","@material/mwc-icon-button":"0.15.0-canary.e1ad2b2f.0","@material/mwc-ripple":"0.15.0-canary.e1ad2b2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8HA8X/z46lkKZC+XwedztV2BDaN1EaqMi5OriHYp20pJ7VhICq9RbXNywjppJPsc0ybhH/uuSHrdEtHIuN8chQ==","shasum":"86c1835a1336ddc215b9157f08f19b40c12c83a2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVbCRA9TVsSAnZWagAAzMkP/1FnkkX58EAIXe/T5hTU\nJxUGTf+AG9KHWKfROhSKgwF7Kgb0GYjtFHZ4ZgGXSwpKjES4T3JqZg0L3bCT\nFbeFW8mnCxgb/r/A8OtSHeHxWJ02vCHQT7yPqcCtsZwURGFJyYkFy8sGvDQl\nOiNaCzgzbOImgH8WlQhmVZytPF8XOyQ1Gyc5sms4XosOYVSrFrVAg1Fp6oRh\n0qougFo6BchJoI6UvKAWkpmvStm5L91Uxw0VEApjJZfBtEtIXhvbQzATiLbN\nbMPbIFiqQfqGcNjhJE/jHL71Xgeb45sRnuzWpimz+c7su6lahXnT2L1XY9zi\n7ItrRG9fGQ7MC8I4NTxdeyEl09aWfkwP9LA7lWL9V90Y1qgunTOqxgJmffKa\nfEugnTYld8ezQcQyBzLE90GYGihTG2hie9Xoq62c1kzkfBEKfpxh+9Dk0n7c\nnApme7lf2bDYR7AHl1SBDzXEDLqC4YbP9bgezR9hJ2/S4GqHoQKmX1ODnokT\nJZ6QPDUSBNg21JwiTXVXKfHFqOFBChcWTs3FlE1MAoWlGhDzd7/n4+FebSb9\nCG7OW9We2my9hufkGbp8BLb78a7CHeb1EDR8QUSLct8vzj9PCXdshy/fC7TN\nHK6E1kuBjUDk+M/LrADH+z/9r1Z6JBzxsY03nFheUZxE8Fz0gHsiECULgWV9\n0mIR\r\n=BVHZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLIeXiZvcVytFjW0GOGNwaivy9G7WJy9VLrddBU7KTHAIhANsx5nvcw0wBXQuORss/nrUXtvJboK1oP8BcDNIi8rkZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.e1ad2b2f.0_1587164506589_0.08012863603459408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-icon":"0.15.0-canary.bade5580.0","@material/mwc-icon-button":"0.15.0-canary.bade5580.0","@material/mwc-ripple":"0.15.0-canary.bade5580.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WArOw5Q0//9LO7GmNK4lzEbmN1obZi8YkYwIKMdU0bOGK0+NNthfY9tTrAmMlx3sgVQufVXo+Fh1wFt53Nt29g==","shasum":"b33971eb72671f8e008ff5943c35f296dc9a2213","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.bade5580.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjmHCRA9TVsSAnZWagAAWhkP/3Bb7pknWRgo/6q/1x2h\nXSAILgM3AEqe5HdUCoWcAk2JA9B1PlW9gmwVkpbTU44r99Fbe1LotlbGFk3S\n0fmkakwrzXMOPrLnwq28j0f5ci6fZe8fSAOn4h8eOwTd0ZirUoA2uMmCRHLE\nwz4KS7zdPN1+0tlck0xriVxr9xevkZYLyWcr+CNcccESgv8ptjufnD4P8PwQ\nRbleE4BNUZMQLAORseo66aRZ6SOlp3eA/cjDRNUy9KHK6ip3lQTvRgtapr2d\n1afZVTTqik6Kr+PNY1exaCNt9I6UdiQ4RgM/vgRhYkMBihbF/FbGsN1dp8o9\nYhWi5uik+FPNq7CZdd1QapNaabnzKhqybEOyYfowGWwhSkp2rc6+JsrdljwO\nG1R5gjee1Cx4jOeZk1wIMx+79zHi3+fs8deRUTqrfz9+2YOamoKLq3xGRume\nbFnvjB6AMfYhNew4JAlM1XgviOLlgvDynYAJZvIbEYoB+0IJLafZFs6hN9Un\n6EbUDFpL8hbxp/36ORh5LKqB4wEQlEprsOZ7Wg2KV2nBx9EacPdyxfY7lcGM\nLKYZuTMPO/bYCpAO7u2nlOkVJCbiV0U7nOwCJeqfa+VZe8q8PRryS0ZmndP6\nd/sGPKsn/BWG8cYaRM3nIijmAhBwB9gekuIkZnrDGJiQvvjegnfjob86KtrG\n+yXt\r\n=32tC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3xt1J+OwkdXUue4BK9wr17kwSuSUAwXUc39zfBglp1QIhAIimITLg2uRKJmxARzt4T9GlGY493pIMc/1dSG//zGL1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.bade5580.0_1587165574813_0.15826294000096386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-icon":"0.15.0-canary.dae38247.0","@material/mwc-icon-button":"0.15.0-canary.dae38247.0","@material/mwc-ripple":"0.15.0-canary.dae38247.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4VXerMhnxZMG/wLoc91CERd4yvOlmoA4vwlH6cQxGaicLfU10yv210L1CpVMx3BpSuAGyQtpYcRFvuTDdMZ8cw==","shasum":"e2c2dea07f7acaf4428c227ee29db427cf23057c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.dae38247.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbcCRA9TVsSAnZWagAAhIgP/2ySyS2pKuDLNEaAyMN5\nBqtLE/CwcprSW2HaVSurcl+WwXmJHGX/CaTfr+BA75vAakFQFTv+K7bzxMJg\nrqUJm0jqL80PG8WeGUW6MgslT+4tkrh/yh2cSHKQDZPOG6Z4xF1punV2141K\nuK0PgmgVIxi9PrR4BGciQk1x3hp0KmaSBvuhOqipM+PBddcFVQoUtyDo+D9P\nRBXSXX7g6EBCXdgplBJXDLoxmL9US4vhDJ8fMTz2+78jT+fCNTIAZ/wH/0i+\ngtdIU60wLA+Tvitv2h0IfEGFu0lrk5BMQT0j5pBnm2pjx470mryvQGyBprFU\nfyLrvusrTXXUDGesyk/98PKQLbuwBsYw/sv78W+67alU8pVp/+ug6S3MjtKy\nuUZxZgYuE+dRtGaVwhw1Sy1g8ArZ6e1vHQBj2h1xm8go5m2C0rgcWxraS3Bv\n8Drg6AAvmDx66/UP+1g4ck/ay6NpgqlYFwECXgq5h4cwKUBIF7zfOE5x+rv7\nrXpRGPY+jQXGCsOiSOWcMO89mdmoeD/BRl5moUQZORSW3r/JvbalmeUUq/hN\njGRJGYy+wOi0XGfMKUpRgTC3Jz7RLCuh0jRlkNucNCTP6aJemMa4+h0a18IO\nqj3kBFEgX8tbXZexjhM1B+/8R8lhQK8SBj5wCiN6uTsyJrSBw7PjoZ+G3rTh\n/2O0\r\n=964K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAaRJ564TkBFL1gWVqk+L0PuJ4sRMyTJZjtW+rHGwzfCAiAZ+IWzYxu7Qf232VbsmLLxd8uK8vqOmgea4OJqGL+zXg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.dae38247.0_1587168987650_0.6452571477401756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-icon":"0.15.0-canary.a04c0b82.0","@material/mwc-icon-button":"0.15.0-canary.a04c0b82.0","@material/mwc-ripple":"0.15.0-canary.a04c0b82.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-D8j9LWTmYTap50GebeMoar2bkZdTouJidAq4Htr5Xyh3WZ7nyXbbcp6XcvTVjRwrYd6J/Vp8DYwT7hYeGfqcxg==","shasum":"3e0b839590be193cafb3be3366b0d626134a4fa6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.a04c0b82.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkscCRA9TVsSAnZWagAAj8sP/0xdYRNmYwIkOqUNseyH\nap2ELaprHQvwYA2r5o30qIc92XwDsdwFm+ANRFsynJvGgw/GCgmemK/XHTHD\nXdlfnS3U+pFAHAh7NWmTNURZQ+RECPmqVCJMfpKh7/Z7xGHuJ04Xvd5ls9TM\n17etOJSlTemTxuVhRSfhn82Dy07bFUYEjKEgLNV664t6yeHrGgITnHvqqe4y\n1nVJqe88hSkzBeixkPdKFaMcJK83OOrPHQ/c1hRxQ9ZTi03CqbN4w0pe85sf\nYwOASvr7qjOuDNRRbSz2bLmbDjZlKNNvELcdy3ADvDz8q/IjAaaXO40m0GVL\n8SFk6yzy8kkN6Cd6Tp36D9PDD0ew2r1cHnl9VZoX2ukjY+KmMl/hiI9M1h3w\nxLiXsZ+6pFx4PCyzVrwYL3eO37Wh+0e1Qep3NKmcpMD6H0KLBQXiqr29NekQ\ny0QF9h9zZXdmtAHPE0NM1CmoaH4VTZ1fGjMtc4JUSEBJdkx3eCpbmOXhFv7O\nA9uNmW6aM7kbKcEtkqz5YwYpYtxxcKVXCJbTNF9sNjvZI6L+hDNpnqeFOiXt\nw36br1Mx8Q0FOcmTNQ33RU9LspfYfu0ON0NRiJXKLWOfCBejUYhopMV6UZey\ngNH2uCpZimuvsH5pZlamHWYOuTLLU+6ZtUIWgdH8JGjCZ+jgD0rpue7MUPrY\ndgAQ\r\n=60mq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKt8ZNmd3Ssu3SXuN8+fmJL1t01H16eS+wNUtcEU2eKAiEA93wBLMHNeTRXaNoONOS6pFCJAkBMAmP3RK9FXoqiD7Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.a04c0b82.0_1587170076304_0.4970887359594489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-icon":"0.15.0-canary.715decfe.0","@material/mwc-icon-button":"0.15.0-canary.715decfe.0","@material/mwc-ripple":"0.15.0-canary.715decfe.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-is2t/QhMTr85Zc/uR3u0pwDbbL+Nh8iXdUZ+QlawI6OiXmhIR7nZqKuNmYU05kz1YHXeMbwQCj9nCCMiAramUQ==","shasum":"eccc413a1e6c8d3337327a5576e2f28c3ff19c96","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.715decfe.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeneuDCRA9TVsSAnZWagAAhc8P/2CP9D0UAb16AyuGMZPC\nru8cxVr4Ux9oSTNPPNGnBiHwn/jhS8recICTZGoa8aHxfKeLj/Rk0KLR5FZA\nFPyvzA+vkx/DC/Lvv9rYmHfR7jAi+mkAsBxL52VIfUHFZpJsO89cpFBGesXf\n88dDvsPllw0mgZOLHSuahQZvBVBmv3EUGU985mW0mP35V9s3YQQSo7phPUI0\nrQH5IuQkWAiB6pVwUxoVhNtd+U9VawcTeVvtCRdIaMRwiDZ/MNwq0rKPcOOR\nrYttLaT9WkoSe6UX3yEkj6jdqBFFvinl5ie/0SYm6BK/TebwSZEWeQV4RPbw\nqr3sVNN/S3+839MLuxNj0TUWgasxFNcq5de83//0Dg6YIyB21FFUX05RfLoS\nmxokQPC3l2IIQ+jBLHusATaK6z9A+ZpDQohv3nCfG3AjprgmtOz5kWyh8ldT\ntzVTYpWnHF9Z/iD1fvXkyiaY7c++FHcoYwWSzs8DdzgBcjXAwkO3vB+McvK6\naMMiQtgMg0Hjx0ZFrLmG8I8yAk8yyMHKzWtA7h994QLDlA8y6YfcKysoB9s/\nQgEP72EQBarfp8f5tQONqS+z3CQ5VnNh/kFGiSdLhTG7mEMxxq4RqeZCz6er\nafm4UYwsAv2G4gBByXQjKSvI1F8glEtZ0f0P2an/lBzm7N02HrYBDUSNwvng\nINVJ\r\n=disc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOChgoxK5J3m9p3cG6/tufI/EksMflGe0eEr7F6Yv2TAiB8Ea5//ECMS6m6UfQY5ttOkFazceB7RMs6w69ulkjZiw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.715decfe.0_1587407746553_0.01810026895638117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-icon":"0.15.0-canary.c862cd04.0","@material/mwc-icon-button":"0.15.0-canary.c862cd04.0","@material/mwc-ripple":"0.15.0-canary.c862cd04.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-M/RL5z3ZoPVC66e+g1HKD3S/ccoaO9/RrGtDw2SXS1L5JyLQimFqd/WoDbH1J8qDOahfLQFwQfIn5ii0GIrUJw==","shasum":"44f3f6b4a5a5ae855aacc23cb7a003c93afc57fb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.c862cd04.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVhCRA9TVsSAnZWagAAD4UP/2nfms2qKfN5tW3Vu9vP\n4WgCHUW/USsz0N/EMBZ03RHnjt5rFzoWEEKMQofFOI6KsjNMhxkdB/AeB+OV\nHl9mBfumOHmp/7+Bugsk+U2Ff9UPpDuUD0biWzYpTxhVT7wO7SgbbpK84VLd\nARjSoRTRX90Ukb5rVnnnrmvw45UFBJ6W8rSK7tkBFlAqkwsEFy8K9Uz70Esg\nHz1VA/w+Y79J/YOBpB17xo56mTaGy3nR++DY6cLUDAUqBkWJsdda+P1fhWId\napjpCJ9eEf2ExW4uY2ooScYqSQgKVT+FXp32KKbqDVsTXJiD+UDtNNt7aTcZ\nMmebjuzn9RKdGqqxr7suFxUDDosg5eLnuV5uvXoP0MPNbXabcbmMYb1kkUYY\nyWIn+96mFem5VF+V31qtAdUyvOW4SDT+VDISEyo0/14eTYrbno8m79KWU7sj\nnDa61RMjTVa7yAxKVVLOg021rEp162DdCNGVoSpGf4O+v06ekDc6nvEgllgd\nDrKCHDHJn7ZCH2cm1a9zyx+wklbRlqwnEZ4Jx6gNAbVfg3wfy/oyPlXW5Pwj\njC9acvCqtiqGJ6iLZM1iF9ZYqBqxQw3SU27lD4dbc+zbEa4L0SQAL7wBAsEJ\nnsRDpqGsovZQthFCcpTAfR5TT6G4mhYzfM8BQ19K3h7zmpKziCXI/uesGUuW\navYS\r\n=q1ln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgL0L67Mp2ZrBhoukL9zR3R6g/wNAcJQka1BsZJGoy6AIhAKuYCyC5qngSk5wTmXHb1zQ69AyA2eCGeUW0PYISR6b3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.c862cd04.0_1587418464515_0.8912858082174369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-icon":"0.15.0-canary.e9b01b35.0","@material/mwc-icon-button":"0.15.0-canary.e9b01b35.0","@material/mwc-ripple":"0.15.0-canary.e9b01b35.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WG64s1fJk1LKQAdG44lnmyluaWEWd1H/gnm+lc9QLDpdnpumQzvalD6O2U2oH6cHnbFwPBR0fo2LnceL+NbqiQ==","shasum":"1dcb3386563eae69fc0f63191175bd143085a843","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.e9b01b35.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBrCRA9TVsSAnZWagAAAkcP/0gndjF9G6UMijshVkij\nGhrY/Pl9vZTbvhU0T+fgzd4rQsJNIbJM3XtvgTC27MA49kSBUI0Nx5UiWqb/\nR+f7KcVccuN7vJdDkCf2XGbegfYreg5xPcq3qplC6Dxs08XlU/30Clx2MlJx\nih4OdoATsUqXBjHDIhqEuY2fGL6Q3cx5XcUK0sxD3TreLvsz75+ensQBMhBt\n7sAJlaFHMh/Tug9QnJfCWPbbv87U1pozrEp299mGW0n9LM6d3nd20OKowc1t\noEfMkNvCqkURC2QLYf2PbwQ7e0V4Q8hEq5HCQl8zF76bYrLzw01aZqq2FArB\n1JqYTi74CmsZ7Xk9JcI1WpMGl4QS/4aK2ODxdtkttbMdyU6J8SpxXG5fEwq6\nb34m9Mr5QgqXiomIB8RD58hpJ8+vTtGa7PDSe6oxJkv82YLoBCa17VR4eSTt\nZ4sEmJ7XbaNhfm9QsgBNEugCzf3KUgv9YXQ5h5kRjmUeeHSWxTKP/tHy9g+H\nbjYv5+SWSodSLmku8pTCtCMkSPt5q5zjhLAZ4VtIEuRuylGBfjkw6ZtJvakR\nJHb5OYbbMqnzsazDLxwHi/RNqQrY53y2CZYeHDQ9yCIH9VANWVt42hmfyZ1/\nJEun3epMTUXaIEf9lGDv4Q+dybm6p9mGNzMk9ozoQxazKN9S9YJfMgi/c7p0\n1Tsq\r\n=AUgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgrXuBQxOm9J+P5sJeb9NFZ7Vwn5lqyillMcRUU3vTEgIhANp11jrikfnIfTq7sdv9Fkm8gJDuaorB4LvMvRRYztjw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.e9b01b35.0_1587425386916_0.8810975010117259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-icon":"0.15.0-canary.ee7e8989.0","@material/mwc-icon-button":"0.15.0-canary.ee7e8989.0","@material/mwc-ripple":"0.15.0-canary.ee7e8989.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cS+PWAFKQI3yq0ssyV+lAzMdnHTb/Szux5LDOvYusGEUowN8ypAk7uJbouRi1ana2qc/dipsrxdoDbDe8MxjVA==","shasum":"aaba758e62481d303ea8c170cd0410152149db43","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.ee7e8989.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOZCRA9TVsSAnZWagAAUzQQAJW0hD1GgrT4656vd77k\nX1gndzPnEs6KD1wwjQtls5Xn3ZWvxRoQq/rcGAWy9jwLDBAMGF8lS2qbkBFD\nhcZv3qLBn5FH9U0gfeN6qPjNl/QVKoiHDKsRJ24aznLc0GHjEmOoE1+/M2m7\nw+uPeDWIi5PtaGZaQX83CSHMOciw9AQnn9b0I6at9OjCo6Id38/CrnTJVjPB\n8lxdoX/1gYwdP/5fRmDfPFISL/sxqhKHJz0VcYtD6lOiDA31LPD0HzAQ9r23\nPprQcXeJiPwo17VAxtb/fwQeJq+76cy7b4O5chKW3cZLZT/2wmrnU0ZzgmNs\nawVvOrZJCxEyo+NMWGnzsuVAaPwxqEYCKAxRLLdtU75TdJNQakAFbzK1Ib/A\nBkMvwdptowo5SAeDDerJwC1VyIdd6ymD8Ln0VYtw5hhAsKhQfuOchMIn2tkg\nW3qzE7SWI3ROKzWKiJ30ALoI+Pylpfr8FP86S15/TFRlwliThn/YpK7z1NVJ\n7R3CeWzSbVahNdqhfLJrE6yr2YxasKTj/+vpUBV2uAMLaPWScBQkoNa35gYL\n05TROea7jAz5Eyrk+ordEQcdR8IHwie3yihfsN1gnRXl1Y0vpYSRFRP7gkyR\nfNGcWPULd15tYBGtINWacYd5bp2F+0TWEdBFnuKWg5ncSYBTj6VfgwLLO1Yd\nPju0\r\n=V6BW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiYlFnu4tk5fjCc1r5v63y8B+1sPkRx6YBP/G6HXVoHAiEA0URXHCgsvQ1jH6EAwikg6cK+ebCKerDHshXqFxxLLEI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.ee7e8989.0_1587430296946_0.6238814068493517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-icon":"0.15.0-canary.9bf47ffa.0","@material/mwc-icon-button":"0.15.0-canary.9bf47ffa.0","@material/mwc-ripple":"0.15.0-canary.9bf47ffa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tHqCNSriakfjAEcH1855VFqXQgLoc6FUR7iqdcqBu713bvKs8kVUWXHLGJARAUBlIgtS6cpb6wsXl/2g3g2EJA==","shasum":"a5035393c08e4953791064c5a6c81c2dca087550","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.9bf47ffa.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2nCRA9TVsSAnZWagAA6rgP+wXUCvwN1EPRIkQZVG3z\nNedJiOntvNNzdvxYs8lkUthd9w9bxujVC6Pv0IvLWIsDWLea9R5HGo+4gl7I\ndw7hZkVCAxB1OAcwxymWRnzjjCjlCIQAuliBx2xWpQbAeQGBjUspQ3fjhmUU\nJ0im6+YLBcGYaR4bcPiLbihG67fC7/tahXAReCK/GGARauly4uQ50d9UUD77\nwR7SoRrk1MH5BdUL1TdkjbOW3xhF9qWenvKiuC3145aG4qR3qwSsRKPRLlq3\nxFjLE6qsQXa95n4+uQEXSLNpBC8MjK6lkB7UfmdWAVmHBsKV3RICrXk5Go8p\nYp+jhl9HZXAcIo+Xk8bUE2zhfiMkuECmBnUQyMlSiQDbSmtE6blJUrtjrbhU\n6Yl31yukypeGvQIA91MWDkkjP/ohN3Pt9eMW6xLprNHg4ceGBMd+CqDZnM0O\n6thODPeoNXzPbIYr3ezvAL1+Hvi/akuhx28BjY/jYoJpupwqc9H0K4vCHZqy\nbdNQ6k07h3L2HSGcEi9F0yeT7+A+ARMKTCy3eGOP1vyPXt8tjgHnX9YwSYb2\n+cB5rJo9bfH7qGhtsVH7huwQYas6uKNG4Ut6cS3uY6J/DewAcfIm9oouIqNq\nJkb40cWu6ljIEJi/lLr8KUDyE3QZHsKft5DowAieCX65NPvvyBuIn3WlIQW9\nBWG+\r\n=ZV7F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBR2debohT39nRiVJHonSkyU+0Mdnc/uM0tJl9m6X4Y+AiBYSarKLJrWNZ+t+JI2BlakqYvD03I92VMUKx7mR9w5aQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.9bf47ffa.0_1587494310773_0.19612371135079165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-icon":"0.15.0-canary.078dbd98.0","@material/mwc-icon-button":"0.15.0-canary.078dbd98.0","@material/mwc-ripple":"0.15.0-canary.078dbd98.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-brBxLrs4Wu3IRfyhBOpJRzZJcil4Vlao1hi/XL8HD8iovRAFVzKHJ2I+aZ2uoRfzbyZrWxwjU2lmN/d2/FnXCw==","shasum":"04656d2b7c9f449f256cc9a403b38dbf8208dccb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.078dbd98.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2HECRA9TVsSAnZWagAAUqYP/0hk9iww8p/1oNIFJ/XF\nNAf67W23+fsfIEbPUG48A/z6dLtKRQb2PNjoptPnS4+bctFjtmXINjf0CfwU\n0vf/NcaxUy9U1/K4W9NVDTNESBNNp6b/f04P+6bwkXB6H4jsowXnnCq5nP4b\nYUYHse4i7Tw5ZBI8Q1ulY3rblraFNh8gIDy8ogATOPlkHGTQvSSTybkAe8Yy\noraHpkcLJOcMoh3DBbMARMPzxLkL3Vww5bQ30lnYhr+sJNzgiZ3z9SjWYZvY\nQreg4UFSAeC1zK2vCGyIGmYVqo59/OyB1R8HVDpZ7hlj1+NcdaH09ysUhEIT\nNlZTp5nxxjRMqOERzNCCKX/7Ki+C1MSfGvyl4mOffy8MiRrNtNPR9IQqUkKU\noIlRwEtq5TM111JCJIunis0VanRnIUGbhdhBIidQiw9oq/ovi/8ynKo8od2v\ni43FdQlanYyLwL/7TV0KE/XTCnoJyRFopFExdnfZzq3E1pgoEF2vixtMQLm9\nQNTxRZgFio3OVIwQfUHgK6ac1rzlEz+QupUCR821x3an7DDMAhSODPaNdRQv\nbMnmUEL+NipuS4FL/SofTFtDzYp7bmubL+BiYScgwyAZyMTV9XZx8/+Zyb+9\n78/1ZDT9S0SQoK0L/UqhnoRSEqgDgsp8hZU3bRarb27AgSimfMux57lfxG58\nlYeo\r\n=e580\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0eawz/uDuiEMN5VvzPDRgE0ekg9oiTuXfeEJYpusNAQIhANEZC2JWe/yqGHo5RiPVVUsybHaoR+or8LS5lGaBDe1L"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.078dbd98.0_1587503555676_0.7696279239385966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-icon":"0.15.0-canary.953015d6.0","@material/mwc-icon-button":"0.15.0-canary.953015d6.0","@material/mwc-ripple":"0.15.0-canary.953015d6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3nIzdI6apQGP5ioNjiM0WtWV+JlCbqJ5UtaZdmn+p/bfsMcOUaJ6YGZX9jhPONCOdjbeqJo/qvC8RiyzTlFfMg==","shasum":"3ebdb120c988ce485b9a88260d0007e7192c86f1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.953015d6.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2c+CRA9TVsSAnZWagAAsEEP/1FRuXpLgZ0DrZr1iTbM\nS++/5G5oTYMZ73ND/sZlusC3QkUywLH2IZn2YUL5vhjEyGKRJOhxBzSKBZde\n0aDAyUqA2Q5DH/UuZ7Ag8/hw9b+FroBx688yIuXvSlYWBp4CccD3/LVZ2YuA\n8ltV6Hqozw2ZuFaZAwHYJGCu/ZeICUyQ/w5eYQRVQaZPD+TdnxbGJ9GSYImG\ndvDVaOJ5eYneZqQl4jKshWQXucQ1pkvP5rjxQIXf6biotvzvg142RpyiAk5o\nkXUVjNkFXuis8DDVd8+ZLN6jtVLX72AObZw4O50+t26qza4Kkfdfmmq6ZORv\nssazeQVxdlWayT5qNzRAKw/6tJ9dy7bBGcELWkTgFM66usqh/HWdoi6nO7dU\n5sJX4/RhCHNpLdxBFiwF/oGeWALGBGeG/EptaF1YL7i2B1FHuM6K7tQqeTr5\ntrAUL6kVJA7+YshClsxp4NnANebdxn3oEqd2wqCkhHkZBJJ7Ze0koSNAk+K0\nS8Z5s/9riMgMY0nbUUUMzizHkWNCDDxIk1SlUfRS4M9flp8KzcwC1cUz4P5c\npG3V9jsVU14EaiAZRpoKec/lHznMB8PeU5a9DXwbJEOPfJcSfy59x+5Dq19z\nkx9TNcet3n9Yx1tbdtkajyRkCPkxJisz5bb4plsU1+ocXlql/K1cMtzHMCt1\n58ir\r\n=xX8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK61hdurnlZ9Vr0e7HdH2E7MSjdgWAyy+6qFtMdC1CkwIhANuvMqagi8kP0qeB/ZG7M0mqmweL9H1V4Gzne7BhBzKO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.953015d6.0_1587504957987_0.9734166964149027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-icon":"0.15.0-canary.c360ec63.0","@material/mwc-icon-button":"0.15.0-canary.c360ec63.0","@material/mwc-ripple":"0.15.0-canary.c360ec63.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hIulyAYnI8VTXkVh6l1Gx8CxnRE/aISRvZUE7rBjbE91/eMVG97afk4RoFvW9fstXuv84TZBuVgjaxyWsEmYeg==","shasum":"d4762e299e1f31eaf48320a375aa5506956b5a08","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.c360ec63.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2y0CRA9TVsSAnZWagAAXTAP/06IcMykV2jO7N5ruAwz\n3RRLk1Qz2Oi1loeSpuhQ5rOVNTkiSmra1ibWHwYH/Wp4wVI8vaT4Lp/3P7wa\n6cK8hl8u3SUjlFoW8sOcKHMGGqBNZxMQAMrcPAKlYNFSCXvYcj4kS/exKB5n\npeAwwlcPtGokwxrwWU3QlQPt1/OuONMyDnBVjD9BnM1xJb6/+rfvamiHd6ch\n4BtrHuOPuznFNvtngv3OpwryfttsXWpe/6p3T39bc6nxgj+qQZJKlVqRblis\nGKZCRRKJTbB0L9XZfa2gEeG2NQGfxo1t3fpRQWrRpcJ47TQwtTENhZjcMAHm\nVhk6MTpBWkICDzgoXHIdIwqUafb/rkQ7rbojGXLd9WDDl3CWXqsWNl5Xf/Q0\nyo5H+wEdUM9cPqCJTQuUuXx7Qod9AaqMmbawvcvKdXqgCOKZ4wsp209E75rS\no3nk47OVqOVZgvqGC+uR4eYk/OR/blkjyrkzvne9ChZPqCYYaydYMhJdTCTC\nyxewasWzKThQIehl5UtaNlu3LvkJrGUM0RFxe/6wqZCeRJjzQ2uZs5OcusRK\nCgrxT2b25JGv9PAE1Wug0tfch2ffsy10Zgj5aYdBIJs+m6uR/F4xTFZx6yQR\nJoJeA9NSELYtWkVeKO5p/885KdVrsNzATyVEH2mC4az9/yfpuQ/AQrZk/d+D\n1tsm\r\n=Fr5+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIOOoCcWd1qALtI608jy+WsSOTsVv+kGj3UgCqfi8vvAiEA4rXd9mURbC9pwHju0IbM/wrgpCDSIQpYok5qJlHcDAM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.c360ec63.0_1587506355539_0.14966519014198432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-icon":"0.15.0-canary.d71b65aa.0","@material/mwc-icon-button":"0.15.0-canary.d71b65aa.0","@material/mwc-ripple":"0.15.0-canary.d71b65aa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OgmXWaZUoKV6Am5pXhuS8Qj5783SiF1PvFHHK6beyoVtFaDFvr6pDC+q3oHxQe5P5x+8LXjJAYuUXmumsLe60Q==","shasum":"a0e63510cbd86024c186de0bde49844db44b2488","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.d71b65aa.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XICRA9TVsSAnZWagAAPGQP/iIopmcRzlKI310haSiv\njq6GIqKviJBGQ5cndqMyxfioqmYPq/7KMITf5TASYRCkn9JLGQbkD1dLDVTK\n05Pr7b5KeG30Ke4yEL2eh8CO1xSU8FpTOElfd2gQ/yRXKFUXQdmPolBKZUrg\nDYGPO9Qufpb5ZPUPShZDnW/oXyvXeCMs6KOU850py6CcmBZ/39WCdchx+5cY\nGRXmoemvUxyq9MJ7mLO3G5PC0zg4faYJ8JmZL+IX1EurYVTb+gMqOV26m3Vq\nb+P14/BKw145iSdev8uwX1wsYMRZI2GpG1fBIia4OsDOeyvJxhPZD32Otl9O\nmxjtvEEipsQ7U89qyTMIfdQNVVEtFDbaAYrbuBw2ahTDTbcJm/MVd7U2ww/h\nEYlvxhXZJyQ0tjr+6Jk2OnpcVORYAhLUNVUEsQCZEdQtVYkf0CprxHOwPkY8\n84b5sXH0yg5x872C4AW22vNCNbHoG3cY3I0lYsDPF6MespvvzSCzvt413edK\ncwQiuo7tn8HtN4EOued2YF7Fevd/Y/I2EVz8apyNW1rrZXPIHA8NUHHL8TZH\nnCFqO8yIuLGn8Snh+tf41qaQ7BS4MG947qzVEFTPoQmH9leoZVY0tw618PId\naSAzgnPloT6wNpA9OYmh5MSHGkssv9x+I0v3E9CATknGFobZgGyH7IVDc5On\n8Nnv\r\n=+saC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWyDeWq94U6DvE3quuuAaMTNhJBzhE8o2buPgJ/5/bDAiEA1uFl3n4gGnPJNKmmEOylvxuEHCqVxbtXhm1LQJEhY84="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.d71b65aa.0_1587508680331_0.8839218627939771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-icon":"0.15.0-canary.58d51135.0","@material/mwc-icon-button":"0.15.0-canary.58d51135.0","@material/mwc-ripple":"0.15.0-canary.58d51135.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FI6ttynerg3wp0J5MDMPq629QR9dZ/RKj19Xdvkz2h1lMNBfHmugtwuME4rPQLVcX6tr7Uryw0uofRI8U9n6gg==","shasum":"d952069d511a474b5361821e1994f493741e106d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.58d51135.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUZCRA9TVsSAnZWagAA+KMP/Rroh30r7YFw09OCW6jj\nX4qWk6lAN6eYIyXrqpe2Vnv1Crz+fNxy5K7fDFXmHe+sEPfY19D1ckCU5OcI\nhAKSEB61GhRExxSUiUyYePhwFscamwwYl3qkhHCH8x9yc8gOni1G2JIEhYVy\nBQt8wR3ToB1KD/yrx1PWglt+ztNAU7h9MnZqinx+Jeq6IhGE3fciN5pvO9K6\nfW3lb2AKgYAjoQ4VBoDgdqqbhZ0MfdE/xCAIIs7ZkPg8tacA02fcpgPMnOeY\nOBkzrNYbYvJ+SLgB0PIVazycSKEwIKtodWOOYh5DyaYGS5h7v6wId8mP/LFh\nod/CxeglXbnlddJqzL8wceCpVjN0KWNExXNeiY1aqByIFQsaviLzk8GIC8Ez\nWwcuSk1LR7+wUdxUWQbae8vCe5+X2jZjMJLJqqjJ+0G2lyxHztnJtR7QUhyj\nphK6c687L2r6uRgDNM3NLSIXm/GY3UMHjXr4PBHrQcEocGkBq4WOIMYzcZpV\nd/OPx7xqhdWaWY1XhNr0TRsgHP+eeiXTXLaqnAzbNWm82solaAiTTfTNCQiu\nBwdpUnjrdc5sjmmaDCbUxNsYpoNrv9FX6tUtiLY5oeUDaeazdcebmDfT/wPr\nmYi1Z/jyhbclj4bJFBDpg18j8Ok08sJ1KJ5H4OpDfAGkdKaBU840FySfQzrI\nWt1j\r\n=CJOD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs/EVcxnZfSHH9zvIpuvXyr1hH+nCLrgIXBhilumZeTAIhAMGgV5N65C6T6sGN+KDJedAqr26VuE+zzEkTc4L4jutB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.58d51135.0_1587602712477_0.02202341319723944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-icon":"0.15.0-canary.d0af8ba3.0","@material/mwc-icon-button":"0.15.0-canary.d0af8ba3.0","@material/mwc-ripple":"0.15.0-canary.d0af8ba3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-g9LD2mN/IB07Fx28GAmIeY8dGPT0/sIM77LyXpMbaRm+7LjTX+nkiugjWtpQxkg3QDD2gUhBhdQzMYQnq2DgSg==","shasum":"6038f6c24239161e42f62f6b0db40b3925ba1fb3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.d0af8ba3.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoJCRA9TVsSAnZWagAA7zwP/RiF+JjKeFQUwN9jdEOm\nAfMuuRZMUFHBCq5y2OPxV5jH/ryqW3ZocrlP4V1weiIZPIrwtibEN7p5jQHP\nzbrZENmVWNSOX8NisFNivVlPfMsOC3QLpIGh7OZJeQMuROnqnDRVuJVibuZp\noROCIvQMUZvfh8T0B+b8YV/qSC4Lne30WNhwNG6I8RTn1+hHTfai1KeyYrdx\nMOAHg2RmsiOxcmsAQMKe7lV/HuSHRIHy2J0N6tMA5kdJVYCqaJ03hOVhygzI\numCXR6yneWRJKTtnp61JndUAL/PFB5suzhyyKCPGB1sbbu+e7oP9MLPJxoCV\n1DzMNCyadeXq5MpcY28f0Y3JpW2krnib4x/3RV9hEqbpTkWuVXvESVK9SNIH\nuOiRUwhcbERYxPf/JQhNJgmE2CQBxKCXvhPROi03m2tb6DccPuE8VAjSeEsy\nkf14PnssJotcqaa9c0q0emxLjQ6/PWqwq+Y+2jaoriJMFpIyG7YnKClRpfIb\ngcVKL5IUeT5a+H5tBM2u0rjhysRqpliQ536oo2vRs5pJ3clhB3rwP49pV+KP\nu3E+uHGideJGW5PGx6gvysiRb78rb3ab635g+TJysXIJ5gs9iK2xlesH5Sio\nuix4jPPXt7FIMuSeIviRkd4xWwGMe9DJLsTgFN40R/IJIZyj1xZrkEmtGqox\njR9/\r\n=Cist\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtPCAk5rO99ASCHu4thJ3Gj2ZVC+dBn1C4oYfsNxxWxwIgITSeQICBzJiC/OpzDCckmxjpapYsGtkIKQvBVA1+log="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.d0af8ba3.0_1587665417118_0.054722162393603835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-icon":"0.15.0-canary.8872b17b.0","@material/mwc-icon-button":"0.15.0-canary.8872b17b.0","@material/mwc-ripple":"0.15.0-canary.8872b17b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LCha0bqOltv+K8do0c6w4p4fp6z9xoMtRdMfnnWIWF+odATzG613wsAuObP+stGTWHNDaYsNt5U0noLSxk0sCA==","shasum":"62a6719c2719bf585871e561b4dcbb67e5c90a4b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.8872b17b.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1wCRA9TVsSAnZWagAAbeYP/3gAdtDeQDwJWsDgTXCv\ndZKp0OXVLukIHNOmKgFCFeS9GsgHWMojzT6dY+vSNs90x3Qtx6XyqYCcK05K\n8yM9u9gYwsvX/q//VrACTabG+2XFsrtuVKf4prGyAzA5eLwOQqsyvVAJSEq6\nah3vNYhR2+nUEeMMkHQjRuhuv3SoujsYzHVRXQtWtoY5voPMZmt1gathyz6Q\nx9RJDnrNy0W+Pk614GolJeJ9i8a4vpQ8JQz+ZRbksNIbbTWKfZvaHQmJ5Hur\nI9om+u1scuPzKLTZCmxy0xwUR3D1Q8oLN6I6R0AH52tJisLmu4NZB6+N2Al5\nb1X6+nC6gqlzaOtHzOuY6VfnECr5y/JzwrgwqfBdf8w3ODMm6GhIOssp3w2I\nKyoLkKov51sdgmwkbw0pxEO+d1xhmFCwWdawwPaKxZ6XlOdczagyG5bddg2d\nGtq4BseMXZYZnOmqpZWsK9X9oxozya1jsjFwViV/RNyOOKggbhkrP349nDit\nruWUh78e9SVmf/gznn3fnXQ7e7zGaueFfauPaiOx0o5q/qwOcCAmwaPmjDzu\n8XEjEbKG7lKU9JxtalpW1Nk//D7l8GPyL22QBdj/BPT9ggDtyU1lVdES1h0b\nveCkRgMhhBtZXknK00WfiICig3l2vyZRh6zdAk3Q9unYGJDxCO2xTPu97g2s\noyVn\r\n=rWb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPqiz5dwhYvAL865Gwdn873AmAng8ZuLTDbf9cJjnXfQIgSpTfeKVPjK/XhoNT2B7ADrB4HH76GR1Ybdb7F1VyXZw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.8872b17b.0_1587674479989_0.34033824247976185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-icon":"0.15.0-canary.eca1a610.0","@material/mwc-icon-button":"0.15.0-canary.eca1a610.0","@material/mwc-ripple":"0.15.0-canary.eca1a610.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Jfgh7d5tNNdI++DJTUqwA+4BQ4UatO138EIVYgwI/6IF+dUmXfzDmnfiT+7ViHA7lKSu/rusi/okPscdTNlq6A==","shasum":"310162a99a8695defb425d109a8c822509beffff","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.eca1a610.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogv5CRA9TVsSAnZWagAABWoP/2oJ40oSdXaYyTiuJn5c\n38OTSUdtgwQW5CwMfD9Yk/Cr9Rzfk0UzrsL1u8jbebzk0mSKAZJL6QfAh9CW\nfFkqL9SFkwAxAhADaoCSyhK7BLfiTPQHhdWB23FUzEPdn8KwGZW82FYOpJCz\nUHrNVHEpeLC7ns/XWSHJ4ueKXShYldVIGUZry0TbX42GwvDqpe1v1hmkHEd1\nfb5KyPVuz+Ktg+mfWvH3F3KloeZ00kgijRSqQWZ9owXJ+6gtqQGUWiDt8CyI\nLeWuDGcKWoX3Otxj9mJ1RDEl3+qGrfgc5QTY+2HAwbqDwGaUIvlpPqAQ9XkJ\nyleYWcYjZuI9FTqlBQcYW2av4EykwPhSEIyJ3yGmNP1OwNGcqPX2GUMYTRpb\nl7IQz74yDqUdPOuaTV45aL3d3v83u4awJmIn7QryLJ9Aa+PheX52Uw5SKPWR\ndgz5SJsdTz+6ABq9cIOLtWdXiQ6pAIi6DUkXJJfRBmLgNnfc1CCHd/Oxnf6I\nxe0laJdEur5yf+7LDG5v76XNTKcqvdvoWBT5lI2wBryMQY5Wr1AePlM/p0f4\nXsEDyKtw5hQqC24Gv4kSsnY2rmUhK3QJFg45Tp6eQTS/P8mBG6s/FIjEJz7o\nEYZgXDpGp6/BccW3RPB2hpiLwrt+PYkwrgreCDlbP+niBmGxHSLhInSUsYFz\nL+Lv\r\n=94AN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjInx/JuGwkD28egq3cQsS3anRVJrgvP6jnpoObF5l2AiEA/eNbhBnodzJN++jXnhX6Ag94ufQ/K2fYQQqkvmXcX0I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.eca1a610.0_1587678201325_0.4222059407978165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-icon":"0.15.0-canary.baaf529e.0","@material/mwc-icon-button":"0.15.0-canary.baaf529e.0","@material/mwc-ripple":"0.15.0-canary.baaf529e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qBaQF3scuNaYhJ0U4S52C/w9XgKSz7UFSfAFpkuCpIrCfdwaRNpiy3/Moi3JfUGfkLEsL1/5FCL5OVQFdzBLIQ==","shasum":"a908e72a6a0b2d0cb0848b3c8b2682a6faa3fd3b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.baaf529e.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpXCRA9TVsSAnZWagAAdAgP/iX+M8utsqWhonWJzGhw\nFlHxWXcib6/QQ4QrXArWfxmbUaqhS17jROuu8xV5zUfg6huQ957xWmyGUlRt\nNvemoIcwXxPVD8xzVdULJO51JhhGrS5NPByjDwKSGVuEarTO6t2tTdV7IxYF\nifzwMP4ds2vL/PiG3kv9RrPfAb7bP1kQGo61oqUtfnYJN30LhkBe/+vwCp/y\n7/TsR8x0fhBUokTNY3ZuuSRQtx3rPuxmR72MnQc9Q5POTmn/O0VMZyfhFEGF\n3jY+oq3SqCc/9UqfK+/n8BvpYHbJhLxJUPYRDSAOhDhNO0lQYsHZ/J4X7wlt\naWod/pCZqC9M6YI4PSuvkmwnAs0cGNHMIV+YjLXfgPLckUrRSJ9HF0IagRv0\nFRVPHyBFqwqL27lJbzYt0+THIMmXuFENguOQZij/fphMV3FOjepuAjPItGyf\nbx3tlYlP6lfjsU+QSif+mSqMKLvqRDnD4YoqOHhJ8z1thdjb9gYkjGu+Shlq\nJzMaEGOX7ose1aL0bvp9Ks7/lKgBIPtatKD958yhNy0Py/sc+NPledIn0cJe\niR4DT+4S1MOOHZYQURr8582LVLIIkx99Y/meNXJqXHNg1iNMjmJxnu6LJjoy\n5tcOZlGkMcpE8nH4Dewj0gWDM4Pb76tZn3qeF/cKWzfWm3Jo5OBa5SiPtPm1\nTRWv\r\n=fuXv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8XsYY0pqbEifnaIxNB3y4GeuRB/sEEtkMaSJCLHidWwIhAJXAYEDui49MheiHrBi1Z/6vu0He/eRCKbLwYrvvtJQ8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.baaf529e.0_1587681879054_0.5210904003349921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-icon":"0.15.0-canary.7a7992a8.0","@material/mwc-icon-button":"0.15.0-canary.7a7992a8.0","@material/mwc-ripple":"0.15.0-canary.7a7992a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OkYcvz/MP6L9CNVhWneBygcbVCfxdJgv9dZE7hhpbfDmxEItU78V1nPbOb14XPAGsn4pZPokq8xPfkv8Xfbpjw==","shasum":"bd8ba26a1a30dffb7c0af3d87ad7d261d913a20e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.7a7992a8.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFfCRA9TVsSAnZWagAAKO0QAJdXZ7F7R2w6Mbbv5294\ncaas8OG3V4ymYCDNyQQNQIRzhzptM7K17aVFf2/EDM+K5x9KFsG4SYKdOGjM\nksaGekj60aqUOQ8bkq84sozSqzY4x6jZjfhWhhRZLQcsV/S4D0AGYZ1qgbV2\n0p4AsMWhCQ7IhL2XHIFvmlK++5oLARrZfqlOzG50y8lX7zHfkA3HLA9ndObb\nr17dNvTmEc6l9DSrE3EfTSRje/8+0LjFOmnHgahTW2j8IkO+rAG+T5PPH5T7\neWMVh+Nrd8A8jgYKdt+6gFsajakzg1CY5c8bHiSlg5rB00Y5MHlbYGNOih1N\n+qCR3kPdqF26s+lrcdoJYH7kIToq8kBhcIFvxCCtCa/svRXQAkIHA6l2PoLL\n7/5yc0fW+speUv56H8EEBcZQVthTgQLqzS/gmhR5jX426JZQvO/NADIKE2qQ\nq0plSvnYBCozl/snKiEoxdIzOSmQoJrxKQ+rOc+inygqm0CH46TtXfWbItft\nUyv1XvIQTSZqskueqIpOI0vKrB/AJaLfpDXCSUyI4mLMvBpM1X76AhAPYdcT\nbe+3cT0JCpZ7mkV/0B3Tkz/XccB3LU2z+Z26eEbh9er7MsvMmg6ki3SdAH8n\n4c2TdRDnYFugMtRk/bzlH0TFcCiWgYt8U35njRt8ZaY+CldlOfF+UygeeB9Y\nLtg9\r\n=wQ5M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPoEeBFpYy0JWGVUpQYVL9NBYK+5mu3dE6K0o4klVczAiEA76D68TDz47j8uqo8TWcVqnzih6+uEbJjpw/4o1v0Pr4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.7a7992a8.0_1587683679290_0.42390043389172916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-icon":"0.15.0-canary.1150d64d.0","@material/mwc-icon-button":"0.15.0-canary.1150d64d.0","@material/mwc-ripple":"0.15.0-canary.1150d64d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QXz96lZuoYgbVtEbVjmn5zLE8ibbhHzPAGtjAQ76QW9c5SBsAgF1aT0oLFmzccg/kj69uQJKY3Ow55pkUg4/zg==","shasum":"bbcfcac0af58b8a3f842e042963ea6a33142c71f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.1150d64d.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBxCRA9TVsSAnZWagAA0LUP/0/dTswZnqBnj64OmxHC\nW3JuOJzIpI+TDCa+wXA+INA/uiupvL6o2DXMwL5ogUi/nc1LcF6LclY/VYF5\nLRF3/vXFW7LnCADlWDT1+Cg0rDarLZ32rOcF/lBUJ8p0u8DwQflrZRBOuBmI\nenwWv7LZ9GTf7E/4PrvgJ/wz8OcRkRypdwt4gcGc+/7hnTm/4AKF9vySLr9n\nwvT79jlAn65/yfyURxxDPlBTw/SJ9thhwIRmzOUaG+AUgS2GCetuWjg+H63Y\nTMLCHimyaNjy1jMsvbsZyREi9DrOfQik8LNkBvWvNBnyC9nVHHQy+IM764Vb\nJEGAALgm0dpSErYNETjHXqJBDuNxSoac9DUWlIQub/xjty6v4PIe2jxP1u+y\nqMmpNsFtr1ki/E+E7b1JE2Sz8HS5FtCu/heQ/KF5ky+0sMUu9Yc0aEMrJPtj\nyhoFNEbcHJpGoXrh1E6CrQT+tyB7WoT3JQKXGBbKKJRnK/CfhH5lSGcgAu/T\noy6DD0sNC8JnszBGs+1eBvLTEQjR3LcclJTgUHCdXi1vXPtPJw642FJsvckc\ncSA8xJHe5TdDe8AwLgErZtpF7/ZM7HdNz/eKbLsk1/+JQ0pX5YQPmr3MmOXw\nk0iasdFLPeqz+/xHsPgzzW3SoEdFohhFzxNzKc7VVgdD039rNGGmqRDRw03y\nTQR8\r\n=2TYG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO1CsL9DZ6OLICsv8ZaHC0MCOeWYrJ24bBoJKsoiYlDQIhAJEPo3YipIFxqttHLhk3crTuxaxy/6DNn5HBOz6YyO4X"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.1150d64d.0_1587687537216_0.3837479826352681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-icon":"0.15.0-canary.dad3f828.0","@material/mwc-icon-button":"0.15.0-canary.dad3f828.0","@material/mwc-ripple":"0.15.0-canary.dad3f828.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TMNODccvttmvc12Jm7LunzZ8yuUEoGuQuBY8+D2uHZVigU0LiHhXqgrjZBWIufe2GWbSkSY+Mt7Iud43mEKaWw==","shasum":"52f025e3e785ff0f0ad6b61a644b6ec9ef9d9ec9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.dad3f828.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eXCRA9TVsSAnZWagAAEBgP/1puFiRLVSq/E7gUI384\n+cHlKCiEkPKs430Y21U7ywdtzKA8qN6ovP4KEbbaEg3J2CYzOv2C6TOXtbkZ\neoiu3xEHx7ObkJinCyD6bEIeWWjZUjSQ3gMZ5PXVF650Vhtc63xQPj+mpkRs\nPgzu4RRDQkQ/Kwjv0kjS2gLa5yfjYcJe8L3XUxvI7SfrgCJk8Z0gtrfQIkpU\nANCYmqZaBpZQp3/HXkNFvRd0CvUi3ulT98lkksJcr/u0BF8CfftoksWP+V9q\n01Tx25Ljq1oKpgLyunvTgmZIWffPvxfWi+STEWFpzqA7Ccz+JVw+xIj0VOQ/\nbIfjdeBv0e9oBuULzc5LET1r5uDjjmch14HnbUZuCNAs50xAqqKd/Da76DnK\n8679U7M1KGcCbY+xLs9cQW2yG1KjxsCapTTcd9cYll18u3l9vgQrnQjwGi/w\n4AwTSweuEkfLpxbKvVwU+ShaeeH3Ljt0ZlmjfOFx6vcH4VXnV8qwu1iF+NS4\nePMyHEXKWIUM9oAMyJe11HtcOvzFg5yLD4ud49cBb7xNe78kMzSLMf2Ipzui\nPKh2U7LKywJ+UZYazzFvmtfGcz1fa3YfN8uOezL5d/HjEUY4vxqg9B95NMSu\nCjIjgi9nUpaKYeqRlqTma2hA4ODDUQbCzDKpUt5RbRYB8sMh7i08t1wtALkb\nybYC\r\n=+VWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyIjFbrxjm5xxN+Z/8j/QkhOPWLiAxud0e0dcq5ctOLgIgFRSgq9PgRa9IH5eJQ5tfd6PbxT8NHPjho5no1ff8UD0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.dad3f828.0_1587775383140_0.6573455251082525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-icon":"0.15.0-canary.1bcdb47e.0","@material/mwc-icon-button":"0.15.0-canary.1bcdb47e.0","@material/mwc-ripple":"0.15.0-canary.1bcdb47e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6E8NrB+Tdk7AtT7/hOLzAVRVIMyrhgE6W52qdRtTJj7cX4upDAhiUeAzrpXYEaHSI9gO3BBI/PQ++HasMbrSlg==","shasum":"8239b654375b240eaa875515cef4eeec878d1883","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.1bcdb47e.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MdCRA9TVsSAnZWagAA5qoP/03hKLMlDGghxvvgyRyZ\n0gtDWrJoG8qQAXR6Pbr5tRHzmRwSHUjobASU5kzOlg7nKGW72Y4CMdRN8mJ8\nKUMcA3yUraRjpugnHj30SY4H+ZtVHgo8qkzZhe2vMSzanaC9iwP8og034m0y\nEPrSTTxj+sG8EfWAh16WGeRcAf+vuIIA2GBbzhGU/J+mvKTxRzGcO+T52DGN\nMEafqSwmIUtFgLYCFPS/77yfHm36/uXkBUD9MvaKX7kt9MBh2ED50XvV7Lm6\nwBnqIWGJOEA2tR5IqgSWJXXqb/1LhiUdG5Cd3gTgjLt16fHcdf4PRCOQOgt/\nOmqywSeEp+B50UC5twcaXzKxJdtqlKfjAB+NnDsnnff6bnlaXjx2YaNnuCc+\ngoJeBzbhHndCpO1860EYVhocj2Fo7ogjiEdJksyOj+v+i/97v3kePOK9OgbG\nuCP1hHcHrjIbHUWfNtmR3+FmsweRWwmboHoh6jD5ULczpwYQke3sn7cCN6QZ\n9+wfnQXI1UCMk1okUCXu1ctAXNhtDPmhJxlm25YZ2/7Esd7qPgz/MzzTtUBX\nuVxkCNZWBSouo7wN4l9ep+n/wjCph8f7SkkO196xd7+4vLQ2Cap6Xwi5xSij\nfh3W1+bxeQIpnI75lw5PHzR0w4Z8/LIwOSH9E9gp4egz61LiGSX+COtyAs5T\nGWTg\r\n=Huti\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8J8OMKeAFWttuR+oZUJixSyxfsEn1oOsG3E5qsJ5RmgIhAMnTqeQLSRwxSJ5mZot9vRL7fGLkGk6k4PX1FZIHYJXW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.1bcdb47e.0_1588036381415_0.5830767898742224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-icon":"0.15.0-canary.86ff1b9f.0","@material/mwc-icon-button":"0.15.0-canary.86ff1b9f.0","@material/mwc-ripple":"0.15.0-canary.86ff1b9f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4K2oy24AoxV0j/wt4lWLkMkEMjLrBgCwI9CBO2Um+kRJaxPD7dTf54QQp3eVSzjCMKwXLqZOP//qdKb7xINnBQ==","shasum":"eff2509c6147e909c0b65f6b42dde806bda1b3bd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.86ff1b9f.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5tFCRA9TVsSAnZWagAAU4EP/21xLIoe3gVzJp/Yc4tF\nIuzF7OS6j1WyHa/hhf+ROU/i86EuzVDB5xIfIE/iJDb1q7NQ0VPu0FZ2H6jv\ntqyFPaGfGUbBLu6itXJl/fNJZU/w3zWo0PrHl07LMt8RqBFRnvlojnbJlssZ\nLkZ3Hgp07HdWEo4vl3q/64GocBLAU0kZKjSP5+gvj8iD/ovAqv3sMBAZI8hg\nf44gVdIRLxGfxTJFg0t7huA9yUHfO0G14NhufKiu8zQo4T4pI2K0d8hTGk8f\nyfg0flM5YuJ3YVYKjyaHV6qGVVxDbLrXYtWvC+zGl9Jki6+djo6ffRVhDy9P\ng1mbAOD6MuBF8CC3TSySw6/sOwbNO47H/bc/YjIXjEOQK4PdAwW/DP6gqleI\nOGLRQjkxeQ5ap7kMzJiXY1uXXt67SzqJSBLx5oQRDZF8u0WrX/bu7wacJPBC\nWc3yoXIiBCNvQdxZBEvmHWKt2hrQxE1JtIO5CyBUy/e1KT1Jdf0TXVcMZCyV\nROWvIQKGzQ9Dm/U0M0vgbQ8L4ZLd5T0EpVu4l3h6Blh2pnpsew6gPsqyVPaJ\nPhObkX1kIRLfXSMO4OsX3atfSVqoveECM3nTBeduMtagZAYqU1KGefuxtwgY\n5UonUiLOBjoxkgRWpPPcbeQly2QXOh5U6yFOACkqQaLndYm5GzJQQ5rtAatF\nztn8\r\n=TQGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ58okTCFo8KLlcbYTEL70F0127lfA4/4Ce3BP+YmPzwIgB7XRhrQo4glxLeSoogU8CPdayIpkA0/I9NIvgzm2zt4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.86ff1b9f.0_1588042564557_0.07163362803139783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-icon":"0.15.0-canary.54a86b20.0","@material/mwc-icon-button":"0.15.0-canary.54a86b20.0","@material/mwc-ripple":"0.15.0-canary.54a86b20.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-68RSng72p6nSm9+1L1m1P0ZofAwfO6k8axHtaZA9qPnZalmtg785U+qItLQ3IPqbIAhQNUapOBbyle3RBqoUYw==","shasum":"9a7ee168ba25cea88c4e763f13c21cbf46f3fed6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.54a86b20.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6B+CRA9TVsSAnZWagAAQ4kP/2Jg79xVqfPIOr7Gw6cy\naYYLklw6AxF+CIpWOcDEV4bMAEfXD221DS9coScE2FBwZZRb71w6Oh673Fmg\n21uReO5wfRY0b1Vwc3CUTDjtu1BprrkAP/Li8U4jkxmn895aCIsRXimXD7kv\njNFijW4RWzckMb6QWfVwbrgX6ko0FN/xuKBYt93IrLm8Lgl1OaPVZoq4VEg2\nRKEUIRLx52rJUO0Nd5exDqMzlwBZ3acfVFsrih8fMXMBmtKxFvni4LmLgR3I\n6apwxIn0s+3ZtD0VYpOmIw5QiKhODTbvcHVDk/d88Rk4ov7V1JSmY2LGwHJr\noJj0ZO6jfxZ0pFpfrOdKkrvtMO/Ob8MZNfPeJpEcZPj0oRIxC2q/UmNySCX4\nExyn9ggCuoc8kNx58dmV8R7414mgYCmt7PlVjPifDLmm4MZ0QfzynViz928M\nyZgK8HJjh9UDIecn/6gEplzjS71C+mSn5FkS0szn/tKFElSjcjxhp453zTtw\nooxV8AL1RTFYLSIxrXWtHG4lHRxwfdI6Aa3tCKnwsEyJr4HQ0nBk6tWseXDW\nsZGS6FFTlfYr65igrPc+Ryifp3JYoXIDojgRPnTXrQbAdge62dMMbP9tcRlL\nmYzORS+OMChPxry+sMuAc+VeSzaf8Nkaccd2EVO56icmkmO0IC65FmFboDnH\nnQln\r\n=Cxg/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvTdnNphBQIk1OuJLrys0bC0wgFZqqmK9JbOEfnbAJJwIgDha+rq8ewQRy27WeS1anVNOOGszGjCuplh8bAxrVfwE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.54a86b20.0_1588043901610_0.6721523005964054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-icon":"0.15.0-canary.938fd24b.0","@material/mwc-icon-button":"0.15.0-canary.938fd24b.0","@material/mwc-ripple":"0.15.0-canary.938fd24b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Hqg1tMIPIOwIrl5bEQuoSXJFdkyK9n1mIwTrB8rRgsoakhpdl5D1YQnBnOs1loyrSqQVKMQQky1g1QMHvCZ0SQ==","shasum":"78ec9d1df89e857ce9a30ccb7b0bbe1f8c9fbfd7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.938fd24b.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqimDCRA9TVsSAnZWagAAe8QP/j/MPeP4UDLfTPxN8EEy\n1H9tDaihH/hF/hnXLenfpPUBmM1Bp1I3I3G36lCBk6NaZmeA8fEzXXOQD6nf\nL4XPsL9SHZ1Nebz1xLwLNY6pXaHkwLv/+UByhaz2R24rotbCGwhf0HI9kmHg\nOw89IFFTgr74Z9lKeHBDNdJpyibQrXQzD0KDUmPWHlVFsyGjzMIwy+nHhcrm\naTbdPNxUcVvFi1Ba/UZTCp/6xGW6Sl5TS9uqOaCZijftAnV1Y6Jio+DtZM6+\nijvPBSKfL3JeIrl3dkffmoQVWWIPwQyzWNHgB5fsOI3pp9Wh4bAyROvb9gzY\n9K6sGCzo125yBA2EJF27Z6WsgMbPsND6XSamYqd9Zz4qwaFsOMq8k1VoIgJ/\nFip/JKLyh39B+SIVF4Cj2yj15C9zc8PeSDtjoMNwq/xQKYxyqrLvw2lTvoAQ\nEG/tCs56li5ahdeFo/9mI6RG2QWrjz2Wk/urZz6/ljaGQARxgW1RlDl4e1Vj\niux58oLf4gC7IvI0x9fl9G97PA+d3pr9L92ClS9uBiz7X0VcgVSr3xLoQLOT\nOQOUSkxmAPBwO5osXEG8jfc3XBFLxg24zgJx+7MByTQe2l4LGJ3eezo+P4Ge\nW1JS0Umh/cvN/sCRweO6xTX8N6QpJkABYsXD2esvD3uARyhm1DtMa65j+Bv1\nPKuJ\r\n=XLfP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRbobzNRDClX9SyoRbIne4d3u106Am6kMtGCvw3uiHmAiEAiwkTzY6sykSUd3eWy3iGRcWcXkJ8b5YeOVJM8vx65C8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.938fd24b.0_1588210050889_0.008263948130512677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-icon":"0.15.0-canary.39e9a008.0","@material/mwc-icon-button":"0.15.0-canary.39e9a008.0","@material/mwc-ripple":"0.15.0-canary.39e9a008.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GgQfslG6kfVEozI8CGkOZtgQ6YcjiBPbG0+TCiS8363jpvcMp8MP4modRWSFd6E+ReUeG12PnXhsl+aBoQSNLA==","shasum":"e05c01ccf5c304adec8fe605271822928021d3d4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.39e9a008.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRaCRA9TVsSAnZWagAAmrwP/RLdBXqNYAtrYkhRXvHi\nvNMZwRSRuuXI71S5YXtXGA/6/LsQ2QYkhTxDuHieTlEPXO/htnpVfMppI1gP\nD8M0lay890n8GbAmXEmLJZn96BH/y2wpbMRO09R7G8CdD8vz2Eht9UOtg/hY\nKOcCl2EWTHguK0rCp8plRNxkE9/T/fytUR5dCT/+dD2EKgsiXDJEbyKzwWfZ\n0DLaczmLebXnyQdxK54JQ4Gz/ctQV+PRH9v0S6vnGbk2fxRrYmCyRhm+aG0A\n0F3Y0ECTwCqJkzVSBSlAeVg2jgTOTh4Zs3GB92E2uxIMaUMlWC1HMG1Sl0GG\nfjBrL4WeG9r1nA8Ay6NPje64RuPtMZ65h7hEv2x0tklOElP4xD52YliTMAU1\nRPkJH/Q12KqWNXrJt+RvDQGY+yZlJxD3jLzF6fQ+x5UlwjpMUjqBisblFYHA\nT9KwdkWILPkryqTAREruem08e6qol5I/CT+XpPIeQpocXcY10cKp9D/lZK0t\nT0oov5VntA8X3hSI2rmubVjc1N6wTWakrgZRMWfDa5ul/bTXpW2cKm/Lb1VG\n9MpAazB4e39f90pGbPz3cjEo2xxBoUUfusQFrNtzOcKCJzPzg9CkJtqeETZB\n/wAtehXYN86mmlqpsLmZckYeflWSrgOniOw8s83b19koP3+FsCvmKCMpeiqz\nR2ek\r\n=/P3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDU51TO354YLWonE9YzUrQzTyeyhpGZZRpglGAxzGX+9AiEAq1W1PNEgP7xwE+kPW0PuPyf+RYNzyGdwXeMZZ0bqQko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.39e9a008.0_1588212825967_0.809049899971118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-icon":"0.15.0-canary.f3b365de.0","@material/mwc-icon-button":"0.15.0-canary.f3b365de.0","@material/mwc-ripple":"0.15.0-canary.f3b365de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PAbtUrnXuMThq1hmLi+y7DQHT1T18poak5MPu29JMnvIGfIm7nntqcMQoaoCA7uZdplV9AYO7YIUNaJ4MTrnsA==","shasum":"3822318d389c661c91ea3a8c56bc0dfd8836daa3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.f3b365de.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqov+CRA9TVsSAnZWagAAzmIP/Rya8vOZ1aHKUPioQ09z\nwu0F23xG76EnLxn30yCnPnEY0RYt4oc3fb4LK2qXJuHLN4Avg7TGnWcFQy6J\nQCKjZVOBBbch94AAFmP+VUJdJe5vrAqbm3V3JwIB4pkImOIm8R0P633rOQde\n1DocXY+trMt8dLLpxcpfgGmlMBhnhX/C+8gV2RLDkXSFWz+1JyAiCcr0kGCR\nSw3niyGmyj9ayQGk1uG2656h+Nkp5NhF8DLw7OLA184wq36spTYav42sqc92\nSMOVqYFUaGzxszj9kP9drWCKN2Ik7p+LwaNI6kf32UwFpwZRSFO0Nuy5N7AI\nyjMn7vPtc+KAgwXvHodZUco3qTXsAnlf3n1VQAzlQkgOhSVZG4h/LBjaeZ8P\ntQagsb2hJVhnLj2Q5Sq31uKuug+cLOick8TaITjF7ZFDXKr6bn7Rrz3fGRka\nJvOYoQFkNwA/Fg06VR6bnSooXIxvapwOippvyHLRwBm61dk9ZRLswYh4rWZl\nDZ+68HchbPk30FbRtox0BQmUczfPRRtU/sEtsqFretxlsgigiwcfITdnhiPM\njkvke3hOoY1A1Dw9Lr1bZiC9dgO+ix7O/9IcGZEkyyUGZ7EPdpZppoUMiFwi\n6l9o9Lx7d9YEZVBU+UIA9tTnEUtI1jBHHSdd/Jw5r9krq5m/QakKeanVURiy\ngf4s\r\n=mF7g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBDyB4mUX35dlFD1aYSQMn0aMDCKQxAcOlUyTal3R3eAiEAs/TylufY1vmVB7sfsy51Er7Zac2Jf1je12uY/7vGmlA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.f3b365de.0_1588235261809_0.5539831291182966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-icon":"0.15.0-canary.cdbdf807.0","@material/mwc-icon-button":"0.15.0-canary.cdbdf807.0","@material/mwc-ripple":"0.15.0-canary.cdbdf807.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-n0MmOLL98aqgNuw3+HYEnFQVkDqsAB+HHt4MEjIgmrjOFqOzTpGm6137D/I57sAWnnWbOylwMIxtwrBvIgMWvA==","shasum":"aa242d52e91f342d1e0ca50f1ae66d5148cf9de5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.cdbdf807.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oKCRA9TVsSAnZWagAAP6gP/j3pgaRGKzjty1LJ+WG4\nM0qNNTBx+YCEW317wNpvo01JGAKxC7nyoCfZYvARDXfoKr49iRPliEX9k6Pn\nZUf8alB/4HOlV8jyomkF8qRFHgLDZRcVqmRLBS5wjTOAGEls0MxT002bpu3O\nRKSHiLn6aatcBU5ywZW8Kqjcdt+y+PBt/cTFhkuu+JUQsdqtrmFX55SG5hQS\nfldprCFKEXtCZF1ixZg4lr9OOzhFsG3T/AqTYmqoynvsLtdJgxUsTvOXnj/5\n6N+zxFCMXycLNkos1bZIBZ859KmeVi36EDEExBwO48xV7xJ0MtzMjDS0jzcB\n3sHttWeHLhuj5xI1g/X2hdGooDmHH+kPd06PjUxN43mkx43StK15inAHL2+2\nd0S/5AzpBhPimiVPXL6zV3H2qjDsmw5ydwts0TNr5z0tgFztMIRhHWKnc6JN\nVbWkMQxRRyUBsdDjp+C8WHKSd5fXh/FSdKF4lq1RYLanHG14/afl+jCLlJ+K\nhqVMBMOKFaoRzedRMrjVD48MwQZw7ePQjhfkuBqcbTqbop14QVp2gyQix97T\nAW4s+P5hZ0xAPbyP3hhzh5fcb03K83IUs1eG3mnjVNLDykhbvX3WwUkBvRmn\n4JZmla5y0N368i6BIfFDl0IYBuO+MNC4Tqr5htnEg6e65KaZgnN2JQIl9l3R\nGkYF\r\n=37jy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiu14DbbN893If9ZnQfye6kkvQl+Mas76IIqbT7LrzsgIgXtkeQlSTSF4CTF3OSZD7Zg705IdgQMKqgbXqplGzvKM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.cdbdf807.0_1588292105856_0.41417228306347376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-icon":"0.15.0-canary.9995ae17.0","@material/mwc-icon-button":"0.15.0-canary.9995ae17.0","@material/mwc-ripple":"0.15.0-canary.9995ae17.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8OV957oLwVKcnfeBnMH4y799NYyBzh+9RuJ3sipTdNOvbHmHbzDwfZapwY3tpmGL9F5DulCRtmihIZQDi24rNA==","shasum":"7e5793df8a1a558e799f362c7b49638c18fbf442","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.9995ae17.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG5CCRA9TVsSAnZWagAAzsMP/iIBLG9EubWAKRDsTxrO\niTni8teGN+fxu902P1ObNS/VB82QLhCohcVuRGvEBUjRSVHfNq3+DalixRMh\nGuI80u/akQXqLiVFeRH37/bI9fJMea4XRjNDywiyNWroXElMpcWiOUTxQ0HQ\n+wo7JVeVPB29RNqghsvrVlzRGL/nRo/B78GVQBp3/z63/tLrNlDxVWyxyBnz\ndYV+0elRgb4gvps5wprcnjPnzpVEBFAqY7LzIl9Eb/nZR0hWvxgZ4LUqaXD2\nCudpS1PmqmFJhzECUiqL3mYArW+WCQsKYYM2YUEKEf+Zt2l0G2mSwpHrDgj2\nGGcypDz8fNOyshE9PVxwhRqP9IyXpNg3XPXKN6L/GVXtJ8kaWERee2sDWn0d\nMF5DLDfcpqw1DAl0RUplkgHI9kje4Z6lwo3er3v/jd9emqNCXNa2XxFGh0OQ\nK2Oteh0H3MCkG/2HuhFvVqsV8jliUa4ZuVH5cMGgeILeUzYcOvi1qNr3a7+0\n2OlZm6nDODVXnwjGnKhyaiwZDm/hS7uI/Sv9+fvsdKIbZcmSbCGjXzqbQnN+\n/XKGpGbrPop/QQVj+cRoHKRsvrtxxhT/Td2zy3kbrV276M7KswPlSz78HLXI\nfaOfA1eDHsH9gDyLzx6zKBfuSNU1jc7a3dTfW2ScJNNsxf5IX0w30P6yS9uN\nq9sn\r\n=EJfe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2N/U4n857mzkKHy7GvHWbGl82vSvd/vHr4xvy09PO8wIhAIr3tRwM39UNQ/cFLe+Rv7jq66pgNERtq9tcbOxmjw5a"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.9995ae17.0_1588358721829_0.9354009209062579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-icon":"0.15.0-canary.457bf035.0","@material/mwc-icon-button":"0.15.0-canary.457bf035.0","@material/mwc-ripple":"0.15.0-canary.457bf035.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zA/JvahO4nt0Bww7q/yVJcSo+Dzm8YLKsJHjPRDt1vr49XsVQa94MTBGA0LtJa41g648kMlaxy9ymcagkZrsaQ==","shasum":"719b91d0f0049de6d3f0cfbc0ea67f1694020bc1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.457bf035.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIvBCRA9TVsSAnZWagAAv2YQAJNllgaZET9Kskzkqfx3\nIeEX5AbzMaFbuJK3uiM3KX92IVh0x8Shr53B4b4ArmPiVUUfcBdz9S2alc5K\nEjNvCLQfcOCCAJPhWLAOC750SZ2CDhh+O/KxVuimvhK2T3wNn60KGPps8fJg\nay3b78nLltMNz8zHntd1qqHk63jw2U66CiBTnczyuqa+a8iK6VJi9xVaUjHK\n+qmqfoVI4gYODd4it9gtN9xbSl4dyrfN79Lga9YSINW3cQJ4QCeCYSngyN5I\nJ7C2WMDT0de4PWk1+qeqlNxFgw1/E1rRwIqtgswKIp1pSPQYTWVP3JQUFzBc\nOq3urOd2U4txj0Unn7zsbCCFnkWtV3SjGXnN7n1C/TPftXY43CN8vCkSKMHR\nRtsL+PRl6Itp72Q/J0gWk8r9cl7z/rcsp1+AVWwLPL4LY0Qn/oZWyI220NqW\nNkTE0LKPKMOWPig4VhakeZqRhpvHRm+I95z3p5agrBN54wid86BL+KjOXB0x\nstp+dSd+bm0RevorJrT0tmsYU7KaRMyL1WdShk4aai304hYK2sCXB5WhZThK\nTP+UVeMzDMjv/rP00hXTo96ytzxFwUXapc9Ye2rtwJB9q6dAQfwy3YdglH/i\nZbKN+DyB5B/O+ahf0R8kR/xiZIBidwkRZNCMxBbxfyGbp68mzqgVml/1LMNF\nJtgW\r\n=q+r4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1QnIeV4LYj9rlUdndSU285r8UlAsLyYYj2DMXpf1RJAiA97VjwWVA8n7AUch3RH2QaFQzfbdBA07CABkaeKJ9Xkg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.457bf035.0_1588366273109_0.19477836073675725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-icon":"0.15.0-canary.2381fd02.0","@material/mwc-icon-button":"0.15.0-canary.2381fd02.0","@material/mwc-ripple":"0.15.0-canary.2381fd02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+cHdc6GAeIehbAYo8EUHg2nbUqekjGRgEwNlPHv9B+3i2h6HEx1UpSSjxSIK9LEQcBspVsRHHy0O4B9s1jf+sA==","shasum":"2adaa6db1ef7510b5cbb3224ee958a73f4b2153b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.2381fd02.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPjCRA9TVsSAnZWagAAbSQP/0Z14NIJuYHka55mDkNV\nJrWv0YqfHx/Zu20RronaX0qFB34NjPmjNLDULl5LchhEn5pUa0pmueVGYqdk\nlyW7995pIu5N8ZyapR3vjSTonzln+EQJ6q8qMe7fnKYkyGrzruknqGAQrsSC\nEf5lerlu0B59qa3DznRkvk9zD+EH8NlaPop1PvPGwtkQ/cTP0GHHGqWgKJ82\n+HLrfzgP2PrqYLaVoY0r3lg5Zr9eFTG/mAGN03cUFB0tq8rjAwViOUEgg+12\nB192Rs0GZ1m9k+BsBVsFxqvvFHnCdeiGT1yTp8YVIL+9A9Lu+v/6bxj5vCvI\nQ10Rka5sXmezA27s72unSrLC7iS29qG67KGMLMjjxAvtxYG3naN1LpWj9ZSw\nrtk8F9ucvU/BmBFCSv7z/4Q/HEoEel1I4izrLRmffb5hvM8967+2wCwLRuTG\ntqHRaVx4Eu1rg69NrMgyWmt51c0fMkQB/rIFIzI/R82xWgNO/JIF30ytO3/9\n3UH+ItIK0TzgI4t5mBMNa6IZ8/XfrK9wI6perEjCeevTcibBnyiRv9vOTTKn\n6qs4hx0Qmk9dMz3rTnPBoQKprZfEEcyNmRRtZkKHDkJ5kXccEodpSFWdKpF8\niUFf+feLl5l2O66BhZdrNIDWriIZNgTBkepuMvjdx6mMcu80LDcEVaWCfyqO\nK4SM\r\n=DXbP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbCL9ZQRF79grhudhwAumyRK439HEAhvi5wuO5mH8bGQIhAKFF5JKqT4Dwe0eHQEkOKSdw+pPikXcKpq+2ZZ7foks2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.2381fd02.0_1588368354972_0.4391844602754711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-icon":"0.15.0-canary.b2ca9b57.0","@material/mwc-icon-button":"0.15.0-canary.b2ca9b57.0","@material/mwc-ripple":"0.15.0-canary.b2ca9b57.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-R8NBu2dJ3ubdbQWBaYHQBKYvzuwLZ3i0iPyatLABuO+HHrwsgEpy1OoFnhUfRgoBKn93OaEvM1JbN4Ls7HtPlg==","shasum":"b3f0984b2abffbf57518a93da8adfbc55d66ec37","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.b2ca9b57.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZfCRA9TVsSAnZWagAAlZoQAJsc2q6uWEqhd5Zxcloe\nIaG0Jl0AaBTj6Eg87mI15fh7dH6BtKCXDgUw1poth7mpyTtPPlfDte6uGRdK\n2HDaldpUCbL7HFgbfvzJdeyF+dat9engkKu2iiamOoccDFP1IcznjNJHNjCx\nWDi+Yi/thi1EgLfNCaB3qUdA43uCLA3bOuJQ8Wnhzq63s3BwOesVkZfsyeyu\nA3f2gu7/T/bFNwX/lYOjBAIK1tpnzpsW3ugtdFSjZSWiba9BA66lccLOehEA\n7JAjJCqLkWYxUCpQlTSOyUyBaF0xllGqL2RZCU0EGjb2ZJC/v0TI9G6hdFoe\n7kV1tfEMY30GInvae5ybA8lLru2vLIKND1qavOAaWRRhI0uy3WSF3pNiD7I7\n49Lh6UjMVkRLCbG0rjZZP2q+VHDiiBszSJLyz2AOVa1ek1scKzXPMufIoYwt\nBzt5Hxxrdk8owOaN/sh9BgctAwQ/CWJ6IgzT7hCiH7cE1AUH39JT389ytEGV\nCFGZmWlKEhraXKIteKR0AKMJzvwJ6gzV+lkCXWGdps/0kRzBZbxvEep63ka0\naBBJeJH3qrHo/2QV4FNyfS3play/dcPeBkvP4KSFjmo09UgQYXtyYAbbL0YP\nthV3a6l7Isb7Mtpo4k/jDWK5H630eKapVObnxSWMQs8dhhX1fUPdSSCU+SM4\nWovI\r\n=rmPU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5y6Y7hvGZ94978nUMlrroJ0QQ3msXu/hNyeQ5Bo0KMAiAJF/W3p6Ryiw3jIcqf/0pUk53KMjxtQ8BmJfS3nuF+Vg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.b2ca9b57.0_1588368991405_0.9977808510758439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-icon":"0.15.0-canary.b2b088e7.0","@material/mwc-icon-button":"0.15.0-canary.b2b088e7.0","@material/mwc-ripple":"0.15.0-canary.b2b088e7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hlcIE28bXZsgrSnVkp4mqELWUNN0NNehxwZpCoyQxfgemliWFYvHTPQYOm1k9WSCwPN9usNuehLzHW1Gu1eTyw==","shasum":"889d8e5ee7d5aca5e7993e500860fd91ed762510","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.b2b088e7.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPZCRA9TVsSAnZWagAAzNwQAJ/nIMSXRbbzYczEsSLq\nMtReeyqQyBUcwNrO9Q4HkLdWKLecRDVpz6EgtRSe0n4vyUoLtyfoRfqDoqWn\nxD7x9bDMFM6cTvj+f/8oMhv+pFE97NcUVFEWVmUzfqSfhY9b1S+bh1q54Blq\np4KhiAdBBGeZn2Zwc/xtRiflcDwMxh8gb837mS9Rt1GaWDCzr6stqzzpT/tk\nfz1tGua5xu0xN5rv9PaLis7TR2QrkOFXwY2fTBUilbHZSISbRxo6abKY9eix\n1GuWdABoooGXpKTuu1f1XhPdw00rUysHXHVEYFyv7tsS30y+cm0UFvYO6G2s\n+q7ftnmTwWJhD9uRfXw+4kS51Yawnj9YvbKrxIMuyZtkHT+cF9f5DLcpepyZ\nlNqu5YdiEEfoaHSEkoR0K2lTQFtjCPrAncbN3SjtcPmw6SWDf87rNX9A7HLn\npQO12TRe5ZGDkNlfK5dMEhVTFPt5VdEfbAek9oObuJZt4d9Q9T4b2I+0ABYE\nbvFy2/QfpZZXnYgZe1SOc4Lkq9L8ibNF5TJlPz5MqYtpP1JEdapIwk4tiSOQ\n5+WHWjZWrBhZe6bKNYnywVPSsqoQXCStc6EnLQ+Qt5a/RSdAHkFotNaBoyOF\nDqVfKNKQQcvelFJ4oetrw4/FY0S61h7jKp3dW0EnQDeQxzyZ5XeoRkuhtptC\naFjf\r\n=9bK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACXSAyJv/+hh2JBszu/5V7uYHZBAwZ2waj10NK1VFwxAiA6U0q4yNW2WlHQZ6CC59CHvPRULRPJWB9yNd6tY9/H7Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.b2b088e7.0_1588372441040_0.2135392752041192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-icon":"0.15.0-canary.fdd8f69e.0","@material/mwc-icon-button":"0.15.0-canary.fdd8f69e.0","@material/mwc-ripple":"0.15.0-canary.fdd8f69e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zCvtqshyOEWX9PDUEg5VXhDVoebAckEt3N3GjS1yjf0EkUMUSWHznb4GBXSxI98zB1wlNdUg8uZVqb23zEWONQ==","shasum":"9ec96d19df6a4a6892c7be61fe04f7403d5b50b5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.fdd8f69e.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvxCRA9TVsSAnZWagAAvRsP/1/Ve7PHEjWZPlkP8YYg\nxilddHhLlXDB3N+Ez0dvEqXHDzJAZDg3VViM0TuGnM2fT08pQ9oR+e2L6PSf\nJgSSChQt5lCk9FdDkOfTIj3uNpSRan6pltDpmcLbaqAYNCAH7wMkhHcoCwin\nMd8Xz4dkuL1qKAYtSarl3jhpjqEZVs4HqkF0Qvi52yrfb0wMRjTPVc8jcKFW\nlZxtXHuF50hqLZbLBY9S28IN1sflOJmlxIJLcj91eDe8JKasz8EycUZ8+Xnv\n0exF2ruzpkC3bffKpLFZKqv6d6M1B57tJ6G+LklQ03r/KURgLNIpfZKiJPSr\n5b50O7vLEuKEDLLJ5YIuzfTcGlpQMnPZmJi81cS8xw6BK/58dQ78Y/AEAySZ\nidejqozd4LMxFm5JxPIknvj4NeBCNw/2Cd+wUr19e4LDMZVNoqsaONJZLZbt\nGmYURU9T//UowN4lfOurHS6vwYgJy5RbbATEKiQ3R8iHciaU4E+idq4RfGb0\nns0a2Tw5xj7W5XVp3fCWrCt5YhzyY5WJCl+45MpeJj+faHr5rYwuWDAKG5jk\nRBYdNmwYf1PDQEawF8PjR3v9n72lcUJSzBQYMjgenm2fiFMB9QUqFUmO7Frv\nuqyW4zrNXkorGekiAZJGJflA4/b8N7bEAmKO+Wb4vTJfmEpAc7UhkNksix+H\ni4e1\r\n=nhvl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR+RIVExFtjT2o8OYBLtVyfqPJBWjlXW0jZQMLKk5/5wIhANqOmF0nzR67IVHJPFY3ToTnAwTopc8MDk/T0LHjBomK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.fdd8f69e.0_1588378609265_0.3865270745635747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-icon":"0.15.0-canary.730f45a8.0","@material/mwc-icon-button":"0.15.0-canary.730f45a8.0","@material/mwc-ripple":"0.15.0-canary.730f45a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oYPMbs7L94OGkx9qGmxvVg0KdYlt8G2sL8eIrVZN6o2sj9AYCJciz/zbmpew4afFYtXuf9yfQAt0lhL+67norg==","shasum":"710f5a2b923ddd55942b059d322c1d9c49c13593","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.730f45a8.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1ZCRA9TVsSAnZWagAACQMP/1pBcdHStzmRl6vMVNMD\nNuTDUfrQctAFudoh3oN13u68hp6KG8wBOs+8luqRoulOxQm1GEtVnNrFGEYX\nNsGVBHoP+r5bSejXawzfHaY979legHG3aKf5tg4RBi7oy3AW2LSmysJeT55O\n4aOXRej/Ox2sMjWM/ecBeOBLCB/tuPEeF+25Xae2pUEotiE6Vh0/oDqjxn/s\nsFA1ZJSqvpK+RgScG1F6dwkNbhnAipIGCO2ur6/yHSpE5k0GAVxcH97R76KC\nOdJcDtAH+S6HAOO8Y3Y7F0nfYmT/nEevIw2zgeNsKpBtTbxu+RkUJ4vNhMDh\nOQV4GZEGmZbBNPB3wEBLOG+LrMXTObI5O/B679fYDoSh0K3Z8APIB0SZhXln\nXYsAaOHxav6JqPAUUoElHHw3A0ahDNqeXn3+Fn9lfliARIvGb8s5VbnwhZQd\nzvQiDerHWt11nPHlfSbz4m1ONJROeYIEa/CyswX10ur0tAnaFwhN+Y6c/BzH\nQmdmw0Indi448anxrXANzlkhlkcgXv/TBrLk4FQr/gnGK5gq7Julg77UZyo6\nnVACJz5ZxedwlQkuMQXGek1AaGbfxuelOE1WixCKmMQk5wAWyKFMoq1TUpqN\nMr8josBNrtgpUDuD5yzew9sG6IHFCKNMTmOxSbA26+UQWfzVdOCrs8Or1YtN\nJIMu\r\n=vSP2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGjobl2jUXs8ELXtbsb4601Hs4R0YLOeOlM9UmEujtvAIgf1l3jiiIaE8t7/kmuubo4GbA0BO6bMngD49D/YdyuZU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.730f45a8.0_1588538713266_0.650324329355916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-icon":"0.15.0-canary.4219bd20.0","@material/mwc-icon-button":"0.15.0-canary.4219bd20.0","@material/mwc-ripple":"0.15.0-canary.4219bd20.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8gmBIQxHDmVC6XIL+uGa8LuGtfZVk9n5IXoeCaEMneon6MJVLJa3rAIlOalEhTyP+23za/qM0E2LeKOCXUf6rQ==","shasum":"d43d21ca84f2f3bc42dd2e8ab6d3b991afa8c3d2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.4219bd20.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYPCRA9TVsSAnZWagAAxqUP/iIFed60WriPqOqr2IH0\nWorRtpv704WbAKEe0CFY2UzSb7yaeamCypVbAggaFHQzrv20YwEkrBqH30rQ\nb39gJ4pb+MGens4XESnvKpOYIhYljLkwdcfSIGygKVLhctnTZneOUBSAtAF0\n3hjASuUhGWdeZSuhaYTBxaT4hlJD5a9E9mF/MmK8caoA/lYyWXUHc+2HFkwV\nZhnEiX48+3L8hOpjy4B7CjLKlKAFLdioMasxLXOifXNWFGERji2I6KZgDQhJ\nEyM64glzpGlrITkNwOzJcfPOrR3qTIyfkwwF/D9W9/US2/ckJGEV3t+eNjmA\nvjU+P0dxiac5EwwvumQ4+UyztbDwnzS/1EWOiQSJDkLoCUmBePIbqyk3sROQ\n/3bvUTp8TO1tCFWikklNIUJzgFzTRkg1bBNHQYfs4UP0NyPaaDS7iYyjeG/4\ndeOWmSVQYchWuf+8qbW5oFaxOGjmKiXZ/QZkAZ9oc7ok0EtBStPC08rQYqY5\njvw3bMkEXd8N4F30EmIQVxVoMUd/vfkpODgIX0f1LnvbV8Jwjsk7s4Oo9qdt\nGb4CuFAoXqbiDBI6jCWc7UthQCbPr89KOkGvG9o2iw+kg9wvd6U1rnaV6y99\nDbLY2qCS7f7UH5PqWe5R4I70Slghyg5OteH6eduIsUF++grrwE3y7hxAvTFD\nKS+4\r\n=ZOuD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlKSQ6nr8MCWoJVuAdmK84zLejmtAjqSixJLxYeIqqPQIgVfZ7XJ19QTF3WUEcOliqCORMJFd0M1DM5NBg0ah5d34="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.4219bd20.0_1588635150664_0.6894484283845879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-icon":"0.15.0-canary.1d83cf6d.0","@material/mwc-icon-button":"0.15.0-canary.1d83cf6d.0","@material/mwc-ripple":"0.15.0-canary.1d83cf6d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hXyUZ5dWVeifESWG1uS8P0mGcx7i2TtEDVb/P+fS2ENYwkOeTO+amOIGGp71tXxuoo/r4XpQp6BYCggix3Mv0A==","shasum":"93fc4c92c7cf696b0ec6a42f5a3ead4abbb6cec4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.1d83cf6d.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ58CRA9TVsSAnZWagAAzEoP/1RTUV/mSVbCQKeJWf7+\nWMVbFhcs1xdiwevIsUv7eClpWUC7WcuwZ6iixCAYMcHILbIDLDgRPnRwZ9TJ\nOVkaXCCqyX9lstPAIbrRhSdox58/9Lq5AdbALSwbFljCh5rDCMzSgAiAC3rn\nWmBKdR/j3E+HZZD0vfHezRLqEGVea4OQIe8gHGpBsxpO+u6vwF8r9Ejmw+E7\nf0l0ABKG+4W3kFVCUsmKpmzECpa36PLulXWlOR4UpWTPMpIEo92jPh2Zqebb\n2kLR8hsp0ZkAMPPWAXqBFnW6U9cmLg1911P2s6CH+a1Mf7hoMmzIJvwFjJry\n+TulS6VlcypOc7ci6kl8bH386zlPr89C73ED6xrWA2btdn0s6XT9xfVy7uy6\nEmwccKJqtux/isfVsjhB35HOxGfcvxLVAVZVqNSFsx9Hu+q+iq/C2WAGZMVy\nQZXmr2PFGk9o055iha9RIiiVqr1Sx4zIJ09mydSIdXMu4cOD+8PhGnmfoorU\nhLm6+K2RbhNMaMmxhLKBLBhG8QPI74a6j/hCgyu2h1fKO4sCLJoezOyN7fip\ncV2t3yfWSTkPGhO1BY5VyJ418YA09rlmNnlgB/Lo9Nd9IdMTKzWLai6sM28I\nMG6QvpY9cUwZg8uxXtuOAtA5ZxHM9AEXol3OZaRDMe1BjBr6kY3/I1RGFpr8\nPpRp\r\n=fbO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUMJK48qYyPaATmDVrBqN/CLyNOIPCJSkzjXV5nlHSaAIgV6LXk8G66//OxWPQR55Wj9ljBY0xAzrlaRYr014T+Ow="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.1d83cf6d.0_1588698747972_0.054327927704498125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-icon":"0.15.0-canary.3bfc63aa.0","@material/mwc-icon-button":"0.15.0-canary.3bfc63aa.0","@material/mwc-ripple":"0.15.0-canary.3bfc63aa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yDX3lZettK9u9A2mjY7VjXEHT7SWefFwPI5/PoENvBzyI0Puv3M3izZbW11ZiZ75WJLfyJyiY5sFndG/vm59IQ==","shasum":"ec7d6750fb51173aa9149428a74ce16fe6781ae0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0-canary.3bfc63aa.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesaztCRA9TVsSAnZWagAAgdQP/2cqGQ/zpL9VUUbEHKCr\nmD04N45BLY2aurCTjyYFx+Ur/LlQklqKR1AOIhsp4S5vesf7SlpAVIFG9/Qf\nx8gXZwNKRuuT6vt1CgwVQYA7/YSIQ8g5lhV8TVrG8aN9X5/xiD/Oiq4x3ybT\ntMpTy2B7qeYBSH1fbF8ULbwjogM2Z9DAsMZMbfDP4ClfeJ02InlPjHsevp2Q\n+jnL+rxMdn1ZHh097AFwAcHpsHiiNOzoGmu3+omlOPxE/aTTxAsdoY73dD1m\niOxUpYIF8xTgFuvjGfZcV3NXkHt8hgDXmLEwUT/x1WJMK+TgoYuxQrl0Q4t/\nqRpwBmdQNAjlKeHLxglgoxQLQ/aHRJfLd3jboqaSo2vzZF1FG4Ic1c/Ck9YB\n6bg8s5M+qypUpfl/TM9CxEWDVpQEIUFo721VoDxESPAUN+YePwLMcXER1WKt\nqsQaKUgJoR83RwwOLcIQ26Bp0/AIRpcr1t0lnH1zMhYBVGA2KhUH9BKywf3n\nVOIN322VEGdOladNmgNFsob8METqp0EXfVlDdmg/oXufpswP/684lLA1r4ME\nLiYQXj5/tIEmp1jrFTXUx0cGwC3Oeud8zCSDE4jE5ZuJ3PkZ4fe7t8FARaQR\ns3R5txo7gpozzzaNoAI3ddDdSdMHNr8Td84N7Bk2xTJSQHTPvJ78q7xMSky2\nglRm\r\n=kbje\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvDlLza5B69O30GpAMDw73jxMCgxrZ+aDcETgoD6HcDAiAFIu/SVJONC/jjdXxPXS9Gw/0qX0Nl6WmIENzo+IxZ2Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0-canary.3bfc63aa.0_1588702445131_0.02298990407992796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-icon-button-toggle","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/mwc-icon":"^0.15.0","@material/mwc-icon-button":"^0.15.0","@material/mwc-ripple":"^0.15.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-hF9xMfiu2QTUub9boLoa3QpLM9/Vf3EHVeuMRX+GbHmbPQITNrGp1fxesBIQZXQOXqbW52Edq+d4qzpypGNgRw==","shasum":"18fb3b143b1fcbb148e3791aa60246d6596d3063","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.15.0.tgz","fileCount":11,"unpackedSize":37036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepmCRA9TVsSAnZWagAAgOMP+gIJD/QMvC88rJp/FPBK\nv5bDRc11BuOGDwnMjDBlrfWdN4/i6IO/GhbUbSLm9wk3E/ywnZBPl+DSehiV\nUVzojhMoiWT0Tijika5J6o1q7RuCic05Njr6a0WkiKNU++wJjzAIpIymczwi\nXkBRWzGNzzzCXqM90A80st6T/g8Nii2vT7LzO7l+jw0ncCk1gK6vN7BBuZ+O\nvCsaJk6DKvXGbtIqggr+mpb7izyw67zSeykygrrOZIB2+Ekb0vo4Ltcbo7h5\nTWA0oStq4lDof/RW5F9HMvfkupt62EXRzWpwcER0EtC0lLghedAQv+5dDOGO\nIMHJ5GT2v76ky0MwW9UX141E+8TP3Jmtv92ab8Y8T3GoYO6ZvBv6B/pcFnIO\n6h/uGYl7KG/kif8+CxWtgz7DnYFrvgf9vVwJJxopOyJcP91U/2enw/5lLptW\ndKvpLJrAU01Q4So9iCxqvbIY+v/zJj/f/+RvQ2F8EbiWfX4ajir1LDY/s91b\nJs5gf4tiaiznGoSaR1hk6NpQ/I9ZZ95s2Cjhj4sf69fMFEm0QX15Toq6FAxD\npXZEzgANbiB7p8DxJkJdjO9PxFiMQH2D6ix/kuIBcrKU22DXOL39oGpSR84a\nZtWvr42KrVsDPaYfxiaGV8z3lBwXOKXtHHYkgPyfiVrdA/fjoVN9hr213JVs\nd1Dc\r\n=H+5q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl0NZAxS1q4J8Z/Ymn/UAmFuwfBorsyhdSk2yxgbjuEQIgPsDfypTMKlBC41d3QCXz8kl3KetORXhk8i0Ci8lU9H0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.15.0_1588718181826_0.3935937209828364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-icon":"0.16.0-canary.1f4e3d1c.0","@material/mwc-icon-button":"0.16.0-canary.1f4e3d1c.0","@material/mwc-ripple":"0.16.0-canary.1f4e3d1c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1QtOKnsrXG6TPxkt16iKB50roEbDsNwBCci+qAFf3ACx4/EhNsFZlT2cpwF3qV2NJxDd/sZjZ6Lc9zJ4ym736A==","shasum":"23467c12b2ebb2b2d06c308b8de85a65dd3aafff","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszSACRA9TVsSAnZWagAAzFEQAIKgdu2l/WyvLBWfEkFi\ndxQyACEm62g+SJ+SvIrA1CTGd/59AkDadtkwMksQCBRy+I9OA5PfXrF5Cb+P\nmfbk/ZrQ2lVQlHQHvHdisNqURw2G1UpJFha766IGO4/f+Ss8Zk/6746oPHmE\n6Jd5o2QYOIBJkMXA6BjhqGHVtslioGN2qIkCt7xK5QQ9LzFnugYKg1pnk+9t\nfGmtPF5/wyL0NJx4k6eD3v6tifY5zYyoe5Ue24BeTRvvJ/htu4F2/yC5V5IH\njkjI5o/fSdL7OfvRedx8yr0qOp72fLh9phfJxFMjINTh61YOBDpKuZcx7E5F\nGarabiNX7XyOZLE5IFA+M8aqcx+9Ny+2384x8T4gkhGyHzcXr3C/uE/slt0Y\n4K3ZUZHXdeNghmWNW4iveLPOYaNe1rJA7Jz7kgBFMuuWiyEzq4Wko0IEfmXa\nrOZOFFp1CjUyQ/c2z8Nv/MJZAVZ9QsTKGwDaTerYLVI6zVT+Q2R4sHBNg7sN\nV5AfWEnaormRKw5Sb0VUTXB9vFpZYDMHWPuspjmuPnFjgf2lxue1KfVoXp3C\nbXUiExQ6tNlBxrx4iD2xQ0tS3KGauiWrmyj70ZtkerD5NgfsdthWDrEe44r4\n5/rm1q/eNF3INxut7c5hlFv0R8otyrgscu7rST1M5SRwQ4V+FMFY0rAzb0sF\n0kIq\r\n=QwJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9mmo1i4mOF5Bj4UH18LYLaAW1ccF19zFk+SoKXegOOgIgG9Zn40FLKJsU22O0UpF0zzREb0OGqk8iqqDae4LjAvA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.1f4e3d1c.0_1588802688275_0.8499587041098948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-icon":"0.16.0-canary.bc8759d5.0","@material/mwc-icon-button":"0.16.0-canary.bc8759d5.0","@material/mwc-ripple":"0.16.0-canary.bc8759d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-c/W+9J9T8x3YEjW0z/PBIj1UiiyPwL1RSEPXi14RiN/B/5hptZGyhXfpgMfQ46DAX0w9Ah4+hbO6aN6rMWkSzQ==","shasum":"c9fcb938c4c10ea21fd6aeca045a2995647639c3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.bc8759d5.0.tgz","fileCount":11,"unpackedSize":37122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZ6CRA9TVsSAnZWagAAfhcQAIKQyL0EaoOLXZozQ3Fd\nEk95HNPF2IQ+o/D5MTtPs7QmzCBEyq/Mz/CSc+w+2n3SE5rrQalUdDkMkMUK\n8CAMMWq/94Dvqfvf2azTMKye0O9cOP3lwwiwNTH9jtiSAgElASCfEkWOH7AU\n+t109ooeqF8EBrQ0hF2hXac8zyOY6ACu1JlHejep7T3ahf/fx2RduL0LswJJ\nVJZTWtoK77YRJzNAMeMkystRp8j3saq1zmW0pNkx50xfK2Yfj9XQsNIXg/Fk\nEVlokwzQzcF6PcTM/0PQb1/R+OJdhB8Ro4antjszZ5yTBVl57goaV8Sz1g4w\nTuuEN3kKmIFL/T3le9hzKq5yP3yUwedf6MuChtUcJdLIhqwC67xDCkf9bWdk\nUrpEmnxyVVMaLzYFyRdPC0zU2Wpc6ZAsRi0TrQapTQMQ7ZBSmCZ6h29VZZ4M\nYxa7XT32wB+Yz7zp+hPAhG1Z1TZtHzkF/fU3sF/JGCbKwV8zw9dXbMibJMOi\ng4cqtslrI6iUijpRa/UfoErjqt5gnpTEr8Fu3aRKW01i8VSo1bJWBp7DYH6p\nZJifYk0rlN83qrjwb7qHs+Vb8DbZaJbei+NF+ABXmodRObmDirc+mgnD7vrh\nDTl8MO6cc4Yns4auWgXFAoVJ1suOgVO68KorhNftPNh7tDPLmQZOen0C63F+\nKESo\r\n=wUQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElfYvAvIzAxSBTWEhQyWd6scPXKXVo+O55WqAGAcYXKAiAQnmO217kmF8NeX/LZxfZA9hvClXai9OAMf41lGlyGRQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.bc8759d5.0_1588893306487_0.1492104374416503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-icon":"0.16.0-canary.d1379acf.0","@material/mwc-icon-button":"0.16.0-canary.d1379acf.0","@material/mwc-ripple":"0.16.0-canary.d1379acf.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0nn2xnQ/XkTsr2ij3bj136v8kV3s/yK39kiSikdibdAtNlJGtwUW03ZaWDdSlsVQviagDI1vn2oMSbSMudHXUg==","shasum":"1117421d794588a34149319e76b1ddcfbc8953fb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.d1379acf.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnNCRA9TVsSAnZWagAAYREP/jlaLoFNclPAOI7lWeug\nlcXlgsP88H+U74lwz1E88+s6ENZumCYFTAU7+WRlzksN+V0zkYr9dW39X4CG\nYjq5lo9dzXQMoQaz41tbM2er1+ZpcTyypMoBe8/t8et/JKb6M9vx0wQ1lnYa\nsikAmRcPAMFfz+njZdOQp6CqVDQS2Rx4ZTfCQwgfVPRgEGGms5fKXgqWmtyo\nnr8Yy5/gRNEk6wHB8ieDJsJw0QjgTlvaih7Xj3JmqX8SMbB9YM8Mu+1m0uvX\nQCpgRdP44+wUktw43AYvodgZ2ZBH6RiW/oyUlUCq2C0xXJZWeX5cRqlz3sME\nneIDCuqlb1WigH4KKxozanSGdOu6sNK+SHcr/l7R824CT7Y4AXmt1WpkE1mh\nzkVXP0VqYwBvZl50BlelL7xDLqbrjlBE51eRt+BEPCQsIq1lROqwFB1tNI80\nz4jErqPGqTElJmegjWDnK5XQLckcKGlERpOo+3O697dpdwCZLOhkSEpBjhy0\nzpSrV2sZKTbnZc++Ety879KcsEl0h1+x8dNh6hqcVCGVrLvlqwP9yd8GxEC1\nAk2Jt/b3VDSj81iTT80fILjwDJPcmcTv7FMjsxoNA/9lr5itzpZNZhujMgUI\nM1zWLpJDD8lcILKBGebY5TW35Uyhnjln0NgfEzTR1J5TKYm+R9Ex7H7zxhxb\n6SKU\r\n=co1s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCifDVW+BHOVEUZ1MdU2iMA2juUMlmas+asv8Vn2gDa9wIgBjCMlLgN4Utyk9B+dD3kaxEvTP7Nq9WxllVSP1LJyMw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.d1379acf.0_1588959693095_0.8376339634112575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-icon":"0.16.0-canary.58d51fc0.0","@material/mwc-icon-button":"0.16.0-canary.58d51fc0.0","@material/mwc-ripple":"0.16.0-canary.58d51fc0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xvFvpV0eHZ7hw0QjkYZ6I1pk9DjDGxmIIEJCRJxUVS2WGprMWvTaCONQbcwuGqfdWN7QMk4MFLQjf9eUi2xfPQ==","shasum":"159ed58f8c763e168826816538223b735e823814","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.58d51fc0.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBdCRA9TVsSAnZWagAAF+YP+wX1XuXbtJI+kN6BfRG0\nBm8mdOz8pefPUa66qvdCNAVhH6Lbrmoa9jtKw0FDG91Y94QcdSY3W/g/uVCH\n/X6voa2KXvApqrrraa5ifCMNVo2//k84ccgvrzP8fZEoBnb0pnQV9vZF/ZWq\nj7aJiCmKPjanVmkJGVHVBP/R9HpUwfuoqY//3SM+yitkavweKJwIEiRIKEow\nwgtqv9v8ncfxD5bXqDqytARsLKqTnSDyWdUaXP+XUu8xT3OwamLzIxDtu1B0\nhdm+zCBR/YVLzrLit1EDTJ5ftV0ezdyVgqmD9m6jAxo0PSBIHDcyuategYDG\nvmxn22/V86QWAaZvqYJolOzvSmfRFy9FyGWxbf5ej6YP1ArOKEnxk8O+lT4E\nYfcgOu03sie/iOjuzyoeBImLUTWozpwOs/1WsN5x9y6T2RZKhCaVo6EafHzY\ntf3mrm9P1xKEHzwr5gZe5/7EnavO9W19j7fX5jI9bgkRVxjo8yWcGMMURzW2\n/wWleOyOGkpRPntu+nHdClqETDzHlSI4r1KmRevm1XTREJEuIh7JAtr8czOh\nXf+qWixHQQ38OEsV0sOZGAkILvgY+LOBxRMFstM8l9xJT/GImr+1TC4uz1N5\nW+qBkGn2FPIe8ueYHpDkeStxg+VzjwJ8rv+rExBF9IHtcgWmL1paAt7ELcAZ\nd0zK\r\n=0mKK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBIaUYypSkC142e49Sq+lLXkoFlqMnZ8L80ga4unW10AIhAIJ5UUwOo1XXb9CdOZkIJQlTU3ODsDzyS/VoFjJSKfkF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.58d51fc0.0_1588965469463_0.9493443225677589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-icon":"0.16.0-canary.588062d7.0","@material/mwc-icon-button":"0.16.0-canary.588062d7.0","@material/mwc-ripple":"0.16.0-canary.588062d7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xQAFI430uxXsBDV/76cwRh21fGGh0ctBTDfY3KyGUiEO7xcvhFJu4YQVokCrnuczGpuQOHr448dm2TEaT411Vg==","shasum":"0c758d1967daa593d5f97c1ae1490712e288ccf6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.588062d7.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc35CRA9TVsSAnZWagAAq6gP/0pscNjnQmw79uqrTofu\nSDZuBcs5Yo6X9zyfpjNxj0CA3teAVDYDCiLImOsi6JPh+4jfoijsPijZ7kkW\nacKRfyE/mGhnRCn2EQU+nKQigfQjYcwmaftT37j9PJL9lEIXfKB1TP+27lPl\n4HtkC8cFQ3vdbF8ijc1JLLbXzP8sN3m4RCledsa41sh0nELnbmx+cyRUHnMU\ndSUjqBesP+N+U11A78pX1UaDiHwwicgOyBFy8v4YOOpyAmzawoU0OCFhQXNP\nmPMtTl/gRTKc+7uSXNRYsEtAaQSRfu7sFLii3aMmZm+MRY2+j3/uPk0UYOus\nPtNJTy1fQlwV1brpXRWR+iAXiErtZZ5vkNIJPfPqCOuBDLCGfiDhiUAlFYBt\nyq8BGU4q1LEABo68Ogu6vLDDsM77ci3CGMI05bY6jAD+rN4tNKJPr3qnqde1\nB34hJZmfXdpBaSCjSW8tuFnUMVsvVo51tU3l2igVm3Wv+cvEa8REQy39p9Cb\n1QarBlPKYTGYrQrqSHn7HWdFgCJ8UfsHb+9WelgWXdiWma36qpnmEbOUa0//\niwZWGEfT6bkCyAKEVj8ycPHa0SEgeHktDGC3sLjRuDtySqZcUkzA0b+JN8Qs\nP5qQKg1OUzKZ2ttP16w+UQj77YKqNW9OwAf02kWAQXR38v2dw5vFHN2c5Ru1\nE/DA\r\n=Upjj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRi8LWfErqvqF5mzLoTgvZq8DAWdNXK740vvwxaud97wIhAOnFkuw0XOUgMhP7cSt2LkbC70ftt+PRE8Y/cI4TZyAf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.588062d7.0_1588973048621_0.21037800955249164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-icon":"0.16.0-canary.fa21f639.0","@material/mwc-icon-button":"0.16.0-canary.fa21f639.0","@material/mwc-ripple":"0.16.0-canary.fa21f639.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8THBa6I/uUKcM5w8iKhB9uYOREOglA0TuGho6Zu1vgDcINhiKVzX7b2xGskxYKfEJYeZ/gx9fTb25smgKT9UkA==","shasum":"417c7d4dee6cfe4d054b93850be9065bb7efe245","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.fa21f639.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuxCRA9TVsSAnZWagAAn/0P/jzVYQdfcrg1zDWRPUVV\nEwphcJzXLOmjqrX9760Od0H9gebNEKFBYvxHxOjuV2ZJXOV44PiFY3eamIFZ\ni1rlVESE4WjfNKyJBnynqAvUu9NKsDOLxwwNNy7N+HigGm5u62Wwz9hvxZuD\ncsvO24MpH3rUinsttaSZ8ErwtWFHtJvYK4sXasq+EuvElvfhOPqjv/7oS8Xn\nw1q+USo3Jzdvmdocn7+zIhbbXJ88uvl6KOpQxZvWLizSE0YXnYdh4wWDWuPw\nXSTuGkdJH5c1py+02XVsdfLzSCz154Ndz5A8tHA0tPOOZNJRZ+wmhZzHuNxe\nRablojwAxRjH5zs8ZZvGNsh3TIjAKAD7mE19+rL6qG9rpgNImXMTQrae0ukd\nc4Ut7pZudfxGi4kja0Fb6+dkD466TkAf3AMqpbuRkslriDZULAIO40IG0ZCn\nzQ2AA85qjZiMEH+FRl8BxTdn9z0e2Vk1Y9dLWYG3CXN17Zzm4CX/wxYepzy8\nni/t9hAsgSB+uBgAYoGE4UhS+JR7csnqF1NFsVzql+2n+E8/SmQrVJCHU0RL\nQ/zYZodH1bJEXyVy7qp1Dec1ts6HLE88uW+HVn778ASUiEGF6evexr131Mp5\nh+GL7XnbXsy90y1Zm1DImG5lRKQZRKgVfPnijqisW10CtwEf2JsREBg7Wzoe\n3DII\r\n=jcaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8s6jY+Pvy/5HGYKLBGoTbBagzr4Z2wODjUVvgvK2DnAiEAyLxWihfO79yy0YJtbLgyZK0MDk71LFjElJCp9h5bTRI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.fa21f639.0_1589218224970_0.9109815709151075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-icon":"0.16.0-canary.2772c509.0","@material/mwc-icon-button":"0.16.0-canary.2772c509.0","@material/mwc-ripple":"0.16.0-canary.2772c509.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OkZBeq6l2+s3BPafqxLWwHiI1wgESX8jlHo7nA4c/dQ+diNeiW88lVk82y0uluDeCqw/7BzS4zvdJtlqVzOcBQ==","shasum":"1e4a199f5a4a012a6fbef8d339ac283767f82207","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.2772c509.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtOCRA9TVsSAnZWagAAlFcP/1vORJQvxMS5ijdrgsDd\nZuzK8Wj8rnZ+FnNiJTRaW5TA8G/BiMmTgXPwpUlWErGCE7krwjpWJ0NRO5j/\nCUk9MFtPnKsAyY0Blng0NJGOSbKxNafex54zS6Eq0Qy8wUizqphzJXLE33R8\nwbVqlewPR0enZ42g2YBlKt6XJzaYxr2nnd3pjmKiVvk5EdL8K1Xu9u6ECEHX\nMq6XBl++e6WA3UPIDXxg+UqsnzCxGm+QofHJFe+MbwiyHXBhmbqe7Xov/s2O\n1NeDw+3kg1pMvI6r6aHstzoOVbRt5oCWRIFmTHoRs8qZqmchioMmEzP5tRPS\nHLVy2E1uDBO46h3KAKGHf3/g38LQPmqs8IqKUSLvjvhKmk8CYn/peixrZIcG\nOcM8zdkkOI4gkAoQlk5Y44maNoK3gpGf7uAGEvpeK/XMSdW9ruEKGq/M0b94\n4iMnw+s/SN2FbjlU3bzphHWVc3DBY/5i7yt6wBHBjiRV5b/zp2tZL1aeZcka\n2x5pDc6gobDZf5BBGYYOoMyVBZcy3GC6+MXxZtW1but5pt4mku79QWtAnu+a\nw5Drzr8b/IHavbCxl00W5I84nEDVZ5hdvIYl7T9H7G0iTNMbWIEuBgZrRJ4j\nbwX7UdnA462G+FxJ3BqsCpki4TfImYvsnoyLAzSEPkOQ4hQzGyJW/SSqm6Ut\n9A8o\r\n=EQQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbHMzfsLUSZ/IE51lfnNdxD+RAZXQDrC9z/AuwlL7rmAIgCOai7EgzXPQ7Ju6vxfeE0bHvpCw4oRJsHI0H+F88sQw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.2772c509.0_1589222222184_0.4603364972289721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-icon":"0.16.0-canary.fc4796d5.0","@material/mwc-icon-button":"0.16.0-canary.fc4796d5.0","@material/mwc-ripple":"0.16.0-canary.fc4796d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xcIGuAPNgiKY+P1td9MoX4eRRHlyhHOFtSYjBdvelBJSUA/R+3A/ppOmad/gfdKHpG2pE+4VKGlrMnW+qzOXOg==","shasum":"17b5cc3fca28e155aa45183971b574012897df93","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.fc4796d5.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubAYCRA9TVsSAnZWagAAxvYQAJqk+b9qtIx2Vlg1z27u\nBvff+9JdVWk/hPXgRRBHA+0HcGnp8jiuGCKuXs55heECaYBWxnzr02ryTvhh\n9ZqMUwDMNFbzpUh+ADDI0aTrkR/0Gq5ikzEm9hI91XM+7gD9FbyYrvqgHo/i\n2h5uFqlkTHzkURGbeEPCsN9JzNSkcP7kXRZyvsusBIbTbCNiZSvIMY7b3iQa\nPkLTuOeSa8GIpr6vl31mujhMuqFll7j0YiKUhSTYxroqx1pFr/4Q0sLefE+w\nK+gVyHaMEcBahqNfcaOrau59OcG9XELd0Fs7TMeFNdlolorXLQDut8d4ogDr\nM0p3A8HFOzzB30P3YDsA04tcfCe5LU2Ryl62aO9Y2lBfedtya30uGfVHq24j\n+gCnjJJ3BkYFIX1JQt1TEa+uZi2b803NO4WuAGKU/wBI3yup8aBHuMlsZi/f\nSq22RWW0eCVbS36pP/NI7DXUwEfu+fsvDNI2uXj9NlJ4rcKrV+0DujxVWtcC\nLywUd+l1PEcBgEC/wg/UV7q4pKlQe3shj5VKk8WwZuiHKcGw0kZE6p0TNpnc\nvd3ILR4yrq9majkhzpn6ktLjlXrM4xmsKU5cjglHXd9ScAverjFVd7cVqrQA\n9ViSbtVw+qQKqIaZOndgeMfucjPnp4/LLw23dXwLfNYWcLX60Rl+GzR4l9rB\nAAeU\r\n=D+ND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfiEzN92c+KkXkvLbmQnG1OvGk+QlIKnoPZjdH2SUrpAiAQkjZMeMqOnuG55SXsPiOCyGu5MNtHSPZm/0gdPlkMrg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.fc4796d5.0_1589227544155_0.22513062703467357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-icon":"0.16.0-canary.0d1c5f2c.0","@material/mwc-icon-button":"0.16.0-canary.0d1c5f2c.0","@material/mwc-ripple":"0.16.0-canary.0d1c5f2c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-epc1m5aSd5OmnEmHEJpABt7l14TCrMPyCmpa7aPgYwuoVXsQia9p3DGGmUWmhXWVcXxNPi/1UWn3UX2MlteBUw==","shasum":"96f7f6ff93ecd543b880879d61c742fce1d1b3ba","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGHCRA9TVsSAnZWagAASQcP/RsG8m+gA/7YWqI7ngc/\nzM/++n8zYfK7L3YqdV1Hui7e1v97baouc1fhN5NIH4dzlGbN8Q+bAZi6bBhq\n+Of1lGVNRI1tzF2hGj3+PuTMdoGV+ZwMSBP+QVPNxKKeGTXeggLgQ+XOSKC6\nJbFii8KnTPrKl27MmPXwoUaFVwf0mf1nQEFydC+S7b5rVONhZD0iszVP73UZ\nDZ4I72dybDRlN1pm3+26N5BuKrqPotac+JD7wex0VkC1tG4Z1Kf6Xrph5NuU\nqr4efzDaJ5REYIK3/DVacUQF9nfzkGiWN4McnKIcRIQELZ/R6nMXSVWz7uXn\ns4lFzW0we8AWwclvUfYzZi3Bd9wWmpgxED9vKcjDYx1FS7o4E0nHj2tjZHDv\nna3pIz4MeAHj4euarCNIxEg6tECLPnVX2mdjGEHAfndZ7+KlWyqkOa7KmCYa\n4kLl8ilzr0nOWAAOdFUYZpIUolEXwTfk/e4McJawO7SK/4xh4Qk2s+glt+HY\n7lV4zkdYN3jsF1i6oj/do1fODUVjuV44FU7JNJkmCa7cax8NdwYKevHGIzSW\ntIc/UkNUmeYVJ3v+a24uXxlIBagESFmmcjijYuQhgabAfB0XcbGPgINho4Ep\ni8y0+gM9g7vjsEU13lFDDZbDEQbC1jIgeW21i1NMqRaRGIn92HiR+lUJzBMr\nrnXt\r\n=B5Pz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn9K8k+u9toATs0Ee8Ymu7CjTcUGVtaNj9z8PKRB4DMAIhAJHTvFhQWtEXWPatUgLox4B1daEF1ygOuZ6A6VOlGJlg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.0d1c5f2c.0_1589232007478_0.46051811852443447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-icon":"0.16.0-canary.d083d93a.0","@material/mwc-icon-button":"0.16.0-canary.d083d93a.0","@material/mwc-ripple":"0.16.0-canary.d083d93a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-K9vN3mXV654Fk9WivilkQlZp0G/2e5g/WidgDaVbUHhM8zdjqsCBanYJWsB4KtIQHVd6vI1jqnwWZICWIpukhw==","shasum":"34df0aa8aa0a715ea857d1e69445a7c8ff3f0762","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.d083d93a.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetaCRA9TVsSAnZWagAAlS0P/2OSn1HUOaovOcvCuvig\nsVWZQoHwVy+P+k8O6bqs65R8u9XuHEvtvUlSwSTFFRNmZ+uqbiV0GQD/YBLT\nfwqiax6ECKotZqV433jfFAjWRuyl+vjcHMSpL05H7NpoeKDMtZeTy9eELlC6\nWdL0F7Ny0Sw1/TX/XuOP4rRVSXHAcBrVy1RndP+HFppq+AgQrELjlMeZ4rZD\nBU+SZAYehlDWMXDysT+9b7AXwS96NOUUmLyvHeRyfuXUFjWClQRnt6IYYc1o\nx+n2L3UQRjGso8W+0YP+nxz2rvZi8V/u7yVBIiNHipjoPd+SHJxcj0ej/QD3\nH6oDwvUvK15u2MKpic/7FkdJoZ2CLcqwEHXACHlr0x5HScdb5X1XHXrTKHMg\nvREjCsPbtDjNqY32TV0JGlQQhDhYEe+1qQBUv0hUhtHPmsUw19Dqy6bO96WM\n+bDEbifBDC33AwVncEOUPaQGq7o2duFrdml11tD75Jq0fsACrL5hA8nFKkOU\nefpjR31NADMukKeofD4kvuWC6v0wxiessF58ypGMUmxJGRD8RbQxzDtY+xq1\nO0rA5nB7j68pUesWM++3nuQQupo7qwcIdzKKkEdKoMFTw7XnH2j8WYc2uflr\nBvaUl0s28JNEwkxBiAizvvpIaNs0eq4biq/Wa2zwI9XuJMIe/v1NWiV8HUMC\noMd0\r\n=T+jP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBDizkpBZ2aPBBQ8RdSbUw9JdepP/9F/5kLZhg76OajAiAooKfUWxocPwA8Qk1zQf1mLLAvQs69fwdHOcV2zROi1w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.d083d93a.0_1589242714185_0.4512759316078445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-icon":"0.16.0-canary.c95d429c.0","@material/mwc-icon-button":"0.16.0-canary.c95d429c.0","@material/mwc-ripple":"0.16.0-canary.c95d429c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-okCfcIbdsFQBDQFF8tbKaeGoyqHG/VZhzk79ME7/aVyjDCVVgBAkxcFq9amHr6vWUihwkr2Tto94P0ER9YqFxg==","shasum":"1462bf4b909832d412addc7629b7e85e0fb182dc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.c95d429c.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcNCRA9TVsSAnZWagAAOE4P/1ebMpD0eL71R4c0u9xv\nytNcGaicIijmZ5I4TZ80vRDzZc5yY+pWn3i3VODMMlHHq6bl2C5dbcTq9bqw\nw1EuDM2mQrSdRrRNjxSraWfaqvLSYAoGv5zy5h8F7OCF9FEMEuI0eLglffXV\nB4lpQ7A4lsJBYWzRbzjKIPxPUj4sSx5JD+cvmJ5tPBODx2D2TAvW6z1mGs6q\nUMJ0zYWbi54ANqUd/08w9z1SxeUQQ1kkaPFUnS07/Xk550YzfEYwyrzLAwOj\ntF66CHyR1UPwJCTmrn1QR/1XUIbgrzRVEL5EjJyZzu5iAb8YdfyaFSZOiAl5\nr9iGK0m4DuzGv9J/LqbDR3g+J/e5h4NfBlIYn5qJN68uufEpP1812XlYJckV\n8CbwXnXjGEk2QB42GaelRh0fg35wi1NcfoM1LGeMHtE2xtmDw60b7Xy7UDwE\ntpbPT6Ti9WSA/kTlcZDLa4OHTOP9a+79SDNloS/dGqSQA8kXqnu04mTQCq+K\nPqdkoUqSWPRFrC6wFjVAN9zhvvYY8flpw6fjFhbz+pLs/UJIJvyi6pc1PgML\ndbIqW73dI0L0No8llrCA1zD9sV+ojdficwpXDD2AYuiRVWqZn1gRJIXGuvxj\n65fY7meV9AEI00kt+oDhP+MP7b9Igd9w16QvgHaXms+r+5+waee/xhjO1ysv\nlhlT\r\n=HAhC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFRmK5rqi23ao/lH5Cd42qnSRNDai1P0ugrYs5qibAPDAiB8SKU45bQO+dbwLSU6joRUNOzX8OX85zCRPPx0ZB66hQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.c95d429c.0_1589319437522_0.6688147409613849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-icon":"0.16.0-canary.0c1ad726.0","@material/mwc-icon-button":"0.16.0-canary.0c1ad726.0","@material/mwc-ripple":"0.16.0-canary.0c1ad726.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vOHCK4uQNdnrpjsLf4cpDaBt5/Dhj4ks/YX4TC5QJmtjrT6JtkPH3TUalbwWPAhYwvIGNk/7h1P4KR83ulUFIg==","shasum":"ab589c42f56fcdee4d6b3f3441c94f28af320df3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.0c1ad726.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CaCRA9TVsSAnZWagAAoMwP/0bRQTvhV746vrEG8ACu\nTqkIQdd3tYcSl4A3i4yOrJdUO6wql4aIXaggyG5lk2FmcwDGNpdz5TvS5UAf\nM6ERzKzuZcL6nprG3ImYvXOIGJC58cxPZ4jewOkF49u2mVvqvWO1/BqewWfh\nKkZrmQJz8yNzRvKRE9jvWRMoPySfYp7fUjuMZcvDEJbv0vdnrG8WelMS8edm\nt3M9WnWmok29iX2T5ELKLLILq5E3cfv1BdpxCaeYWqhTQeAZdrv7YsFP0fOg\nMdEnDxORv+B35clQd6YaKiMpsYUNWGBxPkY1LMbMHdBxfzsiXsk2WkVXxySl\nkjZM2QZpH7Sm/GgEhBmDbOe/YmLDck0GTnvUJyLfzoKyPkE+9h9PSvNvSGFz\niUNf0JdEd0p5BI4jw0LHOV8FY8g8XutXpYPGXCnc5z6ZoPYf6gV9XccACOc3\n5/+IuSyQ1+L7XLx+CMHFe8tlj6wGDIR9ZuJ5DplFMnXIL0A1k0WxG0qTur/X\ngyTFfn+XNFwgHfMOXKMAx2pRy66TGgyfurJIkbVzhswRFSniCqJsgJbCLCBp\n61It27AWLRTHm1oX2WoJTMJq6jp2Zui3U1MxSaUGEm5LXpRHPn8PIBh9vAPs\nCReGi1c1M9tMg7HaOLE+aOurN0lOXNuaEggPtn1d4NbcuPEQB+wP4cyRG3PW\nXoil\r\n=cKOu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0vheqoBzAmCfgFTrUKatfgPKsQBlofeSDIM+G1/hl7QIhANkxrtGJTuE/MNCOg7wgIQw2IzEituicb7mgA/XWPq0K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.0c1ad726.0_1589330073714_0.46268472357914914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-icon":"0.16.0-canary.8b6a4700.0","@material/mwc-icon-button":"0.16.0-canary.8b6a4700.0","@material/mwc-ripple":"0.16.0-canary.8b6a4700.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6fLxTIVvvwizGnmnOIYlpnEO8RdCr6j/5rnXK0PWi53Q02fiITxcOPUpPvp+hDpdG65WlqN8LX7MNV47XuGG7g==","shasum":"de9a0996bcb75bc4874aa1cc8c7f50b4abc1750d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.8b6a4700.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwzCRA9TVsSAnZWagAAHHoQAKBolahXWKaitRWn2EA7\neiG0UcgQq0NxoOxIdqXxGX3Ae+LK4DHaVWjY9XNwPawU0Mw5CVqrxWaXZlEZ\n8ERLwJpXBirQJNjedrI9rhRgqliNd5iqmrp7ddOpdP3zpbWoJM+owaMYpks7\noJpc6HLwILqu3ou4yjXPJMnHf9hXASuqU02dHygZzuTPuVQKhLZwfT8cRK7W\nUL7FvMtOBb5dXKTHjVzf/prunm3L3RfKe1e5ra7yTrH60dYXrtMw1CaRPR5z\nPlvb5aBTxFeIBAfF0czpF7+Bkm+cQPwue+0mSkNW/KWJhHkr/lpZ703ohPrA\nDWK0Rc5IGHOTDMwKXRQPqXDO4tpYxoIGRZpFV3pJhvTWQEWEDYAkDeS5Mumc\nMuZtZpgJAQcMy6VhFJeJCOaz1/6pui4HAHzinucRopeQbdJeso/gnOnY3Dcv\nboEXwkMYzti/UPcrK4ByIQNEk0U/K5vzMygJT60AQTedzlP41nzhBoAEDuxs\nkP3S66zwGdZb8SDmEHuQo4h6SDE5/ICEpEObSpkHcAt6xh2qdfwkyUpBLbqc\nxakRHUcyHRV7+G3s5LPierJNHZ9H6tt+mMBY1bGawR9i4ylqgJ7O53sM9MZU\nfHMAaUx9c2diWhTYfv3HwL2BIUVUM+mKBgm4Y9tmfEyGf9myf+XiBrWBiw//\nhS7c\r\n=GNQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwZYQFyQ//ID+kbul3o67h1DUFvFMl6pyyTrRtS0FcAAiEAtIQR4+LoICFZfrBRN8X1qdtb3cDEduY5wXM1KDLHGhA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.8b6a4700.0_1589390387137_0.5963742030729218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-icon":"0.16.0-canary.3270effb.0","@material/mwc-icon-button":"0.16.0-canary.3270effb.0","@material/mwc-ripple":"0.16.0-canary.3270effb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kEaVVsyk4Wli5pcJclBOPHm1FCzmLEDVfB2v77dA0QR5ziEKIoWncYfQpFjm+b0bdJv5cVl8Uh4LdN3FfNwwGw==","shasum":"c1a893040e84793024e68bbf77810ff6511c970d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.3270effb.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWoCRA9TVsSAnZWagAAtEgQAItrJXF5nFd/WW8t/O8K\nXw3ACS53LGq0OcqaoRhIe7gbDTmXF++5ieeEt49PBUxbmhvp1cKHmq27XJuL\nxjmDa+9v/EGoYaOshY15ST7xqFq+t0r6D+JF4Bp/mHAZc3Kmdb1ZIONpwAI4\nf0DO6xt8ng9bPX9k4FFp2IGgqoIKjj8dWVQxibLYzhuB1AINaMDRcRP34/dY\nkQX7UxZEyF1JlJ4YaLZ3lgtG4SNVpqcN2ja8v55hlOuqWRvjslCafOF6P7kr\nKwXzQZ5+oVK0Y0GisralWlcWA1OpAb66NvP3mzA031Y6AOKsyXZOhwyFYDtZ\nH0HKBX9rtkLEVHjuap4pAefhGfereCyMg1O8ky4HHetFxFfTEZ9GOV4J1Cu7\nxxnO8eFKzhI+wIXpcfDfEwAuqt5nNZXqZVQtBCqFh9Av28KUILY2vY0QAROE\n0I3SAYzdoztn3DqDalzhu07uxoep+6diQVZiguuPDP/2vrCw9Y1l9oebdu3p\nOlFtRXkWGcd4P1ey0lcAgz0Nl7LVIfqyuJu4fTDJlL9y5ioASU1JGc/Mztuk\n7u2C94+XOycJcps8neZxux2LWtfyCy9ozNFqx8EDPoApE/n601KdDew5ZPSh\nZR1A5ZfOpUl785TQF7bEzQoZkBglacCX6hvhwY3GatgjN2AnpG19F7xtjXJH\nz0Ba\r\n=4zZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPv8P12ADWB3o/zigyfyYoVqE3rPYgZoXNNKv0Rbx/7AiBN5FhOQydVnuLzUnY8+DtUzPKImLZDvBaS0OSXwQfmsA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.3270effb.0_1589405096107_0.055034671901844856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-icon":"0.16.0-canary.832e64f7.0","@material/mwc-icon-button":"0.16.0-canary.832e64f7.0","@material/mwc-ripple":"0.16.0-canary.832e64f7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wHENKqUnH6sVpvh71i0mrqqiESTlMScT/uFs46YNyAAqZbJnl5GnLMgIY4qQxADbpc+AVzFhQWDJyavQulwqew==","shasum":"4879945c68c27d82bebb36776e388947b9b27d18","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.832e64f7.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZNCRA9TVsSAnZWagAA0I4P/3GG5nN0JeTEQLSna+o8\nHvbKOKEEQlJKOUamNz5Tc1t9pNHb507w/jWJMj0240rmmXO11Zx1aslQsK55\nnuDkMttC/mtpmqkJ1LhIRVHkaP+5c4A/nHK0Gp/ogjhW6t4Kxz9qBPehip/O\nmYTbLaWrxxPjqE5S+QmXqIRzZySU75xmsGA9Me/Jkmc7O5zaCS9OxL+OC2F2\nFfPS8OXpiJFXNs147R0HfFenI9TzZxb/mjUsSZDA2qWtWmIqO3/ebzCFvW1I\niGk5PfYYnKAdnPSGLckBMVD5K4KqsdM68DG5x5X9RTMrEe0ijRg6BzbErxa7\nvf6VQy3iQ/AJ0SM/3ysV5h+k1A18wxlPatFo0+eVPB/OgPVJSWrOcF5M0hqp\nkr3gjYZGQLCCoaL3Ailc/CG4TqqD+y9oEnRfReIiv5xEmPronV9zCwJAN2eJ\nkaiW2Gr/IxqX61LBQ2VRT6onw8qgc1GBq/22etN538H4irO3gj/20Ql+Q3n3\nnqPogCvCidFcDDwm3/ac35VHl7TXtvzeAc+wyhn2Cn9vCxKcsQep99gODuSH\nJPsvgmoacUxYetlpf/kXBQpPRnPVVkeES6JOjoSc45YrCD3S8KN42N8iDkjv\nA9/dDQWfCT6xcEaidSUCLoV2Bf+XFX5pKWFuQB97P/Jruytb5Mrx6zoOp/49\ndAtw\r\n=vFAj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxaMN4GwS3Z74nZAW9YLmpJmZPRc0hzs+DJd0Pq8I3hAiEA3jwYdxijgJFNSZ8BoVuF3KpEqeV6sJfeHgN/qCIFzxg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.832e64f7.0_1589417548805_0.8232453805819486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-icon":"0.16.0-canary.472fc4fc.0","@material/mwc-icon-button":"0.16.0-canary.472fc4fc.0","@material/mwc-ripple":"0.16.0-canary.472fc4fc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ts122bxomQhAFXgkBLx5xaFDYHRV60++gqDE7utnoNV+ke8ea0U8U6JMgMIoYOpe7621yG9WNrERkWpt9Xnufg==","shasum":"50b884db8a4fca5525f08615ed0fbd0a6ac418ea","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.472fc4fc.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLzGCRA9TVsSAnZWagAAAWoP/3OqI9sTT4bc/ODJcPYM\n8ZVliDE13TqgZcO9Oua4PgwMlWYOnPc9eOfzisTaVd7mZ5qt8HVzUFOrPQ1n\nIEf8grg9+iUGeS3/cHVxCGM04aapKPvu6jMA4ilIrVE+Gf0RKh0/dbFWordn\ntGHVBhKUE6vB29vK6dpchbBnBXC9arPjnRlKEeWjVOEB0woauCP8OKJ/jjSI\nNK5978p5fju2RJFzA3WM81D5eQnG1Yut8i70/iOKudUArs1YHcS6/Arh9PYI\nNJLE5mkg6vICqYZpZKoXtp1cBPC9hDyFHFi8xuvvylyPz9qWpR3kqeLOJymY\nFwSfUKH8tYg9KBkUf67lL0nJdkQ8vlUEcBEYSqSlvq7t8wMIy2UiviSEk7TW\nXWVmnjlLNBtwP6VzTtDkM+6OwH3wg8FGLhOZleeasOvikNhUMioVOLmShkW8\naxV5AG4+Yiy9VNDJp7FdVc87qkz6LXDEbWRYkkhRY+D/k3pxaEH4PCYIW7EK\nQu3kRjZfucIVyjAyveAtAfQZERBeSVCYDRaLr0XPmmCfKiWJNAwgLSwWyrgE\neSAZRi+wzQFQpPja3a6LNQXmljasWVUuL/sm1Lw2FXSlIMdz4Y8r/62+9Z8D\nKVYyLC9kHhGPSoXnSkCPJwZDErtJ0q0Nan9P2ExkzeNvmh9Qw9tcDais8mau\nhQOy\r\n=Df3b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3EI7e7MsySw3x7GQ9OVKq8oV055yvtBfTcxiscyPE7QIgXhL4v6zm5c+IY+rLgYU858w5w5/7D2fB4hAC3mCeWOs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.472fc4fc.0_1589427397782_0.06402848201319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-icon":"0.16.0-canary.4dcd7dd5.0","@material/mwc-icon-button":"0.16.0-canary.4dcd7dd5.0","@material/mwc-ripple":"0.16.0-canary.4dcd7dd5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bZ2YVSJZX2vyJMo2cAseVuvLZRF7PbLQzg4J7BpvWbPL6XU6r6GDpzwrRPUDTE5UJgEhQQVGqXa49xfYiT4q3g==","shasum":"5d55cdb10a951e02438d5b19092120e94822cfb9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXD5CRA9TVsSAnZWagAAGcAP/3KR4UAvYb97ohb84nyN\noMLk63KTAaGkgstcXQJLQgfdngVMJGKgxe/vkc3QU3EeWQUyybheVur+u5Is\n94kBq2r/7sgjjlrhvIi3RE3qIZnaxFbtQlLCEFxACRaG46/W3/vQX2DUOsOK\n/vZss9c2tGjhPpe/yaVv1+u/UH/35+wA4HeoZnGKzADES/J9cBJ14PFSsudH\nXryDkKEgvmV2QBpCtyKIwxTjiWKtdP5wy/W+OyD5ycjtuA8Sf8728C32fwcq\ngVVcyA/2ZR0dqBAK5tBYC+nX8fRxwc3DqR5jHXhF/fzBhkFFXdlGj5S2FJNj\nj7jIrWS6/b58ZZkiXySds6O+A+YrSPn6se8XGgE0zdUPdNnJ+/xCTt5HDjiZ\nlUgeMIBp9EHhYOnMFtYhaQDFbemXcEtFCFyTw6QRuGqfLTYa4IkNOE4/Q6Er\n3W5Ot/bY5B4LKCkKJcQqkw61C2EHoiuuR5XUyXlv1RpnCUU9OLemPrwQATX1\njZGHbJ3kSy8pU6WDaZMzY9D2UU4dQbsCDUiO7eSR3up5US0gmfEFBMMvieqT\nMryf+LuhFL0UxfK+DyPQF0HgtduL4UBLDAdnqsEHupOjBrI6SrgejLILsW8K\n9IdTgyNHkRvefiiyaghKB8DNbtCYkONoLtDAiEGi94vHRJQnyD0fiE1PXiHF\nLTHg\r\n=DrZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBygJ132lfPv0hKCWtHkVGQy7pSA/j8WN7ycGfVJ0pSdAiEA+IVxUwJ0xcluvCb5ZFtt/HvXSBJ63s0WuG6LtfpQmKY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.4dcd7dd5.0_1589473528892_0.6108546126528458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-icon":"0.16.0-canary.bcd3400d.0","@material/mwc-icon-button":"0.16.0-canary.bcd3400d.0","@material/mwc-ripple":"0.16.0-canary.bcd3400d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JF6LGI8P7zqtVl03B/DDNvULu8Qrt4c0o1YV+JTnHkaCUVUVwChXonHa1vMDvlpoVeRLhDpZQNRwVULLqJbTNw==","shasum":"1a6161e8a99ee3f992aaab94af2e891287b600d6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.bcd3400d.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxylCRA9TVsSAnZWagAAZFkQAJX/yLrGXX9/ShtAocDF\nK9Yi0MQsakN3BledIIFsKGO3SjaY0H5fRbEty/8X8W4AMPlNv7stR5qyViRh\ng06IfS6aBra6xV/hwbDrT4fHC+CR9zbjT3czSmGfe+pmKfwyeEsozKmISxf/\nV0ePzfVwMyUsm+GOpBUnwL9PZVsOsuW0a+AvoaFOG8uXpR4+6LF5HPzu+shS\nK0o4NNSwjGHrtXQnN95GBvdgoxBBWYg0PhoNXswFf+g56NLKVj2GYQsSz2x/\nUPsRZnwHBgbKtY22egVWfMA7bArXXHVb3SjWVqtzK8LNCzOPV9+d8etxjLPb\n2DZEC9JvacEZ02xSnDXDXBbu0YKsF65xHNoe3Qamb02ZxDWi4xrptxzp/Dw9\nNi7Gb76ZNvrhUtrR7IJ8dzXUzhcwSlMbA5Rqw92GsDmJzFfNewINuDYgZ4QR\npWLzfAPuIPEJrDINYL8O19s6Ov2cuY4ReKuZwOzdDFkebxyFPpeHhfGDq+u0\niy9atHvPkgmYBMqiJG78gyimAlUluJ8HoowFeI44Gl+n29fB7pomhLK/3Z28\nqwYyWTuLYLRKSf5avC8dwfW3tLOLu+JrV9jTABec6C0FAh75245lQ1D8rBut\nwQtySpV02OftuAxuPLzJT1g1HFooq4mxcJMYzEMfVKfNWklTOGGC8zXvSI7M\nOVCO\r\n=WRDz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHS6CvhNXOlw7Gla44HNVPWdng6nyGnh26XmF8pkbKpMAiA7NkrB3p6QJktUSGv04hJAeiEyNefiW/Nw2sqsovS3Qw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.bcd3400d.0_1589583013052_0.07936187194535349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-icon":"0.16.0-canary.91f63179.0","@material/mwc-icon-button":"0.16.0-canary.91f63179.0","@material/mwc-ripple":"0.16.0-canary.91f63179.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QDYlBdzjQ+FLzrLY6UhZ0jj2niV9EQraSKoEuV85/Xg05WKZ9UQu2qM13x5ckEPtfYEgrO6jL7K8dtafNPZ2UA==","shasum":"9915246249b7baefb218399c980fd6c0ce4120e4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.91f63179.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUpCRA9TVsSAnZWagAAgGIP/0C6pE8u8x4E5+BW0n5q\nf51WXG1sgfJhfZba7O1xyeNPGW5OEgdyfRNeWJ6CtJy3fgKvuPffqQluyhVo\nTiygRSA1Sj9koZTvVHykfwAU3KdAEanySRN1xCKcF7qimymgWdudSz/5drGM\nZDqOU2Itvwibf4yj2L5CJDkjwtWphOX4v23b8mHAHpxT4sY8y3Zd2rY7DGOW\nytYQfRLKuGclchyHcWhY8MAwSKPE7i6r2taVrWnlxi3YTMRmFIChVj7m3f31\ncQggkuUpxlTszN1RLIK40YZCieBXJcL/Hx8xzfYanH/jNqbYPOvFNNj3USBV\n/udSbALpqOXq0qLFVgCAvZo/V2dPu2Rn3snFmp9dxIUPh1YQawcnyqGnFYog\nBAE1u4+RTOr7KqOKOqfiQe3hOj1A2lis9uB9rDA2KS+qszdm0Pt3Dyq7tQxq\nKNerO2EivI8ioyP4x8BPKVsmDkE8pAEqteROu+kd00JLua5oR4py1cBhnJoU\nr+vJ6CJ0FAPe7eIIv83Z3c88clCEDTjFhIPawBGUWG1K1qo5wZL1THKZshfB\nHRWHKgcP92Qgjp9kPZxQPLN3c2Okcner+ffClgxnWF2dsX0GXyNjMaTPpomx\nh2Cl4EVHD0E/7w4zX6GP+l2/1jZ5yU4rmUrHQlF+7an07FP/2N8OpQr/1oQr\nzQ1h\r\n=y7cC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgr2/f8BTawZUoPdjQVVHOPC/Wf/Y2sMJpRHro+lTD/AiEA8ua4cxMOkwPQhzuZglQSDLCf7X03hYOMIYERmK2cbTw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.91f63179.0_1589589288755_0.8544369479249967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-icon":"0.16.0-canary.b8aafb56.0","@material/mwc-icon-button":"0.16.0-canary.b8aafb56.0","@material/mwc-ripple":"0.16.0-canary.b8aafb56.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-L+NnVGc8DiYQXf18quN0Non2okaF1bG1YKFdutkNb0BMiPHzRoMgysM1BEwVZzeqM7ZQwI6npUrFu0qUX2HYhg==","shasum":"27f57aa6d96d0c7775e37c0ace45a80c3e8e2a5b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.b8aafb56.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSeCRA9TVsSAnZWagAAh2IP/jzUuPcVZlm18LJHLZwU\nqxC47MEXNR0OHOvfH/ZXWGxWHJ2RkCTP+zIlYmR3qCo12AqTGQgqOnUtNs8p\nMydfX9FfV5H53QqMMDhDTcmnfArbq/X8c2X087mC89u9tN0cOgodPsiaJOk1\nLua6n6HhjVPlhx4IZ6mCWPW+6aJGrIqGmjVCtiIwry9rHwije9RHh/+bc3tu\nObwDojOnnlz3GE3XDq2apCv5UAtO/1R00vkVuAGC2dQstU4a87nlgJU/8bV8\nPeqV1s/gVqHOyJdTddYXAiJ2gI9biC7iIGcLcIUFq7/1NvDzR5cAqEh2ozFv\n+yBwBccr1FKDRkr3I+QnnWfW7U8DbQWA9DAj3qb5Gaau4ZWz4peDCsTl7sMt\naPB+7U8Ug55YjAVaKNVLoxrsyGZm4io+nBB4TyDzq+ldyvshAjyz6QGu1Bwo\nD3466b8X3GVnwbTCmK8ZBSDbEXLHQjGbm6rwmMjiwaTkhSGiENnxiRX2AMpD\nmflbsw98UOlvRMwkCW2QtCCuVNg2JG3L0FpBW5tgIxhkMbvHW2IqU4Fbu8Zo\ntHPNv/+x+34kVvmS1QTl6OZF8Y4AFjD/tgfjaTteykqeqHSy0Oid3pi2MEly\nPdLOoacOiy/+xX4D+Knx7oK/qPgr2++MtVN2ZN5eHSrfLxbgfe7KjPIOL3Bs\nhRuw\r\n=EIUN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXZGdAI5uliBhTIcMGWVshB82nWXLwpXys1+FEQ9CFNgIhAP45ZPuNmIFkkOTS3IbAWnY9kdgMWskVFKsQIC/bx5BF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.b8aafb56.0_1589826718485_0.5508995026792904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-icon":"0.16.0-canary.a564b194.0","@material/mwc-icon-button":"0.16.0-canary.a564b194.0","@material/mwc-ripple":"0.16.0-canary.a564b194.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mI1l59M9OryXn/y03Rh49qVttCvBpaAXDlCuVhulWO1+X9wNuiDIX8fD7FuI6kVoDTmtcxafvbgcamyt2qymbw==","shasum":"d79e423c760dc0c8421e51ddcfd0a4ec35a69bff","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.a564b194.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRbCRA9TVsSAnZWagAA6oAP/2Ob4UrO7j9fUUFpplyH\nhVxzB9szkjQiPJIto02IFEXGPAF9gZRsUIIvgeJGIjxOmaK5as6LYCA1z0Wa\nV4Zw+8CxlTve/wTtRhm8YmrfEJv89KZT2Rjod3U9n7k81PcqSFft3aQF+q+n\nx3iS1M0BQyP57BWRdk/ixKgKsU33eJAwE9DAgGUDdL3qBggcoK8/ZfT+RkBF\n7c+cCT1b9VWw1mkaNbVN8iBGZT5zCgVzMEGp1m5UU6Wbspkg34o/7Vc/8jNd\nsU5MdFx2/PZrTvRmxXVDdmA//vJBLFzzlrlcOKquV8T/Bo96UzPBZhM/GUCg\ne5eby+Nh/jYqeri6KMQqFvXAQj0iJ0A+J+Kk++FwXD5RZik5snhoCAX1hhGn\nRgOVpAi59QpnU/6GDqiT5b+Tn39X7fp7oaoTg5xxWoZjtNM7U1j4y4RBRI41\nr9LbhsoXMvdNp0P7TtZImQTniWlKFU4W1u9e4L/Gnm0u2yfpiSrt2LxfDluw\nVxQXDHCFaGfUHVbIqQzQARGP3DP65WZyDJg1fL4JbbMCIAu1JVOc8lol94pu\nrLHfMPZLWpy1hMApJg75WSn3St9AquakE40jFGjK5pp5mYOvN6gT18zV3TAv\nyL0Yr3TqOcgrJr7Z8mDpitJHM0PXw/xPE9jd49vRe0ECKBUhUEnGyL5ovb5X\n88Lp\r\n=Uf1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxNmAqVSSZqe8RMSXazvFvq7MkFkkvLzBymJXyNGuOQAiEA3TWfkJnqqCbuZnfEdgPPDStgdXnZXgi7mGAcj+dNwRQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.a564b194.0_1589843034970_0.10732040664875653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-icon":"0.16.0-canary.ef56465b.0","@material/mwc-icon-button":"0.16.0-canary.ef56465b.0","@material/mwc-ripple":"0.16.0-canary.ef56465b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S8yQfFgQzx7Uc6GYFX9LLvPW3cqFTFZd2adfBbO8OI0dMmVqPu6ulOMRMAfnDgihXPZ6suQJk9tJOIfTrxQrag==","shasum":"ee4b968a2dbfeab12290f237644bf55557306eb9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.ef56465b.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1b+CRA9TVsSAnZWagAAX0UQAIf1nwVXkrlNZp2YZ/01\nl/DQwHTeeaI+bsYl4GHkzKyvoJ/2fp8C1xwcTdwmW9yRJxVJHy+q8S6ueWk8\nJMkBrZoOWlG0hfBi8QE3xHS3m+cK0tcUSdAkw2yfVEE1BsFBaviEwVPE5My9\ncfe5wuJHNYSuPa/BPdQnIw/CtIRVCfijc1F94fD1zakHR0ee7yD1WGpK3q93\n4f+X+KVZNtW2Ia51cHPcGEwDNaoxoXIKYw0rwVZty+4a4Hs5jw3hx+OtCtzN\ncgZfwlwp+5vSPRlqtmbA8fLlSMPUh8gg5GtxUb/u926SOJAWXlsDn7yf32kP\nn9jjkYQ2UlC9HKmmz/vbodLUoGgLE65wzVshiZOrxPuI3L56s1qolS7OB1A9\nS6yo6TWufkTr7CjEyApF17RnwqxsAvNzkxjqj22PUe/FnNeUcrbInqJrtJ1H\nah/5eIvM1pe5tgSok9QYfeU4fcAGiJp5m0SqRz1iLIUIG7rpmiEonlAC5ke9\nMNFXELjL1ZlyY99HxtZNAkGkmGKnepw0Bu0KY0tYJRVyyda9TjNoxcQztcC7\nid+qOQk2bnZLHr5WomNJMVxc/kTXr+J4GCQf/K52REa78bs0Gi0cBbXUUpLp\nRsoDRJP8vtgJKD6txg4B0bpWSls60FroveZ12bW0WCqwsYZnh0ogH2ggGG2s\nOEOb\r\n=P7eC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUEBTnPxfSZpXF7SXUB9ku1lf8NOIoI/tLMJ87GfFRhQIhAJhS5Qcnza/sooEO3pIQjM/QyC3nZor+68BptuyljVtA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.ef56465b.0_1589860094125_0.8505330252219971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-icon":"0.16.0-canary.c22dcd71.0","@material/mwc-icon-button":"0.16.0-canary.c22dcd71.0","@material/mwc-ripple":"0.16.0-canary.c22dcd71.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mnnHzl7dr3eLl/h87CSp1lZFvI3TnySlWRYAbbcd2yKgCTx4ihPKxqbFj/b4hPx7/jPRUjfOrHYf6zx47OE4JA==","shasum":"901cb19de48b7dac3a28c974e83aa0310ac37706","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.c22dcd71.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZcCRA9TVsSAnZWagAAAt8QAICCWZuiKKmcOY+tlcQR\nhr3z+W4eKBvef6LMxxGalaqVDN0b2EElikMQ+LPceONZXD3rXTT2nUPoej7D\nmPUWXfR+EMKADB7rsEJJ/VCfBip4bKZ9LrFEoVU+asuaaUmWPx/2ImEzxQ+4\neqb79MEH6VcnD/+wcpz8/2vtPuZiYCHmnEXjIE2b2CDj70qlmSAGZ6/zR1HX\nalVAxTKPqKBy5NlGNXtTgMcshV3koXgZVBZGqntOEOL4eDrVUI3s8OceUDhu\nbFr/qMx5Yzs0LPRQTjYbNKCoAzoGCEIfJvGw6Yoe2svH0sPt7aAd2NlmKH6H\nVoV9WKQKryDJZYa9O45nBLewLXkkQEmHswbjPVaZqgrWZcC9c/fMQ7G/+RfO\nTl0o+PWqHscQXH53biaOD3hrk4QYW9cAzIjvuCit0EOK+IERWp5I9LGLkBkr\nv3ksUrmXrBohxMMkLXu/yLYFrPUwwyPN5e6fQtCJZyjoykNgSprnvakYIu0n\nj4nrh/PnhusQysI250nn1C8p5fNA7+zzRpFRZbBovPK8MJvwWbcpDuwA5Wlc\nqfhWMZ37D1yQIzFsYV9hJI+3VdnkbzW2QmsLC23lMUNuQBAtOt6OLNeokRN1\nE1Juzb4RMknZUxtcRjRNHVloe5v2qTSVnlt5jFu57ST4vFIfg7Yl0WlpHrQw\nojBZ\r\n=5PpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcFfNoLSJO5L1btBecstn12ZFsHEwpwHFL15lUujxeHAiEAlcmcBgXZcNWGkF16IJOpkVETyEtlVkweDkDnY4eVTEE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.c22dcd71.0_1589909084037_0.6948539322394243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-icon":"0.16.0-canary.6eb62388.0","@material/mwc-icon-button":"0.16.0-canary.6eb62388.0","@material/mwc-ripple":"0.16.0-canary.6eb62388.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6P02QkCtcJGmwwRSvbFaT8Odr/R/0qMclqYtt4uN3x0i2ktwixjaN/TLX1UeKhdnQGW0FSCc0wwDqWYGWEoYZA==","shasum":"a35cb44e4e343e0c55d7079d63abf216ff3e3340","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.6eb62388.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPTCRA9TVsSAnZWagAAo6IP/AqPrr43q/K40ymhhuGk\ndaW1toh72COaNZIbTe+P+Edj3RJyRWQ4BZVaUESqbcsgEdbFYtrddIWwEdK/\nsz1xMnquuAlBb2JK5t3NPsKMYSodWj1Il+Fj+5pkjtPfWr2CUMZP0eL1ONko\nEm3ExdVijNdcsQsB8+e5xeFxQd9E1PKrNelibXLKeFC+3hObQjXXcO0nG8a4\nyF0hxbnzPtgOfHUA92kljpS5AMkYW1g4PKU9XTdCc6ykH8/9OxolLfR9Vjg1\nUJ9UnfL/HQUZCZPrmauXaEWaxk9my8DbRxCkn3a+/SKeS9ZScEU3g1T3u04D\nsxiQGDPzsUj5paOor7F9wrF4ezmW82wI0rkbN1zdkYgeZWhTS7y/CulIDdiz\nZ1quA76wt8kbEnDISPDJ9NNAa8Blpzr/pa2GHanei28OvgLRheNhCrfkxbh8\neOgY2Exotjm0BIVkknOFa+VUDieShh6hzQdStPwJ8zwhEdCT0TpHQ5AE+EeB\n8waeHbOt65jC306ToT15US2NIgPRSmFfBHNBj/gUyrRxxPVoe9vFqtLmUq3S\nDInjvRCWKHV446alDE72JuML7o62/d8X5aad1yGBGmUabTes8/cfpXeLyKmD\nnj2HDIAYGrSIbxt6pzaD79JTnslpXjAxCGzOZNyGxQNE9nrjk4xm+ga6CjxG\nvYy/\r\n=0sFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTXIgY4IZNxR4cnJHBtsEAuVd75NUKYPidyMOOdPz+cAIhAK1puDQilj0VkHIRDPdBn7C1EkiTd0eKeWVu3jhIXjAC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.6eb62388.0_1589920723257_0.12258352721600785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-icon":"0.16.0-canary.9bc3230c.0","@material/mwc-icon-button":"0.16.0-canary.9bc3230c.0","@material/mwc-ripple":"0.16.0-canary.9bc3230c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JcKA/cBYCbsIvN2rlfPdayOcFDugTxszwDJu51joVqgo4bJ5twuJ/Pid8HJ/zluX0dD8OeoHCxl0mNwxe/PleQ==","shasum":"5c2bc3982595b9987cba04e490eb5e7905b034c4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.9bc3230c.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFIBCRA9TVsSAnZWagAAqzgP/1AAOmJ32vMpuoBxu6N4\nwmoVrG1BzDIh5XkEfA+PnqKLJgfVP4M1Q7qmxWMd+LHTqzZniDgoEnBHvIxf\n1CMIAMP1OzvgrUOqBdWTj4AUjeqy40tj4fUHX6eY/4N9dJH/Aif7uEuvsaEZ\nAFIrKyM1dqCVsrbb4os7aQ9Sjd+2mKQeFoNB9FdOLUrhZ5zsWsOOxXDS3uDW\nbSkCNA8adLzZ5iwhGXMYEy0Ar+Yd8erbzcrzb8aber9ICsK39nHrRwX2PMvu\nigozjfG9o9xE4HpnSfhAEvO0IJblhL4DcPEQoZUthXj+4SOWr0ZK/cU0KxOL\nFFxlFSrxzXQ59xNP2RlCV7mMLd/pmayZQNH5zgNp4KuLMMbeFobS8qA/Una2\n7Qk77AHRkCSydDYWXL3nTdbsWJu48k2sVQtzWX+KoEFFThTj7O9cKvuiUDSc\nZFK7dSjAk/aB5x8p+Sz/aKzSzRrPczaM9/8LHkAzzHtpt23lrEO3Je/1JCs9\nIEr6Q9+l0LxMWKYEoFuMdIS7Y9T+o9Dk4UdZENp4kDsWPgb9LyJ43AMj0G16\nF1WCIVfy+LB6szTJC5jZaZ9R9+oHh7M7dueUNDgSyHbVdPoxrJNLzpInfxm4\niFeeKUni1IN6YhK8/S9c8aQQ8jhH3Vry30PbQZCWU+d8tQvwoUdpwwii3Ozt\nayVN\r\n=zPfW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+IlyAlsWRfc4gFV11PvGiq3ttCxhsldAG2kpx8wSwOAiEAhnt/KOgWiaTPMY/a31iEa+QHGgVWpH10vW9ED2tLUkY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.9bc3230c.0_1589924352583_0.8203985807430927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-icon":"0.16.0-canary.421a6856.0","@material/mwc-icon-button":"0.16.0-canary.421a6856.0","@material/mwc-ripple":"0.16.0-canary.421a6856.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-crhgnG+x+mQfJJEG6TGAzB/fCsIKgG0nx8Qcs2lc91Old5/ef1uFJIEZfbv0zVQ2ShMdN7Lh2ojNVRsFUwTnJw==","shasum":"5ba7cde0678223037b5e5d11a7a31eab3a1781bc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.421a6856.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8RCRA9TVsSAnZWagAAt1gP+gME/3wDMvd3xDfDpiud\nT9qJSHgkjRrefe8Z/2GhwftX6lYQF6V0jE5oay8OQOvImwQSPwhwBJwWkXsw\n1snMyCWscP49tMXEW3NhlPwzjaIbEyjq8IRVPFW9n8T9o0APEcOLsUq/Qwu1\nh+9Jj3Q9ktYF3bFBKHEeIpNVeA7vno1Qh5/Atd9wR8SMzPNiJhMrViipSV6b\nA1mh3+aSQpy+rJASMl1OegF9E+gtjlKHo/h4sqF4O1w4neaIT5ces+Q90etv\nV6ERqPyhgxY2kSzjtWD/aEhI6LFEqd46UsNFzFEn6lgY2dm3wJ5pNEW8EHxg\nW0RE7+yYUJNghh1+PJWfSDWYCAHwpA1ptk/Vt64qpmRGj8gOwBJrgpxR2/y9\nKHCvqVjAiaWIyKlAaipaAHju1OHJiDaMxpEPEzZV2v3/nRema8Jf1qdFXHfm\nqA4Gv+BDM/u0JrGtj3IGDcybMUpmNsN8L0l+k9IzH4pz1dezWBxKKaoN3XJz\nRMepEUB3YVUuCwC97jDU/AgXuqHtDjlG0BNDaqxartOKA6r5wjT4iit8ea6I\nfH4a6J+PpDYKd0BKyoaebvoCiAuf8G0uJK/FTPtYZixco5pHhO3vIO/vVXL4\ne7YV1bwjRZukR+2OV/oAllXKSdLlK/xwQrYtMr9XQkBPtQ7o4G3E19A4+KEM\nf1l9\r\n=1bOF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSzeQ1S0QNbNJK0kXX/TTEjWtP0zZbXPl+9qZzpOqpLgIgPa1RWGiquoyR3jLcJLUGvhGBb4MwMA3n6Bj01+CqxxY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.421a6856.0_1589952272785_0.5175345104787492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-icon":"0.16.0-canary.761aa6f2.0","@material/mwc-icon-button":"0.16.0-canary.761aa6f2.0","@material/mwc-ripple":"0.16.0-canary.761aa6f2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TL6Nmzp8FHSPFNoW/xLjOYTA+kveyztIjpx3szriw2BMmbH2O+l3n6xSsrIakFXz495ynZDFP5EZULTdlUAdYw==","shasum":"33c4764a80475296f1b4653e27c703eb1edd474b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.761aa6f2.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGnCRA9TVsSAnZWagAAkaIP/R4Ti/Yoa8xBs2WAeVI3\nz4Au66xoZy4tWwWDmPP/QIM0yxvTrZRJPpjC6297YA/54wPf9u6Sb762UKk0\nRak9YGBiwqbyPAdxpvgCN5rcHob3/nIeCkciyWxKPJZA3RWdd36HYciKghtz\nhS/T/ZNhPqXJQcfa5eBOGuNyUXf5BcpUR70nXWHWj9SdcDVIOfnT2zzE96mq\nbuWtbIk9QUzDuH04P7DdUqwXoUUR3jZjqAPSNSOcosoIjiIYwMjPJvYHyymP\naloFUVUrxnaluQvpohZJRczJfFM8DMC42a8UTsZRh3PCtyM8Zd+g400R3piR\nZ6QmmB/ixqMRtzAcO1872FsgIIfGObYuOrbBtQva4uoQY/KflSR34fuaFjUz\nYIv7lUUFh6BPqx6a7vnHSeYOej9DMY2N+fpZeWn01xX75SBecq+nQ/NhxWRL\n8WcXT77X6Q+L+XhIBdYJnUWYg+I2k2pr1SpzLaEX8LOdN7AEDYMtL2nliUKU\neTgoIPqOGLRyELQdF2rGb69fTwipO5rmB3pkI88zOUw7EwXy+5yib1xXMKqs\nCGBUgW8nIXOGOZZ1U8zmNJCNA/8zlHQAo+DGwLTbSz/0woIr20Nj4j37I2fG\n2RQnDkzSNS1hLCvZ7wQglyDdCzzu6UEKcmqAY1aoJlQ9sop0OxwoJv9w8Hm5\nZtHj\r\n=kUjO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBf2rh1YpvM5L/4ecuZrsZLSwlb+LkcA8RmbbTKg2XhyAiAQqk+gfzSaJcCwJFt+1Rkfkq0tEpAluMeDyrfOwcVfvg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.761aa6f2.0_1590010278447_0.691851468477352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-icon":"0.16.0-canary.f8654c40.0","@material/mwc-icon-button":"0.16.0-canary.f8654c40.0","@material/mwc-ripple":"0.16.0-canary.f8654c40.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bg2CVS/10ALvIfPtLf/ZhPUXZATmhuYEKl+mwTfHe9Ca1PUtwkEjWfQTUoz4DJadzKJcXIq+Hf5Q7XMe+UZD1g==","shasum":"341301a7f3bae70223b120f67bba5a25fe7ccf81","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.f8654c40.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPbCRA9TVsSAnZWagAAKgIP+wY+/LkvxWInownx8VnX\n5MQ/cAWBaWRMzOBML3wQSxWPBCsVI87mehesdpX8MguMVBImAWs45L2MgITf\nOm9p/pKqZo1gCDhfYprLFt90ybECprCRuZDO4FJOE5de9rHAUVqeh3ElcsKr\nWMQ37McRy3i6JVTk729XU5JYLbYKnZQGjAo+wjsvkiDgp6kzoEsgmkXh7K6/\nZfXatFyYVbSati92ye1Q8HjNHFVrwGKqKO02bEd5DmsrP4Wlh3WkNaS+oVvX\nESGixnbO+GOTs+3hNloMNMLklbKaKYiIrDPlfzDm3Um5EGmZmZU7qODnRDbJ\nGMdBY1gTvnG6hnmSXRJvssFBurd917+/LUiYFUm8hP7jnhebEF5J8TFCPkFO\nGF9/+8MjIurZvU9TVOlzKlDdkGx45CkyyF9w7WwIKVNgW5TX9Pg5v5eaOIyK\ne8QaEpSUa7UvbeS2BHxUDQkLl7g9jvIEhV682iG87Yep07aWAgmA1w1vIVkQ\nHjdiKkmGL3+A50e3zyx2GAM4AtbVpYMqnsl42rEUe5e/9i1p6Cc1jxQ9z+w7\n8LhCsR3XFJB9BtCOTeLmkX0nSrXrEx6cqSP2Libov4dSJF3SpkfGRuhlcZr1\n/hl374H6V0IjOqKzPcNOFKRdk2cpX91PbsUwAQLxoebhrRlM5IWCB3sMDzoK\n+R3i\r\n=1REv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHMYzvub3dGgVLb9W4RDMNy89zyr0aWxLgZMYoBcPHeAIhAIojq9Ws+gXCZVoEIWh5NqGUb25jaKhtByLk5i+fg/a7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.f8654c40.0_1590010842590_0.7728274192826963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-icon":"0.16.0-canary.05f3853e.0","@material/mwc-icon-button":"0.16.0-canary.05f3853e.0","@material/mwc-ripple":"0.16.0-canary.05f3853e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UcbYnTtN6xfqxv/8zCcWmbpAJGmy+jlQOS65tTTAFJ3Otefc5RZBSRD069FljsA1NDQAOTuAvHXebQvvpp77Jw==","shasum":"5fa1f2057c241bdb54c3a900ebd5cfeb033c6361","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.05f3853e.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtwCRA9TVsSAnZWagAAmfYP/iENk+pkfsQE8FE4kIZN\nQ1zHpkbFe1hBeaIJeTZ8sqLy5+5HjYdj2AFTfnxOZsdnKpKFTKINsYeTFkE8\ndqVHxXiLzKcHusvmHlfghNoqTPCX70YEWOVR4mXSCKMHSPNqHKvxcfAfslbh\nZ2xZV/566R/7gxSrGbavK1gnS1p8GHL8M3KkI7hC4NW/B8fxgvLB16eeBGC1\nSfhEAYlxoPPZQXSGMbmdVFhPiQGIKWaSpCa57TnvU1GncsD4PvlPQHim/v4Q\nPE+azakm34k3tFOuD4eK7mXQ5A73Xxi+kcs17yv1orhfjwtURHpl6HSTo/sK\nOYfa82l8MlOoJVByLQFVQ3bniG2m6Fl9o4C7gWe46zPMLCSzBhOasv7LvMqn\n6gf/dGY5F+ThqRwreo8JNBd8OnM22zFGAWZeVwer9aXS4p8IBIrxHRh0b6wE\nS8PBFI8L+FbZLlilLSp1q3X0aA1HiM08GVp9Sn8FuiIj4Cx64SK8J3dILed1\nDGUkxEhbjVk0NVTLWEZ0U7lN+02JyiexaVYaBcatHDN2Vmw7bcif65MpDG6+\n+wNw+HzII/YGvJtqs1sfU6wW5AUAnbQ40+kjawySbFz/+21P+8nUfxj+66VY\n63pSknCTLrN0hImScFXiR7xxSBW7i7RJDWIRvfUZcdZsmt9bG6Si+xBonb29\na1fX\r\n=Ocn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGHWF8yGKdONeKMAFvq8XEyLOYIIEcB8Ow8zcFXQcpEFAiEAiVhTWmdfhMOuXBOkzkPi9GyjXcZ0j1fnLZseoeiR8Ew="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.05f3853e.0_1590082415622_0.7091103114091553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-icon":"0.16.0-canary.5fe61f4e.0","@material/mwc-icon-button":"0.16.0-canary.5fe61f4e.0","@material/mwc-ripple":"0.16.0-canary.5fe61f4e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hBrwXmkt6PhjsHc0whfHiHheUCLl1Bduj6p8s45K37mXrSv5ky512/ntPHiXh7jfh4Rn7sv8PeJcHLpSSqH22w==","shasum":"69d4cf0024736ba92ae4b1a2ae426d47dcd5f444","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.5fe61f4e.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnQCRA9TVsSAnZWagAAmf4P/2jsjffz5HWonEb3VfKs\nP/2IJ0pvoecAdF/0dQOqMSLKizpBspFN4qqV70kjp+GKHEh34dVyS3J1Xbga\njwoBSnY2LLK78hJeTEljUwOjeQePWTPNbHjzvwiCODZrlCg2u1B3ENTw2Mq2\nYlMwiZNVsNQ68RNULtnpiKa/PpwezVNxnRJ0uIKEf19SbzSEkhm5Px33lpdf\n2grboymkT4b6XWvZlU0mccGPFxgxD3wTfcGZ0CiK/neue1QPI0U1NREGwg3L\nb0Ol0iHhgT5vL9VLjxRNbXar2xNmCuQyT6+p8HaCly/glrx4gYOtm9HGoyJU\nS67cSvmT9A6n/zOrWVP4h7mQku6gvIq5VcgIArPnh8acQAN+TaR2OwR5/8Fu\nsBL0laDPVgR3/Dl1hfGTfzPMeH7wegCb5NnVfFRBCHGKHQYnbtOsHjCNBtRv\nQhWGrerzMLyNzVvLiWruhwBdOm4x8WZGtOuJUfriwkv3L68KfZJog8bFE1Fc\nOp4EmuGaAT6GRvhndAXGRpDnjbQtfxBcbciUVDFI6dJgplLGK6o9LqbSBLUS\nNDVpOE3LgUe8hwBG2W1LgwOBT4fA8b00YfxblLikfNyKKZtZ5d/Nob8PJMhD\nTJeTl39ecGp6eIgtM1Oqtu09vpKHXcM9r3BuiuVS9p+gOrtCf1NiOrWumAgG\nayKU\r\n=fyqE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeQX+vjs5fz81H0V9R4Dh4p6N6Jt6TGuOWGE7N7VICrwIhAOltAW3tak8kalNe72DXOptXG7cvj/kiigRgMkjD/94l"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.5fe61f4e.0_1590102479925_0.9649909160839869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-icon":"0.16.0-canary.17d33745.0","@material/mwc-icon-button":"0.16.0-canary.17d33745.0","@material/mwc-ripple":"0.16.0-canary.17d33745.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cgyTaPA/jrm6Hbs9MI6sZ69yvHJ4BnrfjW6q+3Z2OQPD75VflkeOFSfLxpBony5B8oYq+C+oRr1BlTSJ1Tgqsw==","shasum":"335282465f393750195127d494c20ec3ba0f9e3e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.17d33745.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBSCRA9TVsSAnZWagAA7H4P/RrO/vcOtcJ0lgzYy8kp\nd7o39n6437ddxzbxDKqPa6Gyl6/jARMTZVlY2jU2S94pUjNmh03oieKuziBa\nKOu4iEK0cy5LeH9pjFDAlW9xbQc5ZpcrDI0r02ocPrMT5fNyk3mKh8uNZRaa\nKPWB4ob7AQMi5NtrXu051K1krAs/9GOxn/0AwZnKydSnqg4jxwmOpxwX5zh/\nxfR9Jo9rfl9nQy9/izkTjZIeWrHrYjuMl6yDT0pWDsZpcCAyiL70kxSWC2u9\nZktM4JYbxOda+gCds/reFGbp3jQ/OzMxxGZr4qUANYk8NfoRnaehOjmbkJ/m\naocNjbOw1q4KV8wYNq2H/JfUOthxnDCbE+7Ic9cK0tcFZzAhfx3TmG6jQEoJ\nCHSbhhGteC7yAObIZ3ux6+x5mTGvyY//p7DBYVovC3dCRcKHzBqvwJGxHLDf\nMhD5qpE4mcsyFeLiMVVUGlS/EJu0Jb+XHuajYiF5O5uVRn0CHlQwNBigO4sz\nTQ/3LME0T6Q7l0oOULcDytuVgOhUhQlESWwbrQRIIGNu7+k/hJGnpo/ptuE9\nXZ85VMWHHE3JHfGqxRnYSZQsCJw0QJBBfk7PofuoerDhCyulZf88BZ3FmxDn\nxV2iCNT3+fkeW7CzFOHULdldfWGq4R+fhzit0DgAHLke6D0v0i2llLeyGUyb\nuaWu\r\n=cF1s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYph8iiLZedn5PFR9oTrHqhMyMwCPOpnmv67lE6WczCAiEA1xbImMZo04gBcwOX3lqOijLtqrKfPNLg1hBhiw/Sl0s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.17d33745.0_1590509649868_0.9721228916560787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-icon":"0.16.0-canary.e8b52f5b.0","@material/mwc-icon-button":"0.16.0-canary.e8b52f5b.0","@material/mwc-ripple":"0.16.0-canary.e8b52f5b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Qe9b4Zrjm3KuRY78xwmr7K4bMT5gcYyZCZO0e95+7A6TS+4AlgCfEfIGvrHL+PmKHZrLVVQxaJ7SE4nbHDIg4Q==","shasum":"1aa8b24e364d529733f679e96c907ecb94fee32a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.e8b52f5b.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWM8CRA9TVsSAnZWagAAA74P/1xtRnVYxQ1LG+CDrdsI\nXndJrY21x6t3PP4cUbC9eyjlJ8ivpHu3JDRPHda3UEtCknikdKP62Pjc5F+8\nhYWfGqjwLgj2rsVFxPVMtdE1tluIsioxE0Wt8Y6lGotWk2W21UTJoBALqz8j\nU3x8RMsefHm/M88jNoRv8nVUHftEKv+tvwySWC8j52jPW3oyBY2J5OVLgil8\n2Fds77E5awIJm11MepfuedSDaL1U/K3eKpR7Gg7Cte5/HE3JEynNm+EWyqA3\nGDm8KftAv24rseRtXjFfVzcPeBgKyBwgOF+7BgSGeKfgFPIEnhGly3QAeGw+\n7fjS3XxOOmreRN9NzOvyjboQjg1E709XLHNTI7M6oqUBCxDtRtmHBJxFl0Tq\nhN3dGNaQ+SLksQQYxUcOVhBkDpmtQ0VUAkNBOO2P2y9N1AqrC0PN71CdQ0qf\nch5/YUWhe9clBjTgx/HZJSFbOpOSO5ogl57twG1Y5Cv/1PSYZkMq7li57kpC\nRGIFZ/sqjgNH7JuYwFwVzQ+DHA+Pw4Ykxc0Rd48oI7piOsD1ysL7VeW74MvW\nu61PBy/EAgVb3mpEVJnYhMYBIMRgSMh70feVtvASlfYoDmFurFVjcj+AY22V\n25dq3Hl/tJwPKstB8hxegRMa2ku6JA9CFrtfrGDr66EMD/Ko8s0Ty2M84Ov2\nVPPi\r\n=lKBE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICe22Wsf04pbT+GeFM0uhftdh1Phvaq8guaj6uDy/enfAiBBGxBrJHBLZA0AK/RhzxdAf4lCFM7NexgprEcIzXhK9Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.e8b52f5b.0_1590518587938_0.5195234704186686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-icon":"0.16.0-canary.09afa0a9.0","@material/mwc-icon-button":"0.16.0-canary.09afa0a9.0","@material/mwc-ripple":"0.16.0-canary.09afa0a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8Tm8w7mjpPLxrwL3MPqsnduC2q5JOgfsD7ac9KIRoxP3fSrAIyFr9fJA3tEoZgzOBo3yO6FVJo7+2ConJ0/RtA==","shasum":"0168db50a555fb23b7fbab73f71c2d0c1a63fe84","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.09afa0a9.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY26CRA9TVsSAnZWagAAfNEP/1iWPzDx5Oeis+tzLLPg\nNUYswEQ+tmrakpVwnl6l6pwqG3D/cW5zlzcRRsbC9u+s0MDsb6Btwb8vsKAI\nwQxKHPl86ykwsGgblqitOmjHDw0iauHckWykMONdpEurQMfYBStX+wocUC5y\nuiSwWQVY2HeYRWzDaS4EeEC3JnLkwAQzFo7/afSr6PDbi4Guq7JWVAlFWcGr\nF8AScxTgU5+UV2hAVjMuDxjMneuQMcMJ9g8ojt8vPcnuuOTZNLPHiXfHGI1z\n1cTl9BVfO8WPXFXQeHOT5Q48rNRzvxgNjVgJSIl/n3GlDk7fLnkzJ51zzlz4\nM6VjyqGW6qjNzxW6Mb6V+DY1FTqaiH2zu9euCAVOzgrYA+Qbv46XvDPUPs5C\neEO/tgp/j0yokB6dz/bFuCGe8qzkW6Nxfza7mvI6tWPkiYQBA0CB/VyckHhv\nybgb3hCnUeiazXjt+2lT8X2dc1s/lVO85lEVR6sVw/U44ndZAqKsxoabin17\nWgCfh6nVxE0OOq2p1E90Ug8qgxHsSychvpQJdC4jgJWApujeo89N7LsbeRI5\nxlbmfN0X07E8qU1FI3usQMgk0fymOeCtZlIuAHrlqjdHYb7aUTvvTSlUHDsX\n2s3sFIJf8ob6Yo2/aSTI7HmkvuPKbWQ9H+Pw6l3qMmk2h8jCFIiMEt6S3mh2\nrKSh\r\n=T2HB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA3YRoDOr+ka85h8Eaj7Q/LdzKqM0dj1jS62zrS06W/wIgHO4CXyrun724FcOPaENA2wlLqlsfoqviM9LK9EDiZ0U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.09afa0a9.0_1590529466223_0.21335399868764826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-icon":"0.16.0-canary.58bc9166.0","@material/mwc-icon-button":"0.16.0-canary.58bc9166.0","@material/mwc-ripple":"0.16.0-canary.58bc9166.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-O5b9c/tN5MY3gTgxn2JaTbMxiM+5SbF4C3R7C/lMm/bE2pG/1nWjjtnM89PjpGPaXJxrgjxNsqfxbCp8zY6ZbA==","shasum":"3092a4ce92f4e012ba3d53c7a056e49c03abab1d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.58bc9166.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSvCRA9TVsSAnZWagAAmm0P/3Fl44Q3kOD9W7DpH8OO\nps7CQK8C16Z76zC7hhTwvxQTF/hC0/QK2vewo7s5penncT8lg8ffn7VS55pF\n8oO3mITiHz85l2Pv0BYJAJXUne9YqZBMS03j1aIKaImrWv09gsMPRYWhJtRA\nhYZySsAWANaHdzohA7S5Oncq/YyulA95qjMfD9Ngx4yxFIAUMqSDeGSy0TH0\nZLtHU66LaZg1lH5MFQku3DiBgsfB7FECHITeqIu7+pJi8Sp/a9SbC/EvlW0x\n5KMtlMThe4hr8vNo4elr3CJuGKtDGp136B6pq3ChvfGOVZ1Xl4O/2G+jAbrd\nHKH1bf2XZvCjpjK3M4igx55enqgVsu5484tpzK99KoYF1blrS03ENeiEY4CU\nyTG3l3xwu3hClqN3BHaFoFcjv1MWPJAcem1ORYL2LtFirC0eN1pKNXUDKRpZ\nXJZsEXKIazq+d1X4f7ZF5bu4Y8ALM6FI/UNFEGDnoWm5vJ8UpGIjzGLk6KKO\nQAsJ4v+k8ZQVKSylu3l7t7fkpFYZl8H4EDGBySckOj1+soHRthDLlUe+4PHw\nYu6uBpezb4ZTP56QcdHoz8tLvhBLZ0SuuZZIGolVZBYBkWelwKDDttygp1jY\nrCXEzhwCE9XRBpHSIM1knDMdmBo/psgIrby2fSlXtcEj+8IM2N+gczTVhqqe\nvERD\r\n=qhZu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQH2BUNKpWV2E8ncICy4pKTOv+uH7JZqicN2lq9T6omAiEA7ukl5j+/e7XmCcVUnZSzoG/EkX17xAfsRoPBfDLoSEs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.58bc9166.0_1590539438722_0.15475215022652478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-icon":"0.16.0-canary.43bde144.0","@material/mwc-icon-button":"0.16.0-canary.43bde144.0","@material/mwc-ripple":"0.16.0-canary.43bde144.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zrvFRzD6DHEB9/8+WgxwzGKgXC7kgwMJG+QZUeKkyuvxPpfbXez8t9KN36a/zUrYb6sOl/ZCPT620i5zp8E70Q==","shasum":"18e3caa005c4a0693ffe038065865e5a5ec216b5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.43bde144.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGNCRA9TVsSAnZWagAAFYUQAKFdKosqEwKzacZCocW3\nfo0YwQ2PQdLzNrw8R53VOnqBR8dza2X2MeuQwHnbFCblsHZoz9gUU3m9ZUkg\nnQT2C07hRyPXgMA1tbqyHWffjfasjmqbxo/N1rlDvGq3U42OqWxi0tmel+s3\nveGWQsL8+XPkDQ+/nwRa/jsr3W7OFm61R/8wxiUe1UMVdY3kt+YGXsVZ9yW1\nL+8+9LR0EjbkbuF+Kpy6i0+E1VMLmNpXqZwqJpLV1Mm465SfY1zux/5EST8W\n6nuPN7aTl+W+VDUhV0khVqgK34O3jPnc7oB7gTfUIm2wMBWFyRxUA+o9LG8l\n25GJWhC+WEwpoT0rgS0qWiCq5b/8OrJoVO1GierkdTZf3J5jCKBnSZ6QBYE0\nWtmgPA2Ehf0Y/6n4lJ8X5s46KtDayaijX5Ag4b7tOn1OHM5Aa9gbX/IV7H9E\nV9AN3I2IF1XnVcTvOoHWFhK8VE+95zIOBp5B13hY6ZAskyanXBQaEYtUPG9V\nTrgjyjeT7ZQFUghauvaFTSxG+oi9Y3GV91kW41jeqrog1VbHewkBKsRjo+Io\njOqeZmMJTKXNaeXFzO3V45m8IXotTrhUdLhxvSwC1VI7pSGCGgVvHJkwSb7y\nosLqH42298CEMQ1duJm9W5k7ZVceExPc5um0fv8cP+gemEL295ROoC5TMvrx\n420Y\r\n=NwXz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErbBwZJd7gdIL7xz8kJ8KSIrwA04Lv5d5adMBx363MQAiEA7wQTKhCAT/n5Gy2r/ju/nf/Xn2ku3NOnaMHKYlnK8dQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.43bde144.0_1590604173397_0.003952692104532529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-icon":"0.16.0-canary.51067bbc.0","@material/mwc-icon-button":"0.16.0-canary.51067bbc.0","@material/mwc-ripple":"0.16.0-canary.51067bbc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yPC8h9D1ePXZxkRDMLO0OgXXHQxcKzaofMtPf115g1C5botZtcNKnp/sTQwJ/kHrcjjD3Gj/v6I+vv8P80336A==","shasum":"7ac3fd74e4843e9b429005818628768becbaf120","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.51067bbc.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseTCRA9TVsSAnZWagAAUFoP/RHZtDEPX3Q5L6DrZdxN\nu1kr+5XGoraIvm50eICcbfGwH5OqHkDww5hfK3ToTyagMQd7XTA2vhFd0/jg\nqBDP7SESPdULgMD/MScgusYn1aoWWbh3BrwPlC/lVFBL9dytcQ6j1619prME\nElyEiGQS09zKTed/GHMraAjJzcX0sEzEb/YHTcOaevZ+1pGtFyf8ou48YatK\n9/8uNN71Rd+Nfk832rt/LhS3auUbdyYEB4O3h0kc9LqIgAHfwl8Az06ub5us\nKRMfpYbc2/AEvalIaFpMTGfAmav0Fjca2Yy698DSZCo8UN9kJKmW5xNPLFZQ\nS+yKdRMytU5Ot9id5kWLFwsa+h2xWvio9zS7wclG1sB28zGmW6lRjZOIUYil\n+huN2dv3QEBU+fw4I8e2OtYQwAeBrMtYGLnjSPscqv/hapr9zSaneH6k5zyQ\nc9MlAx+6qftSt/47croNuTLHZn5+70Bqz77NiPUfdAsfYbczw5IndGH/5AEI\n/8m4rCFCJ8/8/2t9aq5gRWul1trXEbA9YEtd8sHk54Knuuz/n74kmSWGvmCc\nt62PyFpxdCs2N099FabyyzmH8dpNhA5cq/egau5pglI7kPGTdnQGfnwBwDR3\nVO5Jk819KDAWrUwUHOUPBiAlglc5uxQ57KqLIciczYo7uhN6zniwAvFexOK9\nQbMg\r\n=p6xf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVimVXAyVFWlVffkJ30GWuqp6oWmccTI6FI0ZnmR/p7AiEAk2Tjh2ZSoiAeaTzFf5EZVNyeODM0UO4F+kxgvqcWWwU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.51067bbc.0_1590609811171_0.6011657081310491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-icon":"0.16.0-canary.92751ffa.0","@material/mwc-icon-button":"0.16.0-canary.92751ffa.0","@material/mwc-ripple":"0.16.0-canary.92751ffa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ka72N4Uv9RtEy+9Ol7HTsDHgULGfnYlPZHQlu/aRwxMmz9DSiM2w+uACIcsHoAzFmKnlad/XxAmED6TUL4KOow==","shasum":"f36da8d2c3649743b12fced2696e1d8f7834b2fa","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.92751ffa.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1vCRA9TVsSAnZWagAAukIP/jCCg79ZbEwMXKMPh1/K\nEgv2xyNMCAndPqEufYRN8VaLFpdQGSHjU3fNPNQYhy5ekjHkvm5Io/aQtc3I\nsNBKcHf5ja+8Fs08ONzBh8ZkEJ7hWd/rHQo1U3lTyd67qMcmpeMggTFhEY8f\nOEM0PQhwcIlyi8MItZi8j6ypJN0y4JBBV1mSsEsEC3u1kslvkI5oqfcw9JyO\nLfdTE8zOTZBBgajo8jAyl8YwNuhQJnguuIRCC5P75BGS+7vAnKhwJ+D8ea9O\n2f/1GcA8XslQgpCCl1CUaFBIrQMRH2WGLymTD9xij09mNPgCh6Aw7O2y1o+K\nRsiZfPzNhmMdavveubuFLDzX+5thL43a6gZvhxr3xUcMhEVcrXjnsGKZqBVW\n1MWwzadGnX2v68IjeB+p658XLT2xegnMa0+bMJQAkwkn8834DG+Ly8DPzUVs\nwTThJJCeF6y0/Z4fSsWSsNCLk+fbvWYOpnHr3ccjT4s5S/mznoPyx2M6Hnaf\nzQuSje/X0h/plB5ZQHtP1wbAusBb26DMFuAnfeJ+BzufCuPlxib8Vnee4UNW\nkdHMAORuWciwCfFTIYWHOry4Pt9lxgSoOXndb0c87sVN10zXIlKGw7zylkkt\nzl1MHqm8Bd2A5zQ3321WOegMP6Tl1sUYqGFnXmw0mzPpHDGFrARAXv8DLyUP\nlxsZ\r\n=vWv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDby9Wh/TSWLq7e2GLghPQi5TNH7o769ntDh6iMOpaPDwIgcOBw/5W4kVaezZgnYzpFCKK4kypbQmDIQI2GZjfV7/Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.92751ffa.0_1590615407455_0.440256418999754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-icon":"0.16.0-canary.aa2b40bb.0","@material/mwc-icon-button":"0.16.0-canary.aa2b40bb.0","@material/mwc-ripple":"0.16.0-canary.aa2b40bb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-frNYLaYiwr5zcs6crf2qrVIKu3+ZWCco7DIl/1T3Lo8YUwd0ygc1BvHHxpfVxeDw3je90CbPxxWmDM/jAivJqA==","shasum":"fc57ff0bf2661e05ccd95a96ab2e6e0d2a701dd3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.aa2b40bb.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A3JCRA9TVsSAnZWagAAdXIP/0btUzsW0C7Tny9oHwsk\nJoaEjMxcV1K0SyCyAexFT4PUBa77Skh8wK1A+pTRYd0qrHlanXFnqkVo+rsp\nxr1vw3bHIH1YAM3SPLcB5cXimhbVu9Kbo9HCn0g570z0z7TJsTpDAFS6sUkP\nOAo02o7CLaJMOZKI4/U+x8Wx0X30SE1CmO4rL4H33r8xrmtxZeW6AbmBcZZY\nM/RzDL5qjuQziRIY+14YNCKiEMfCacKiCAaP1hLy0dADwX5OEox35FmH09Aj\nTuFcqSfUtkGJPPFbPJ7+9xGXSx7aCrlK3nvsMN2e8xi4ztcu/e8sjL7Bxq3c\nXXaYBYItJTkRkWpSEALCzPYjIRrJB1U4z+I26wbifVOLy75sjXB1ZIQMge/C\nYVHrjnK5m8Mzekd2UOMDXt7LOL01rIZJaVMGFzK2Xnm0kzZrDfKfmHcs4Uar\nii/lSt8jl42ztYJQ/mMLklUAqTfXsSfVuuyTdB1QAkHYR+YI2mfUf9y0KrIe\nO/XRZbPODVPlcMYE9/U2kC1d8qFh2W7wdZ2wlnSmB8nIYgXPk5dNKB2D3fgH\nQmnHn46BEOSFySy4RZ6SIEfJ44rLa0UnkPNvuocy1F+UXtdieF0FG9c+8nhp\n/TLS7D0qElh+f8mf7kRJ9zegCD+h/KQs80RRMZJYm3qLvCZsj0Cwfq6OUy9q\n8E1c\r\n=55sZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ0GOOBATOutTDwalWTWNUZQB76Phft91IUspsIMP9wQIhAMGVPDuE2QfJTiFB5K1NvQAGBiv61RBmJ2viAMKzVinN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.aa2b40bb.0_1590693318525_0.9148325892576703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-icon":"0.16.0-canary.1a870a01.0","@material/mwc-icon-button":"0.16.0-canary.1a870a01.0","@material/mwc-ripple":"0.16.0-canary.1a870a01.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4nWxDXzc9bbU1r21JJs/CTww4AeTTpQf8JsNAfSW8skpKFyoLHLZ2oYz+bbXMcedFEHXsrnBbwFwwi/azhToVQ==","shasum":"b2f7fd5781659c4b2fc8352ee871c61ba8b7eecb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.1a870a01.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CrACRA9TVsSAnZWagAAmvQQAInv8PZAi92BseAz6Cjd\nAjwlGKcGy0GDafSuDahX2ZYyibVD4OJEvu6tsoERNc85HJ5SyIKTO+Oi6XW5\nON7F3zJf6iwjdQ91m6BK4PXlWFR05/LhHZXLbllRVbQcz2AWo4DgG+i377R7\njXKwIvTrttuGXBlGnxxsiOQG33rsvyVmpFPcwPHPbww0N8l6CbsAqNFGu7gX\nKqXcxJP4+zvEHA6h6oeiUAyIfXv1Usej0izVlxbhMBHur4knHmxC2FGEWflz\nMaLPuNUvnC6p+kaXTktr0zHPZ0eqXhyVsU2g3UcCrQnEH20rakptckx+VFgR\n7Se1ern36ICRuSGauLGJSUyjyABSqR9ThrqXvS4xq9j/xvSEcPm672usUoSR\n9fGs94MwLVJeInc6lUDwVF9MEjSa6pRBixNFUvD8prjkcXgn5KL3OBKlP+01\nrLpTshe6EIjfrGXhIJtdxbumpYzXgE/IZtJiFqN6BJF5gocuXSUjKPpgp5g7\n+EJzvGMjfzYOi+DJm21bVQvALK4JMKL+OVJ2sr8kTgNiom5XlPocYdSqe9tx\nPtZFhbNyu1I6kLJ943vkDLKd6STcVv+wj5yngRAx+W8KEufC/7AsPcFQuu8o\nnjN1MazNFPxstAacfRmD4pPUXjvTl1hI0xV7frcBoaiPPGghT0qS1tWDfU4b\n+7/j\r\n=zeLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7rAiMzqEZPN1G+p3kR/Ca6XvXKQkgaYWfdpWBnYdDUAiEAy20A7bisOsv5toVivh/zshWeqLVBCnWBsNmugf3VPIQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.1a870a01.0_1590700735681_0.3635806032277147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-icon":"0.16.0-canary.ad57d086.0","@material/mwc-icon-button":"0.16.0-canary.ad57d086.0","@material/mwc-ripple":"0.16.0-canary.ad57d086.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OHebS7yoSrTElI8XOdmiQGUcCceuMsQtiHbZr4UQ/xOObKst0nWkG+34pSsQHfQe2u0eOhnEetXR2FhgZkBH7w==","shasum":"632d120ea0bdfd8cfa4207f10f6e996391452c91","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.ad57d086.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+JCRA9TVsSAnZWagAANZoQAIeLU1UZ9OkxSkuQolie\nhbECu/StGynq78jVpWc5CNzTC10A7pRabeRK/2GiNpJK57cEF2vX3dQyw/K4\nhxGQ3avDQ4p00iXjBk1ZCQ4vDP9tWSrWKf75La14CkBkYEwG1typ6u9XFtbB\nhnuPok9PAehMvBeX9Qyj+zS7ZR9GnoFZveRZmqH096LJbrr4oX8ylQMjwKwR\n5oUxEKHYeJnsPTfXj86CPdx1LWJbHUqM3/Fv35CxRsOmld8ETjqRRoHFGJib\nSjvuJ/1qeMZ4LoEStsqrDAPsxLYHdqBrjuKkhqEgWgPUYMohIhJTF6gUPBlW\nls9T9bal8CpBsjnWY2CiLNMsG1WOwgqtK0+PkcLdxk4aIPeLJyT+f3agedaB\n2owblnvSMe2TKee3Rp5iLR0Q5PHzgIzQCf7uz38hIJvYKvtNajxPGQ5JI212\nMTyxepuG2hh2zohFtdoBU3Vvcz3uzOsSBUA5D3akGzThVxfJmQzzVHZQbTZw\nGKQCcpjoTGegWKA1eWvHhl83PgJWi+JhOV9P4PDommfndm/A4IEedVUq9Lsn\nXL0WX71kSRb27Vhw+9NJU5hpdwjrZv4AfR0ZxCF9Kmecab7e6UgjQFiE3iEk\n/9if6eCBA3mWDC0O6ON0aGhbV1XPYwULmNqmxNzb2DBRfVjh0AlWC66oV9qf\n/TIg\r\n=HOIu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdK90KNdxykKwDx9hERAXiZKrF8Lc+jc7/SvSwQeUb0AiEAm+J6JXz2+/qgc8AZKp8b2S17aFcV4QPuYVVWNMSnloc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.ad57d086.0_1590796169303_0.44835124539898086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-icon":"0.16.0-canary.3bf2b4d5.0","@material/mwc-icon-button":"0.16.0-canary.3bf2b4d5.0","@material/mwc-ripple":"0.16.0-canary.3bf2b4d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OWgtbgjhVdtB0ptqWPu8RHEV+mFPeXE8BPqxrmkFIeEZB5PEc1xPG9/KtiNi5Oy315J7137W/vO9wU0LorjtiQ==","shasum":"fbffda99711b9a7d86acb5d9946d9e5961bddd2d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqwCRA9TVsSAnZWagAAWjYP/iYeD4e0KCIvlaBCq+Qd\n3LWlci5vxhvRN9sC+5ZS2y+pBhwlKx0+5b7FkjHN5bhf+jowjD/mxjPgZcaM\nKi2f3eZV1I/c5FHUkbFVcvRuHnZiQitd5IcVSbdK+pgs/4iWIzvZ7MdNQuDI\nSlkD4cIdahjreK577gx02pAKI10TRYGBdRVFajKen51vCerQ8tLBZju4igmv\nHydBEWEZXH4d6UFUA5RXpEx1GUtDap1UyW8SDAG7+qG7kj+u0fkwLdAzGRCZ\n8X2kWsQ7aNpfGszHHrSBQ0akexOx8aQyPE16QMkGwDsnO2H8S0JdxRCYGK5K\nGIkaRaf68sxSdn6ikXDuL2qWaMHjNICrBzqpJVxGIbBft0aoLyxYedy7BP++\nG8OE2evhhuuL0E38dC03phBMxJ90q0xpxcQwLR2FeGWTTLy1Omny/Iuer2bd\nq/ASOdIPZiFhFPZ1ByFKa88YgPwjiY+pyvdr3bxdwJupHphAwhCuNqhNfMOt\nTrLjVESIOATtRdHbSyVu5OeQOiuMmVhX6DBplGwvjwo03wFWchZot0pO/8wb\nX5/kKsKmVg1ndcC7OYy/UYyWFUzGszTgxe3FFueULIj9xG30p/iqo7WGInVf\nt/i0zwo+MTzza0ymk8k+4cg3yd9wCchW2B2AR2E52WVXdqTQSn6scQDj+VEz\noiLj\r\n=MiG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRiTGD4vWlXjrCEgvL3bUnPCXoC4dthTC7lFS8IijsNAiEAhVvESYqtXiRo0NqbCaNykU4kkE58C6kHF5Uf9wehNuA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.3bf2b4d5.0_1590799023861_0.03904563877828493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-icon":"0.16.0-canary.ac05f090.0","@material/mwc-icon-button":"0.16.0-canary.ac05f090.0","@material/mwc-ripple":"0.16.0-canary.ac05f090.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rHBrQ4QC31PiKn4CItFBzKm+67oujNCDyxU1xONh0wppU+RK+zbaqvL7a1GBT5TYTiKzPcZCPH3hv2sbdLM+rg==","shasum":"82cfbdb12957372f8481660761ba944c6d80a63f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.ac05f090.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cneCRA9TVsSAnZWagAAf7wQAJ8XwcJ4QDpk9G/lN0WH\n4o2c3rBAaQuZl02JV+BqkmU/O2Cil0GdD1fc7VbbYXzQ2+Z9TbLH7sntNwDl\nVLpIPJK/fgVRY0szWcYpVJWOYsonoY6+wk2yDWIuKnhHoBJJZ1dKUJszGe0l\nJao07sR7s7IhSOGfNwavmyWuS8wyzT5xk75QkctzhzprSLxJE+Y5doWPABeH\nU9wmgDw/8D1+gPJFF9m8pd5ZkPFzxVokUwZkvQ9keE/TUe8HhoP0w2Wza9dJ\nh9g2R0eu7RLt+zZ/uKuDLNoHf2FuEyBDMnCqWGA+8YA311I+7+aHmOxCjSGr\nTevQ/gCaXXveMuIevN44W29Q9enV2ekrOYwC/y7SlM4d9T3ojFpk4Dl0hNjH\nf5aoy141ki8Is3zKj/4Ed5BOsji7PhrH9PIZbWGbjUNqaoTa14mMLImd2fw0\nD4ATquWunxn1Mp7fQXYOASw0T8RtNeELEDFDqmJ+HslgP4qZB4rGX5Qxudtf\n1Epl1gecn07Mo8wNGsw4bAtMmyARi0NWWRZjEXzKB7cO6IIoYrETz+a+nu2N\nWIw8/JfkezMnhJdXlidqNMcieFI6FLJXi4zAADJYUCnBSrAy0nm7//zn7u4B\n2v84xYyf1sZ1buIx4Mw0OF9mFh92aJ1LwRd5mGGKhnFufib0oRWimSOQ51yU\nBe0v\r\n=Ju7m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEU8jNvfJxp+6HgZCntqTY4Gpc5P0mHK6d5dzJqFBL1kAiApfLDXxz9PqOH3cM4aJHB3/Bm6N/3yr7TBci8jRppZBw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.ac05f090.0_1590807005725_0.3933242349583359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-icon":"0.16.0-canary.0ba7b095.0","@material/mwc-icon-button":"0.16.0-canary.0ba7b095.0","@material/mwc-ripple":"0.16.0-canary.0ba7b095.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6Lftm9tuhFl4szu2ODxUdPmDcbmONF4A9tLRkcJ4UglMTutDGJfz9pV18oXFwRqbVHSLtGdPjBrYPUcy2k4MrA==","shasum":"3405d660a8016ece4c874278a8158127e37cc22f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.0ba7b095.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctxCRA9TVsSAnZWagAAl+QP/3Z9ONo3GPfKlHtTFZ1/\nOftrPCQsqYUgApZNmh06YcVS6PpukTIDIsykpc6DTQroWY7rFisrPGqGLqdE\nPLb6ia3p4OoKfGJMCVqcjYdB88oMCaugBjGvkieGlFrlTSexyQC3UM3zKAFv\nCJbTs/Hf1+fJc1DKscE2b6Q6H1efeWHyopQGziE7+fpND/Ra0/pm93Jcnh9k\nMKf7LJKn/iibUP6BzAJE5AJrBC1I0s1aGThr635ehf4z9HIXoUuSIRM5O1Qy\nyuJsjpMYCDNtxa4OpzjyztcRudkENHAXpgm3PrMkKQ8JCIQuRxudO/41gCX2\nkZa1L6s1Eg4H67i8OwW2XLcWSFPCVf7hwSB5QdjLbrgIQvJ+gG7Bu4u85cVW\nm3f1ddEjKBM963Le27bmL/xig6Ro7G+g2H4Dq+Brl9ht9Bsb8MTNs5c+kGeZ\nnTKqWd1kkDIIgaM8eiUk2IDLBF5rgxf5jXoJ3CH/lFl7gM45ndJ+vfncAJ3r\nhZYEE/eL/mtMOWk0a9BZG58yz8wOcFB65tacl31ddoIoDCqoxTsuS1hF8x+r\nt8lPD6KdsqsjlHaCnTwjyk9mRRBzHcdK6xSd0/IYIwJnw9nD0fQlNzgzLORI\nCXx6awUmX4l81wv3s5Jt18PIi5bVjp3IHIIogSMfOVnSTZX/bMactTWxA9TL\nOZ5M\r\n=1uiT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGO2JWkBIvI1rHyqQxuP35EXIIi/KSuoKnVlhNaK0NMEAiEAmLCKfJ422625pNp/MMbRyJbJsmoeSLqmrSArmNtCg5w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.0ba7b095.0_1590807408882_0.9713298055260393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-icon":"0.16.0-canary.5eaa9bac.0","@material/mwc-icon-button":"0.16.0-canary.5eaa9bac.0","@material/mwc-ripple":"0.16.0-canary.5eaa9bac.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9bEFPgSeeUArKB376YRvdp1Ynom1EtfYmu+jq9lykiN3l4yeLmROtDPSaYsNsDy16wtNWJvOBzpTqrZn5Qfguw==","shasum":"7f724ed8b8770fcf6cc0046b5bd08574f75b09a5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.5eaa9bac.0.tgz","fileCount":11,"unpackedSize":37230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y9JCRA9TVsSAnZWagAA5JsQAIwssBDwScU0NL03f7w6\nLxricmfnbQD8LPhn+bluWQA8534+QfJta+xhDG/dI76+FO56mRo84RGvXW/j\nDxE57OPcwIHwYgAxxFtzUde3TRma0YbJkpQf95V3dNkH8lNTgXIv9s2cGkit\ncN1wJeBorVwmQa7u1wZveZ5TM8zHuAFQt/LD50rwmEknID67AFkiiq1IDyBu\n1zt9hPTxB/vXqEiwbXmAw/agsk3eifJbrz7I3ReFo0RU4HQzxZSfk9HaR03D\nf6cQLVy2qKgBi66dmfIvnxo0rsHtAQZikD7lugri+dY5M5AqTCQnkNQ5Vq/X\nhzJwQ0CIQ9ZIoJHyh6H1BgTBnN8t1apFMTN7XJU/oZ6wGu3f9ODequYeZpX7\nQNAyXh+hTMDgOOXF9rSF2Vvg1w+o/kASDulSeUOAMN00e+L09cSWLRGHnw51\nnk892s+Y4vXrsfVUKLAiZykOXpzxgwytC+rfWzxbWS5+c40xDisLDsc0j6Ac\ni2usGJMrRkxrwMWiUoDDXF5/PcAKjDv08yqDcT2qL/K6qnRWHSpfO70ppDvM\ngQ/nk8NL5rm188M4OHV63h4j0uIRz79j5Zc823XQrfQL57AMOUkitCBkexm/\nXrGt6VSYyvkn9zOjtQjk8ab67ZVsrZPp+D5iu0hAKrkHJOH/VBqvPp8wx+EG\nxucM\r\n=VqEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCys5QRbzm6cTBVrt8znvyfETBrsM0HkZGJpiy/vh3zGAIhANfECTioiCyMpny6y5ONw9/KZKPOfWmQj3L2gJkxPV7+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.5eaa9bac.0_1591054152721_0.25323561898522406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.5677ac20.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-icon-button":"0.16.0-canary.5677ac20.0","@material/mwc-ripple":"0.16.0-canary.5677ac20.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5n3l4SJHBVwdpYZHVoL7GR+Ygmdly2C4bTBR2kSBxGk5XAX0Rur9cJqlK0g/oBWeCbiuu2usSU9zwIk8QELmlg==","shasum":"8ad2a2d4d8bc6351d48f501d2e64ef0bbf07bd75","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.5677ac20.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXtCRA9TVsSAnZWagAAftYP/iFcIOYEX58yNxAvYpEz\nxJo9SQJ/dVic1XVCQ7+kDbCjpYB97tAEFrT/odxoViLvL1iGncfFCfKOsfzj\nm3wfk4JIPVHoe2eDtqiF/j+P4ckCTIt1DIxBkvTxUz37520sgXr8r9jbWYID\nyMo+il6opXJOJc/OsSrZjo/pvFKrkNCA+Fh67BRt5Zr64YBVkwzhLifR7X/r\nCeFtiYY3j952QiZ9XQk0u+JB08cOKg9frFX+7MjLbuPZsLG8bZko/CK+jCPZ\nlH8kA0+GqAUIQWD48Hv+LhKw3RMRsvRoBWJFEvJlWOCdlH4Y6hr7FfgWQyxc\ndeNUwdWD3tbMuOEbyRP64/pyDoj/gGAukIY5iUf/UclzdtGOBe2a6a/MSgDG\neKPOuNRUdO7NrMIUcTuVbkHp3yAAaX5GIgZU725MTdyiJobIYC6lAb739DA7\nEQ3bwpxkzfJ7zr/KviDQyqS741H4RJg1r2s8mcSl8EmyIALn7xP4BVph50Rs\n2ghic+UFwcItLgn9eCr1MLPvtDlerl3DqUqxkiZIRQmurbXRSNU3UaK2ivhH\nuiB5UuNPD9Lb+5uXRhDSc8USFgHUejfp0C9kw/0Jc75X08LR2p7cDr3eTsNE\nmBAdNbk5pWlQF+YI3QxEzozh1ZZJPPoc9v0kNBgfpK6DmfH26+AYK0v77BzA\nAM0r\r\n=1OoK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDT7oywHPOT7E6OT4EcQlWqEgu5m4qisf9/TsOZKNaiEAiBiwD/HAGaOMspiphjKcAPJQIdvrrqIz8AWtl5taTP5cQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.5677ac20.0_1591055853144_0.741094411035742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-icon-button":"0.16.0-canary.7ac6bff4.0","@material/mwc-ripple":"0.16.0-canary.7ac6bff4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aAQ6fufvcdJHjGSVHUPGQpIEouXZyWZ6AJRmbeaPS/zuHdnQsEwLCe8LBqLvzG1tLA8trU3NWXaPmyjCiiYQ6A==","shasum":"2c90e5f235ec2c07cbae1ef9c9be340e4a853dc3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.7ac6bff4.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Zo/CRA9TVsSAnZWagAAliAQAIQbQjQfPtENxhfXWtxb\n4vEWgo1NAm0b6n6YviwITpMDAxrcZBLYQMW2PtOatUTO51EFtTnfOtXgRnUg\nEDVUZAXZLHxq+C9DzwlIEcSvfEurhxG35Ja4jmtU1lyvE4oGOftYnA2YXzZ9\nH4trc/XVAPnfWOT+fJnT7Lz5fUviB0Vp8HiqaObouCWave93GhxawyCeHtqz\nJpS21WO7eKpxuK5a6IY2julyubsxvutKKNq/BDOuB+BEpCt8td4+mJs59FyQ\nTi09Qg8QJ+cYoXJz80tFbjSX0sSTsg6VJj3hpAKKc2hpL3IYU+yUzWSXKT+L\nMnCM9dzHMTaYFVKhgoXYhq9uu8bmT5dhpL2l5/cFWSc2XfSxXWmvEg05+8Uc\nIZLudHMegxnKIrUeqfSAoslXITkh1G0Qu3beJxU7E8aW3QO9hK/+UrZ9vWwf\n2ISjcs2TcBD/eL6EbhcukkLq8fouC5BMwoL0kAU3A6cNEWz/F/rlfhVpFz6M\n8mFW8zFvKhg7kYOtHkImTMfdmu6FU6G69Q0UOiWfHjCTPx9cWAO1wEvst0/z\nmcw3qJJVqHuOyOckKlcQ7pzZG2QbqsP2WpZokhzF0EWONZUQvg479/51mzut\n1hvNArOpkW7Ec4xwo1VjnMhylrHD0z8FOZZUi71lKlRhPHJXkzLiKf1T4Ptz\nqf9I\r\n=J6GC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaVY3+/gziJzVXj+F0/f3+055Kesz7t/nf8xqbAh4nHgIgbgu1HzdC+7E/RY9HavEK8TlK+RRSxNV6i6Z32zD1RqI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.7ac6bff4.0_1591056958641_0.6264415541939141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.d45622aa.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-icon-button":"0.16.0-canary.d45622aa.0","@material/mwc-ripple":"0.16.0-canary.d45622aa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zQdnnRkeFFbKSRK8zgEzM5YwBO5d+0NE3HXvEEgaKOrVkk7VfG5BEyjAJseaeHDmEQIFEl9hab3qgqW3/oj0vw==","shasum":"21f29a904018f0acb4d5ebc5f09eada00bdfbad5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.d45622aa.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uTCCRA9TVsSAnZWagAA0MIP/2WAESltEX/Q7YIpl+1a\nxI4ezSbSbNL0j2gb66wygHAXdTUOw7fQMEPDaLZETX/xVIfrXrRrJIFCWavQ\nkFxxTmtVytEtmAvFDsMmzV+FnH5enBCk4m4AJvm847ztPrbipPJmNXqLkCJV\nswACj4106ZlAKeG+G4zX9SgtkNdA9MBP5CkecYfiaXuezSt0ke9KsTnpVtQg\nzrhZKbpFsSmk2exT5TGpeUX5VXKvRum0A22uzcZcKUzost/KiTW1bIvZKSOG\nnD3KnWjN8BByAlEfUrWEY1roDxOH2sB7b4cJRyENXxWu02jBvVQ3OUif21vj\nCtZSIPXpgCHHqw0zk5tTZO/z4lUGz3+YflXum97Pz0W+J5e+AuVC6cuUBSs7\nqrgsGUReULmPS82tP7gvvGM/UG+73BMPD6KH+R+5HZrm21J7Xc7Rk1TxPFnR\nB2v5r5rBiAfoaBKD4XtdDwDXHIHqt2u4n7ykbgewVqCBNk0GuiwiXONU3Gw6\nWbqeKtEu1YEOuyR3C0bW+0byGI/e031n5GnVhULTQbGCp4MFqavM7cu76HGL\n6wXvGTKud3F8qdLu0dsW2WbFg8ekDSKe6SzuMAXTz3Pzdkhz6yWdL4au2RpM\nc40uliVVOBFfQcxABhMWbGzu/w1bs35VoDGEnc1lSYwXOEmMHuEQ8nTIBig9\ndRuL\r\n=QWrw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhjIxFUqQLtQldq4Bo5fZT0J9q5BtroSyIhHz5v1P8ZAiAfNVqAY38g9Eska3OnUqLgWTSEksqdB52OZhrNy3MqCg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.d45622aa.0_1591141570535_0.7012375656817671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.dc26c709.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-icon-button":"0.16.0-canary.dc26c709.0","@material/mwc-ripple":"0.16.0-canary.dc26c709.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SpuHY7pAValKwxI5g0UG6yMB2mWpArh/1fpo3t2fmh3o1AD6PNbVZhvDx7TXt32o0L8IQayy0gJT4c/Zjwd2BQ==","shasum":"2ce90291726f25f0a2301b90be7cfb990fe2b94c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.dc26c709.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qk+CRA9TVsSAnZWagAA0ygP/REN1oBytm49mSZg9tCC\n8+k5cUSXTVcx4ta5cUG1erOQOhE4wHQljmn0uBIk9tuzBK27u/G6jGTGvagU\n0OY3SPKYUnvmbs7OGFtvIEkwL4i+0Jko50z7Q8ujWlvpnyoFPKfqBhc19wv5\nmn7LSGzg16WXldwKTTv+uHrrGutmjnocFZXn/FTsZkV61QdhHc6EvYaKmYh3\ntfzIM+b1IT/UdDUKv3Eiw+tbkSVkanj3125fqrHvC7ytuKVd5fld7RQYRnZX\n+vZMqcvX0yq1ua2FqhEG4NZ7RKst+i2gJnnoVoG0XJwSTjx6jBWy7pkNiPtt\noI6Nx/4Q4nyEek2+S+AZ4pgsvk3NT2gLqvY8M2nd7EbbfgJlcMq+rSqHtGZO\nVw6BrMvQcaf8bDNAiLK5ubLbdOf5Fk/wQwbiZlpJT5qvJfXNgPjCv+MR+x0y\nVtdQoW0D8F4tmUic7+d8wlAt+QPZOIAsqhaK1qEMisAeNFjt9jUFPPqaPjck\n2rSpjeJfiy/BSMdnbAVwpQjeoC9ISJlJBbCxoxGd0AEsRUkecF0LpIuJvibm\n8dP2fZlSLd2ayYf6zdggPl+DTl+OlB7vBbU6buSN9Mww1itZopX43nZ+D8cd\nuCQXFMNxmAxoMK4hWgeKynS2uNvzcmWJJJaTaB4+tb+r0Qv8e8MRo3ZTqgCj\nv/Xz\r\n=WRjq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1yf+cRFDuWWFQHdSnwVn/lmR/jn65X5KUH5mueAGlBAiEA+WHYdxH318Zh0IrWR/O1UExn9bxPrAOtXEUASPb9EsU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.dc26c709.0_1591388478280_0.47607641077103846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.b9baf6db.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-icon-button":"0.16.0-canary.b9baf6db.0","@material/mwc-ripple":"0.16.0-canary.b9baf6db.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Rx8WX6/qF63pKwUawvzgg/agibcQ9KwDM12ahV7QcyfegVi4c7tauWLAfdxZCk9EDtKjtpFk5qirveSgNozy9Q==","shasum":"5e3d173ed2dd6feda2de656fa7ad4bb550cf99f2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.b9baf6db.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmSCRA9TVsSAnZWagAAkqQP/1XaA0j3itx9FqSUWP2P\nMimL9iYiAoeEU61sAK0KhqsDRXKNQVt/BSMUB3hPCesJQDFqwPwxc1v5tTOX\nVswVUxfAir0fieXDiVM5reDJpQfUExovRQf7uHKHPsxd7NTD9YJ9zRvSO07t\nKBkQ9wzya/WSaFxUOPiLeowmhoRoYKVBjjBTER7wzp9ftJUpmjc+Uf+Thzdc\nlPp/FlTzjhH3PVE3S8rF19cRYQhV2JHPDeJI0bXV54BFlolCi/vSlk4Fk+jg\n8ERR3K4yACifJjZ8NE/wgPjdsgJEKY8jm8aZrlvp+U8XbeZl72kPnZlzOXag\nrQcwRwWN85cL7Yglwu53guc/o4DoUEiWpRgtu0ZKiiKWo9Oo6XJLwmACALS9\nqeB9Hyrjw/k8x3f8C2LQdYbvIrWGCT0N9UERGg7JHS2FeMasGkA1SgXdI0fb\nFOn+ffKCWS7MuHlev2LiYuLA8+Cz58qckEYZFLzQYmTskBrjVdvNdyhxMl1i\nAv1fQKcq1ldvhZO+Y4MWzTWC0s99WW3C6l8BfBwZbzlOAvl2SzeLunl3MvCp\nhONtFJv6d15Cw/uOieO9k2/IqLnlfSwootPs3Ss6l5xcMe59V7lEivSf7acj\nKdvXL0buEIoXIY6hy9ZH7AN1dKquX0earMBsSF4wEhs8PybUIqJAr/kPIzfp\nlvla\r\n=1ehq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9QSZf+PEr+LQB9B4Lq3aEsbW0dI9VQgz9nHJmZMahNAIhAPB1M+nXOq7D4wE8C3vZLr0RVT5mNdAaw/nIlnNEovX5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.b9baf6db.0_1591388562395_0.5383026236020974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-icon-button":"0.16.0-canary.e0b8c9d0.0","@material/mwc-ripple":"0.16.0-canary.e0b8c9d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0qnWMIjytSHoanJVWUoorj0PS7q1/o9Mv6kfohKr29MZ1HkXDfGZWyeehioncMkEGXvBqp7669dSBwS4cwa06Q==","shasum":"33c82b4e74eaeceade905ad600f70c900810c048","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+pCRA9TVsSAnZWagAAXUoP/1IXXTf8oiEvQuSJiI/N\nh7ik8XZ+pOYxRFbTI/5qi5+UdCitYVv2nCJxGEZmopQkrnXl9PmzvLRF7K6f\nPXFF9s/Gqiw0VwVhtr0BgAZuv3D15byn8Y5llANgsVjwQhjxv4jV5xOVRG6v\nc4oNun8Yt+WVT0iHobNiuZfni/MI4h5wUy2QlsOGxw4DjePQzwCLTloAXMd6\n32lEh0XnnLBS8OUJ2oQS7BKsNXVAIwgn0z9VCDvsUsiqadMu3EprqkK3ZYV6\nEE7ytOObSbK4kYOTCreeQuUadju+MPFkVlNjEM1xilb/JqCJMTV4aaVGUW2M\nMNDDt4iSf9PxJg5h9WW56x5mXGoSTLylv/FUGjUdvukNKOcCnhw5DFxzOfSD\n3jOdfZvTtIuSJT+YhThyC4BY41CiFztgoZoEg6rfPY6VML1tT9IOMKSurJYV\nsGabTC4VahVQamTmmvqv+mNV2JyN28IgCHWK+wtdtN2YSxZKdzF7LIxudtx1\n6PAtvQvvlnkQE8ApgvnJkWr9Of9DnT6/Rgu1CZ0KAOzZPIZrWCRPsUyxtzr/\n5mGgl3ajOZ70qf4by3CGtgpeoIMulCEwmDGDAGTxKLqJjnyAnMCwCh+SqUnG\nOx/J2k7dYAZR4YXgQtSbDVFjCL+by9v8nP5dgtcDg3K6FMXz8OBpIX4FDPLi\nmvSl\r\n=X9Cd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDg0W1iS2HFJe/XpyfRGgdG8pSHHzbMqNiaosBYi5QuAiB9P2krv5PH5uhc5Gx+qorkijEuCLR2xWMdN6EVYCbKrQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.e0b8c9d0.0_1591398313385_0.8981753814467939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.51552859.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-icon-button":"0.16.0-canary.51552859.0","@material/mwc-ripple":"0.16.0-canary.51552859.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AYrK2qf2qDnS1B8SiqNxiGQkHR/eurVkgZc9TJqGrW5bd/6c3xTqAV9wI2pwQ8HQYjLVOqF6j28AQtWz/EC48w==","shasum":"6811d960df87da3604edf54119ba2fff04915ee0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.51552859.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CR9CRA9TVsSAnZWagAA34sP/i/27QZmuTRos86SbESt\n8kd7AL38HKU0aOudUki2KMDxp7S+YDzmeDl6AotGGIWAM5Rtq9XLDJGvkc1t\ndd7y4Cyl/ewLCMMrfnlUNHf8Ety85ZKiJUh143+VMZnIJLgvdWhHHkaKsY5e\nmMm4Ua0xG6yj/A3gHqSRunplJ4wN7xe6uQV1OspTQN0JFRaqHborUQVRSHyV\n4VoA3PO89+gcML+l/yJvtxBjfD2X6ZyPtnUohnA6MYiEiFkseZy6rtTGBay5\nhFrzE847VXvbhCEjGaCIdAa8cOz0BKR1By1C8yFPkEGxs7izN0/r/81OKwjU\n/wRgLanegBwgFIzpOnaMb3MwL4Y2F+5hrMPbd+rlmDGolqaia7W1nvoUXuNO\nI4SN24ffKuRkaJDlFyDEV+IkTUfx1vMe+VO1SoyvmyB0QZl68GgzItAacW3v\n99TcQZ6fqWLvBYnPICEs35oNv8y1ziEZ/3XT7sbVZfE+s/Q9nDoPIUgNAlPM\n4f07iAdF5ELnFAy+SK/kAD6hYwaMb9l/V0GHSjIZVzqUuYl7yo703gHNZT8r\ny1QxXLtx1LeOwMAZYBr8BlATmzUhSHW7NifgKXCzU02HJf74u/tqM+6FksFp\ndtuGhswc7KblbKP02hP4vC7dSM/wVz3+ilJAunqXCCDVSWVNVqrE/Z0UrT8g\nTYk0\r\n=tHE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcRTmbblo4YTZNFbLbF+NukOD2gOHQzfuS1gkdmZpMBAiBgpX5vzrbKPD4TkrMQirqKQYEHorAIjAigukitR/ILsA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.51552859.0_1591747709313_0.8588480071271745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.2e269285.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-icon-button":"0.16.0-canary.2e269285.0","@material/mwc-ripple":"0.16.0-canary.2e269285.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DnDPTNY/KgQ19fYL7RjSBJch8ULnMeVAc0q2OdJ7TT7IzdKuCj5naL9qAwElX5oGR1mDOUyp9w3cjYS8YU/RQw==","shasum":"8540c1a02f69cf8d1d9fef5bb447deac75804085","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.2e269285.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DkBCRA9TVsSAnZWagAA/dcP/iKMUZH5CeK/znsRi7aF\nXMMnbCA3Ir4+krbYOzlJ5ftOAplVBMpvoOBkQPLDUOtqhylJ1gQuF4WZnl0l\nHBMdukToX3WrzD3o+FHX6PD1vTYuVcutCDvQj6KEsqM6wBz2RzqASp1SQzkU\nxgNNGk99k3Mo3a5UO/wDE9ziGDJvQ4t2FsrtfYfBWos4trat49d+latevdE4\n5hpPuolPHiXfO9j7Ltj1cWQNAXiv6HIjdoS4hKrTN5yblLUi4hqVC1w7ju+F\nq44FmqwxawIkfd/Gj4seIE8Eqp8BzWH0uRkskEKqkdRo2w0WKuM2twHDf16Y\nI1vGeiic4A7PgucBdkx4CEB/m20Zwl89WIW75h5pjeU6c2GIt3icUIDsAv89\n+tEdMbOc+l64r/9heeGync0uZEo0J1r+yPG0LLk7yIy37dCJQphDimRunzU9\nt9t5aOgBmCbddKyefqhQOrztxjgbRAWhN2hI+rkXQcd1qo0hhOVQOYo1Rulr\npZQyv3c7QrRpSpWP7GR8lbT5ne6mM/izHN0FkAltWY4ER5Wxyh/x+WmiJ5JM\ntkjJxk9OCcFaHtIVlyrskLiDFS8vpY2/jJSdWz+4VjQP5Ka9o/kWJqaRkJcZ\ncq7DVlgdvI01dhc9tVM+IstMbw5T9DP7XR/fH6PmImBuYyfyXNTBNxcNLkau\nBF4p\r\n=iIaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+1FqHCr2mQ/3fywqeBcfUTZKAHm0m28PyH3TFtiaKkgIhAMdxQ5FB0CTBGdrbjWnN6JBuAs6quxXPQgoYAVKmQjj1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.2e269285.0_1591752961312_0.17985204539334987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.be138b01.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-icon-button":"0.16.0-canary.be138b01.0","@material/mwc-ripple":"0.16.0-canary.be138b01.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-j6Q0u0JrdgVGjZUpTpYVGZOdnPu8mFtzKWaOaJFXZQUm2AkFrlENbkWM/o9WRjPm7nF9W5IFAzPDdMLXbIlT+w==","shasum":"290f5da71e469046bd50bb21acf9ba485aa8dc8d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.be138b01.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdbCRA9TVsSAnZWagAAqnQQAJh7v4qM9/cbxozIeQ8q\nzg4D9h63I6I9KbkALgPqHoR2QQtLOB/fm8rLltG4ZWFQ6Eiaru/KgIwgLY/0\n2ZtOpFdYcsoDhuGdDHmfeua6keixlIrHNT+9Wt2HhnaUfdd1P9Z7AKJpM6n1\nnCOzHVaT6tMoMfoW8Dgo8lmqubD8vQ1/koPUBFPdvrdCi1Kmww4ffNGGhs3A\nHbbBDn10L9TFxm14L1BnIj/BZfljfgPe/MIhbbHgBgDFvFM19tso8EsztZYi\nWXGW0BFcG4AIjNJIc7nI6VIv7NctGA1IFl6Tpg/c2IbdjTPFjPUY0XBee71r\n6XiYilfOIfPIGr39k9kS/nRPbbtIuZgM4WuZeDn+SabKr6FSPo/45lOnydvt\noWmxNjuZeKgo4D4FLdCkKZTFfBQD5ml4F7ndHLgw4hXv93qesYz2N93I3ld4\n8z6Y5529ys2t8IFX623ikQIiZJ6N5DY6s5mGD/x8ZfQNCLxG21cTXjPe221o\nEEJeAAvDOnOFTB1RJkKxrP/iVXkqNXcOTsdPTR926+Kjxx51FoI/xT2pONsl\nR+phXV3mJlnCiZ+9obwuvRTvMhIllPvkVlMWNM0CEkzGRL8/xrE+0ZhueheO\nnzIb1SbAOEHPHmyBv38nOjNNe9D6/dOFBPCnnURnEEEnEyyxuGkW49Rv5GnZ\nrAyq\r\n=NWYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkuVJWkny9Ff55qDm+4oUnSpaMQh3Ckbs6ptrf1iwPwgIhAKuyKcBiZ9LGWHkiZpNkkP0CuCRfcx+A8O42Zs/TWIR/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.be138b01.0_1591822168277_0.5177950225171208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.04bccf5a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-icon-button":"0.16.0-canary.04bccf5a.0","@material/mwc-ripple":"0.16.0-canary.04bccf5a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-S39g2vBku3ItVVFa6TXkqUcCXXiVFj5CiCDjA6grvHO+h4DfwTdNspjd9dx0bmgNlH3Dsm7c85/v6SmHDGjNvw==","shasum":"4dd54815bf9e663235338d240ebe6391cc483f83","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.04bccf5a.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BlaCRA9TVsSAnZWagAAlnoP/jo/upx1c3TcKDy+Qfft\nbW1IXUAR5zhMvEGjxRCFymFjaT5jXXpBS28FXT67HUx6axujzJHDR9HwOBb6\n94l1vkuLTbOvHKUg+cLrCNb43F09NLTZ8VxVaZ5jW3AHKI0afJAhZKdfTB8l\nfSFP277OMfcSneMDvvn/x4aBHOJp3RwnYg8oENmeNENnD8y54O4ygKppzxJ4\nK56RqWcK7UtOhUoNFEOFfb+FZiyapKE+nwDIEtEtGTFiLNBPkiR3karONXkC\nUEF795aN8mgNafpxlNY/s1zx0Zt8jL+J9AWlNvq/WJ+fXG5CzfdJT9Z7ul4h\n0afFfEW6i+wbkPAeLk82up9/EbJLDKSsn2Xy6qiOkS2RSc97SfAeYBMFwDpR\nh9deIo/b3PW2TFs3p9AkL4Cqv6O0ofEEaY8TKZwiw1FNxgTFDNaPUgFHConY\n1jggbKgqb0ZZvf8Zp7Cj5bGgOXFx8TCZSj3GCpu8Y95YO8R/LtLrPfxrCS3B\ngNMtSW+7Z3vwwCLc/qP/pDzEo71jPtL+cK8otlp5NqM6xUWMf3skqit1j49L\n1CwgK5zs85n9rbINyL3GG+ZDO/e3AERgSgtu/G/F7pxxQ89OslrenfHQsun2\n2CHh9WNy+fNySeaR3uTBONBu5yqreeKzOcTAr+oFvYTEPEJLqMgX2+jcvA8k\nWpFu\r\n=ilbq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9MGsE5eCF1aN5WA0P85aUoAWYhxOChUu6XvuU16oacAiABbMpBsO8IwlW67JYyey2a4p5qCLMxLWunYNFkqIOduA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.04bccf5a.0_1592269146192_0.9786802407267872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.b44dea36.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-icon-button":"0.16.0-canary.b44dea36.0","@material/mwc-ripple":"0.16.0-canary.b44dea36.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-R6JpbI8PP2f+gn4rgvJqsmCvHevR0XDspAlBX60EYtY9zsEAgYA41xtWzLYpOp0c5GZde488rs7Gk7wiI3FUZA==","shasum":"2dd4b0c937d154386bdd6fc3370ea4b4beb89643","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.b44dea36.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJiCRA9TVsSAnZWagAASRgP/1oLrr4DcqqY5oF0X+wu\n1WHO0Jew/qozmP2IGtipgypPfdJfh1juFwl5X4JYK9NVpEujxBfwUsG5ZHX4\nnKgDf4/S8PBhR5tFVmn/q04o5JKb2R5FVIs+Yk9PKG5BcD1yg+lcdUkKZJTt\nyjMA2aszngE/cwUbRORwOFfGZ1LFsSslZoKCplGIufsDmj33kqLgBh0AopNH\nRcC/VnbfhlaWAjfCKHUQTRtBb/N2n4UhL3WRg/F0Oj2pKg33zGDULtaC+S6c\nmQp957ZkeE6GHCrWGJXLAe2SRxkPp2wHoFxhaO7nGgbaWRSIrz7fCoTehAI0\nP3qJtyud80Kaw66KYxUR0IgnFBZFU8DCiTskeEipzL0bV/YWR1DmO/Z+V6fN\nLdvRhorXiNvGaHsoyXoAX51uViqsrhFid0MUj00INIAret2BiYnav1jz2BFv\nCFyaLqkhfreSR4/ZLBKC9zEAVxJpzdtAtaZluVoYv5S9LUApKuq9Me9xUnNa\nPYygxkOUrZWg+fZkqiH8Cd7w2akJimH018cUrVoht/ZD2WzKn8Wpl2fCJujx\nCd5J7DXgg43zPVmabxTHfp5DpQsqvUR1Iot/qhlXKKLWFA6MW/mh2kB1J2Yj\n+J/YoJPn66JSnZxiU3yTE/ftPjPV/SV/OK3WIRAJXIeH+ZoV9X2+PWkTIdhh\nqNF1\r\n=4K4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjkCu7vexeXIVpbaW5T4uNAjs4geaTmnQCU5Np7ZoyMAiBhwgCVZPGzLMMuKBz/03ZvTWYNZUQLILRMlFJNMSw9Eg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.b44dea36.0_1592341090270_0.9700684219925899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.e2577e87.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-icon-button":"0.16.0-canary.e2577e87.0","@material/mwc-ripple":"0.16.0-canary.e2577e87.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2YxwuR/uFsZXOOW//DoLUgDSdZvnYrMz7NPY8PcOzgXg26XHHVkl4n+fO/80PqSDq/4dtNPb0DaaAQlhH3wgFA==","shasum":"11f7979f31bbe08aff06bcae74edaa8251106f7f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.e2577e87.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTpCRA9TVsSAnZWagAAH9sP+QDq+dsfjqDWWs8BkJHf\n3f9xWQiOCT+0298AIpPWTOR4uPz21tJUmLZsfaF3npArTuDzk9ixzhQdsJ1G\nySTHV3qJJyhYbGb2eOYGh0WDSV5UyiH8qO//Gu6dFPclxMi0rXWrYNTt0zRJ\nmVU6D8UGwVtZ8UToVgYN/zIZv6+UJOcP/nfDzI7PSuF+YCXDGFMjNCVXbvyt\nUF4Gr1CZMyt3eSwO0I2XbXuY52bb9z1IwkKFZn8EB+3GKnJUat6BTLEQUEA6\no3lwPxskwoFYoDznBJ2Et61a99YgQubBUY+x/OvnoW4bbbMXISiUVLRPZ/JN\npE7jnEDuYjOFyca/aHsmn7AtKcpaOKFowKg8o+3OABWFNqFRk3J09Ya8Sqn0\njOrDY7qr3PY2aLCs9yKlt5oi5XGmTV8TzAR+zC5O12BA223bMS+h3PIS8Abj\npoHXxrXKjNGyfo7X0GCkhPnneM6YIZ+87Hr9hc4hbWTsqE7PkD7GKhK4DzAM\nWubC59VYDfkUi0wdq29JkhJ45L0uU4kJdVaqNdNGs3DxX+5ZxBQvM4AIqqIy\nRB5inJoZsq0OxAjplL2zA71/qH6MDLZsYgoRhOH1DQkxa6jcf6hMBApqHefa\nw4w9iGFhEXupJdoYP3CH1jhD0MXFsAkzeLTsxQtTeWG1JwLh4ou3+VUTC1Qh\nRs68\r\n=TLKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGD4H1ECRqGpeXbP35KVY/pBM/aKPqApCIYpozyy59WtAiEAke/RIH9ybEpLP2DU+DnkDPFQMbXs2W9XVBUT/QQMxLw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.e2577e87.0_1592341737481_0.7149887739215706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.58b73343.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-icon-button":"0.16.0-canary.58b73343.0","@material/mwc-ripple":"0.16.0-canary.58b73343.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MjxOqX8YO42lUq/HZWImQ/bJTWh0njDBt+1E/DzDD9FWv/g4Dh9MhXlF/QXYWsjbLN+nd7KCGOevDLZGDBvAsg==","shasum":"f63a8203f6f8f01cfccd75fd671ecf805b7a7288","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.58b73343.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThwCRA9TVsSAnZWagAAtIgP+waTKs7+4v8GLXwCTzyX\nrXupfYhiLyg1zJwaY8HHzVmHU54fTQVFkdkrz7A2q9ctT1DkZPcf1ngacxTa\nr+hT0I0ZafkKYTlYpNatoY7k3nqU3JJOP04G+Elmj2vAPez4siwh7Smkf+dl\nJ3Z4tF6HOcGLvoTIig4zqo9yIBRnnn6KNY1EX2JWtjZqO0pIg1Dw4OP8S3rk\nzcGw35dQmwtkC75YG63TdaQbqNHeH6LHy5BO+8jfxOcH8T1jO74Cbp0lS8Ap\nm/t6f2tuPbTA4ApT1oPJfJAspk46KZbiY/Drm9giln4RCKZxFSyYjZRGiDuZ\nDB992XzVYAWLYzbTQIKvzfVMnu3pwRtPd2nMLQmq0xWIs9iXuV6ksqmgj41m\nK+KP9dc239oAtzCVA17IfwI/9rinfFxkEqsx12Ewj2bWJmkJI+FBDLriSwgV\nKzW7G+n7l/YjvQIXkZIzMAM744NR9TJNbIfBL8gzsZs1Js2lIyXWJGeETxjF\nVnCaECN6Qs6KpEpMKYKh67swcoRgCAUubF0MWhlhxk/LeVzYjNqgcyJnEnpH\nyA2F1kNYzjLHrCHdneBE0y11ZD2Ky80HJ5ZQLT+Tn++uJmeg9vJSD9Mj6izF\nqe3Rz8SjTlDbJfPivptTTt+enKZxT9s80Ysk8zT21xCuAB72iK/U5106Uuis\nwh4j\r\n=jXkL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvzV3DxeUA+mZpcgze9Fxkk0txmFEqvwVDpkJA6F91bgIhALq4ytL3MRncLLrEsCOo8zIz+3EYRdbYegf5xwyjQQOX"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.58b73343.0_1592342639526_0.09913654578307818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.f155c058.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-icon-button":"0.16.0-canary.f155c058.0","@material/mwc-ripple":"0.16.0-canary.f155c058.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kElmcMTazZkvI002Lr7hw6HCcps6Zo2nmv42CBtsEcyBKI1OnJuX6YYadlfHc1O12X1ReQTHK6+ZaGbOzzvJxw==","shasum":"ee8350991a9d29292f58bf268d5da7f88efd8de5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.f155c058.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662ICRA9TVsSAnZWagAASMQQAKBNwsnAmkW1qRM/FGye\n9za1Xq87bBYklS3XDbCPPh32LrhiexJjowQAhdriQgFAqqjYXf9mr2paOEir\nTbCYjhzBNZJcfmlD9JbFRKOtWD2krEpMwjpGAiosBYN/Gk2tWISJz/Ws5J2d\nipstfFs4iFRaQFso8QKTAKRP6Nh+QWg6VmByvxXRp2mnKBVLewRvcDi0SaTC\nlCOOrxY2JTqySaNjk2TBJHlntOvRmUqibZsZjkTK3FY69C7610aJ3lGMHEyD\n0kKoDBIOtq2VShf7lhDUKVdj9yINVW+N70TB8o59xe/pauLeG98IzBoJMgIa\nIZVAE+Kn2fsV/Vw7FS2zeR1i0BDu9gDsBVEKcu4GC2wb7tLBvYU2s2E8x1/W\nGdvVtFiSntsUZUEc4Jv2yGA5MXf4CmOin32pF9dGzdt+5VrOyuPmNI1Bf76+\nJIIvOTAcQ648tE0xnWaPEziO2Z4z02DqJGEz8JMk/L5WaKGCmPsYMWo8nMpo\nqU0iqojOMPebnHjM8HB4Rah5s1LcmTGfLmynsgHv9/ca2c3NTSGFXKxlS0w0\n1vBFus/+ZDTRbR/yQ/MUVPToOcA5R4BbK1tq4g6WKCDMfKV0vE6+RvF7TfPd\nrzI1zkBqudeOxYYiay1UGhXm4XTuxErg7akZbFUGjcdUGsHisFQW2J8AYRfS\ner0n\r\n=1o6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCy0PDZ8kHd+tHKt0lyx5Zvt6P7WwWGY3tsdo0EihDPBAIhAIaHPu8aPPs4f9xC36je81XBET6JznH9D2Mem0uiKur6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.f155c058.0_1592503688156_0.32191907428569855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.309779d2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-icon-button":"0.16.0-canary.309779d2.0","@material/mwc-ripple":"0.16.0-canary.309779d2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/gr0gEL6ZGxYDECvus1pLQ1+9IcOfLRezPcDw8OfOR9UQsNLWtKm0LI4YnYxp9jNpSozZCqUwysGHM4xDzNvLg==","shasum":"3ae68ba327e187c0a1ef9a9cd21e34f6001c34ed","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.309779d2.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6//BCRA9TVsSAnZWagAARJYP/AhzMda8kNM04vggBP/9\n8Wtf/zAH2Wm3tCYjokxt4h+blhEuD91tZ4sQkrOeCu5jJVq+06+/FBnyGUgG\nKwNx87XhETmYqYhaOXJ+2CnR0FENLRvL7lkr/jMbylx1VaqdVEyjy90tmh28\nq1xuDl8G/6jaTERluka6ajRJEE8BVUtRqqMKl12Ao0RR/2efRTvkN37fP9tb\nK3i4sctbOdPWDQMAH4orMiz3Fbjd8O5+C9M0esyZe7mHWWc/Rl16/duwlH9N\nWSjW20yKSAug6NwGwaxH/6hULK72jBtsBTlyBvnhTYWKtq+gGl0KhWLsOe0f\n0O9ZOUCVszmtQlMO2yWgHXeIthQXdj6/v7Qp939lglyNjBCjwqNqCw4Xp4Ga\n2Qo235ZZf5bnnlDlvMnlDvvWJMtu1eDYjxDoaldtaRtw2nJSGIdxrMuu5QGQ\nFgVYVsKS5mQ0HAv7MryN40yAOkqg1FXzCSNVR9KwSZj0NBluHEg9QmQYiWZC\nwM8TRRX9q39mBT8QhXDwtUEB+xyHs3Egx/FkJso/LYl5q+r9MoftVXMu6Yrc\nQ4GlTYbyEC+nAUF5gXpoI3qWMPvbaAivW1tjcqsYS5q/X5BpG+nU00eEyG4c\nSNw3Udph8kEC+QzK1DsJhFFJF0gQ8L0qmM236tGYSH/pPg17XsXT8pHrDiID\nROi4\r\n=cqZZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEN/fj/Gn/+0br3yrniTskJ/Tsd/YSsUYWZglilkxfvwAiEAo+vsgXMgX6djcTtqygqLWooTbsJt7EKv1DBHLfyGIwU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.309779d2.0_1592524737123_0.7682523933346965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.e7649968.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-icon-button":"0.16.0-canary.e7649968.0","@material/mwc-ripple":"0.16.0-canary.e7649968.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-n2XlPpmG9h0tJa8wth5RsagesfmdZ/aGRezcsudkf6j9m7dtTiU4JzublZlNQlnclePq+8OLQEASEz+SNzrTBg==","shasum":"dfa44b334604276efac7531c9c855f925268bdac","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.e7649968.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDtCRA9TVsSAnZWagAAjIoQAJkPvYq2W0h7Ub5qhdzD\nUFfSsNFNkW7hHYY8lTOAgTp1ednH/v27nUI+phjPKwkc/DIi5GN03VzXdZhX\nY1htBtUbdQJzssErKNHTYuPHs/FuMiwv2OKVksCsosrwwBd28NivpJfLQYVC\nHfalsFv5+laYf/ZlP/rgejW1tGP0yjMbXoUwbgCnCNj5AuS5KhZhHdxq0ONY\nh+DCmOTLDz4ItcnaE3OsUjt6LPtPnKc2HQEYGjGyY3mt8K954EUoXZP5gtvY\ntXDscjgkdsahO5aTT44tyVWhdopNjrptg0LoLgvJk8vvAf4zCqGiivKyc5BT\nFOIBI2ooyHjZ4dg8v/t9gVNRtoeDN8SZV3l/+w2oJwKPjiImZe8VML9pKtg8\ndAISTVirxDjnZ+EoNrqj1RpPPXzeI0XiHVpB+TgEbYsLZJ3j9ZjszKnWMBBj\naJDF0x6jvenbcae/NExuoCzGSLWCjEEzaKteDvClpFD6cAx5uTPaPBx9hxKc\nfG+IA96oPmapEfa75eevuJJdpD0KXbaoGcRKBV7xrMTnbyfEK7+raoFnWV8p\nOTD2CGfZpO1xbJBlA5bbeKLSCe1gmgG6Fl2uO1AMLb4RwP6muQQY1Yh0B4Yz\ndoePPDrmDurtzw2eMnhSdliV4dEtLCQxTMAvjI0UlCzFLh+6vrlzzVvi6lNr\nPMqj\r\n=xtcj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7m/EfKt8raFamPD0vdyvvo8l3MSr+wjC76kZ1JVK91gIhALHImuUeg8Ts7A7JnYXXy5aWTzcf67dBoukP1hrlNU6+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.e7649968.0_1592602860727_0.7279933628047999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.8e21c78b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-icon-button":"0.16.0-canary.8e21c78b.0","@material/mwc-ripple":"0.16.0-canary.8e21c78b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-n+/DI9zwDx1Wky3f4FlSd0L7+Dazt7Y9QWQNvBXO5vDsM2mnQM4lFj9dAKIckvx8GVL2dJFkYVCDA0CL1hro0A==","shasum":"d67ed6d10c3a23c98d237c6e000d21ede70b0cf9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.8e21c78b.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8IoHCRA9TVsSAnZWagAAGTwP/R/R7EFClSvPCVXOB+tp\naRmP1+FtE4UvBuKnFF/7WeR0rnzjmhhHZ5xVAPppa/B80b8954HEDwHN2Ey8\nPPOCEZGqH9LP31rtcF/d58z1qbJvTm3oz0b/CDupfQ9o57KtOtKLUmksJonu\n0m0V2ZriBDB93KgwU9jtxCE65Go8Em48a5ufRU+A6XojkOVnU8eJcTWBkS/z\nrm+oV68YWSazLRa2gdv3ggrybK8oqUFXX03gTYRId30boho+KW6nsqmFAIGS\n7rlglJEc4bLFp7rsG7bmw+k8LmDs5vUB091wLXDzfgVexacrfTvsJyuTXadS\nNyc75/EcPe9+U0aZVs/wRAYbv2OQrQaZ8fYCkTQyDQBbptQhWPt16OsPWclj\nwgjX7rDzKI/YkNgHTS75mRfJCXiJWndQEJd6qcCfjzR6BtctLPJzoHD0KAEG\ngyD/WmG+tIHs2trxIODqLs1dpkZLbjV4yb25odfBVg3cOsKQxfHAXCD5v8IF\nccGn+a1hLGrLfCa110IKJhZcMCO8mLR0bDvkELapGNZT+rpqlF8WYOl5zx/o\n7bF/9tCSraSsh0Ip0h1FR/9kae93ZTQtVw0XFf42efL8O3uP3yeYhbYaZhi2\npHqv1P1q/zbxSmQdoehDf+jz+qOxiWae91xFAloq90YRJzUyQtB/8OAZryZO\nw6B8\r\n=fT+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy1W1EOCxZunIQo99PnF+28bDef7IEQrqmaLJJHipA4QIgB3HoV61L2t/69XB8caB/aU2bUva30qo49n7MVtv/5RQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.8e21c78b.0_1592822279015_0.3385283541589108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.6db76faf.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-icon-button":"0.16.0-canary.6db76faf.0","@material/mwc-ripple":"0.16.0-canary.6db76faf.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nnKvZaMHriFNham8oUjrNh03xJUb9/+cqvx2jPqqcrZYNsQWAXqg76Sq0ovG+uYof9n1Sg2/dcJ5EYWQUOTVjg==","shasum":"7a0db484d281dd3d4228cd6e3ca8856aba70884c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.6db76faf.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7dCRA9TVsSAnZWagAAVPwP/j0mk7mxkDvn1V+vuAPV\ng11ffi36Hf8bPaHq68D80sEH3JZZH0ctns4jq9i/pVGldmqjfk2h9xUe6r/T\nTEP2NyVM3tk6rXQsw6Ou21SOMy2vvVjp5BnNBOf4iXenZPfoItc+l+GZMfzB\n+CuomUu1wEr9p3qVm5XP+yfBat7RIFS9Fw9nHNSOpx+d7XvcT5lBVdWT/DEM\njTD27zYYlgaa+B8dJQX+0C3G/4MNTxQwucF2sm2obH7aFvJNJ9b7kPYEFbI9\nAhkPur2o6lcTZzu29pZYKdhvONP2Y/IzzCHBmUSMIeU60w5ksH9z8TVqlkEx\nY9TlNthgZ730wYA8dD0m4J1IUsrv4pZ5CuZgacRHNJg+InLmn5K3/BrDXYMg\nEUAcHszRMOBDzCc7h7q7is6fixtVWa6atHJb198AkhYOVB7aLWJRXohu+df4\nS3V2uoEDiwq3VpFQUTecXaRVF0bolXf3AlDLs1Ob3WXEZEOiVi0TfRI1446+\ne2XOtDqeZzsko+S32AtUWtZX8qsf0mgN/8EjxqPUGtoxiVLpJN971KgibpPf\nCwNJXYVr0SKvZgPAwOPbCvpTIKk/K+7KNnIhPTvVeQZLuXHQFpHMxUaoFdx4\niiiXnrMys12Nf8xSEXH5BBtMsattWRB7RqNnbsub5sIYLSALjMUT8m8JV3cm\nqNFz\r\n=aYt4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvdZSxK8/4+Kmevy3VwtIwFjI5ZP9uN2haEwynCUwDzAiEAvr3c/MzgbUc2LaIAH/4wjXIeB2mcDrsrOWyT65t7mD8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.6db76faf.0_1592860380803_0.6015599584530125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.c4dd9684.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-icon-button":"0.16.0-canary.c4dd9684.0","@material/mwc-ripple":"0.16.0-canary.c4dd9684.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Susy9jNwkG7kcKIQzo3ozK/86Bi5ZrSCycP6Fs/FEFLZYR0sH7VidILcaFymdOw6Lk5sCVzm1QU2AP+NvIuyPw==","shasum":"b8721be27ed9cb3fd5889a1f49e0f10875946275","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.c4dd9684.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hyNCRA9TVsSAnZWagAAHLMP+wc/lTURFmzZNOtJGnin\nrdcq2K+1qON4063fe24OO/Eb9Ox8NuN4GqArIgIOmAiWA2YeNy8Ja0rFdCvc\n6cuoU35370pzBF4dXJlSLs4N+36EsdMtHOdh8/B+J1JJVbTJRLwkB/h42U7D\nvXjoTI3cKJj/mJMwd2EF3sxHoPRmtVR92BEEKfoqb2a12O530lDjlN/Z5nEd\nD7BT6Xk58fuEUY7DUz83+pMVzOwaZa7Xbr/pW2sMv8BG/Kvj6p81MorgNbrt\nkkq53nyCjcDgkEIELIi1leyaJ8Dojq4mKnJfVCjV+gi0I65KiT/jGn+leAeB\nltEAcmtgTbRCeFGiDZjuQDijMN+YKqFHd48hKSZsHxifJNTVsqZuM66YbkDx\nEkACOjD8mxAD1C8hWY1oP0S78gtNYvQLKKT4lRffJKRTewn5WnlKiMW4/jbt\nhu7OnJeT70a4wR6IujbDf2QYc6UqFr6VhXxcvuLRC+5MDJl6rZPNhC7ILBFw\nilctHp3wYsSFHAMTA7JQUSHo2ht2s0pqSxpvIG4TSQlLCZiIaRp0moC3LMCK\nhOuP35zdygA5SVgOOK4Ed8cDHocWRYpDGe5m9ShTTrgAxqj7gvl+vFMFyS9+\nTjKhcRNSjgiCTCVQFWeOm3YeCkyfL5Gnd2XwDl/OZWp+gHMTgDtxAXEqaurY\nG2E8\r\n=ZVeO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8ukgsCMW71nvxEuqGmJagnzw6JwJ1CuzPxpKFgdYZFAiEAoyRg9q0l2Ma9gAoLUNyNjdL+YuvgA75lk3gxwCPvcHw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.c4dd9684.0_1592925325392_0.03069457280778609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.b3e53981.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-icon-button":"0.16.0-canary.b3e53981.0","@material/mwc-ripple":"0.16.0-canary.b3e53981.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-57cmXegWP6XKMlB+fcax+B8Y6qkY1KMPKNv6w46yB18ang2sC/rV4ojnywnvKedyL11N3B7+TR6Z7If+DxXAHw==","shasum":"32007128b6a82d6a91ac4cb537cda5d480384a56","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.b3e53981.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qDHCRA9TVsSAnZWagAAkHsQAIJn3Rhh/1LhY50+glD3\nOwA7t2R5DJ6Uxd+wjE/McTxqay4KW0XCJ4g+wwnnsUOsr/fQn2Se9UyqXYgB\nv/h/vNDYZ8iSsxeJxHyHV9jbJL/rQ43fmjYo9HKU4nSUOGqcZsj7YSnw+vN2\ndgt/k94cLj8pf/JVs0iRdrWgA91KoQ3Fmz+xE80TvJFTtWqUL1heIfbnyx0B\nz2AMmXqSbwoolp8Qb3Zp1XrgSIoG1FzqdIJhh7xuNiqIz6k6vPBaUegt6NZu\nUXnMVO+I8oK3YXgzKMSWj2clrpaiR7TAwm8UeLbz2HRt7DuH1i9Xv58NOVW4\n+LE+HeSZh2lujdkgpUHiKSucIQmc2x2G7Ucm1UsFonSC8y2C9AirTihwajH/\niSO3puG0QGPCbtLbNRcBYKlftNOF8BPPKW/ct+oFKx8ZI1bN5VxVXTaGAZuE\n1S1/rSswDRP7sI0Ju6MbOJXcw854U/EagbySX3d+vkTZMBiW7mjRvlOZrSW7\nUNLtM7TBxLkx13rXznsAXjRMuECMD4b4V1vJrKGwAnVRZVshEXMSiZ0hPTQX\nGeOUWUwCJ1QnjXhMAiOj7w33ryRmOaLj7OQlcnSdwv41ekpMinFuBquUhvjo\nyiQAPEvpGSLSr3S4udbIk5htQgwljIDiUSKuPZfzZbBj5p5y9uv8sRfz27W4\n4BaT\r\n=1cJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoGSEc99Ue3icTFz1JJkPys2H9HKZ7ASEdHbuodtrn1AiAdWSTO6fZ15IolpB1EAxerY8UNJUiKrOT7CaqNIIpK5Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.b3e53981.0_1592959174948_0.731713181503798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.b9468f77.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-icon-button":"0.16.0-canary.b9468f77.0","@material/mwc-ripple":"0.16.0-canary.b9468f77.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Yi6SEbHIUckAHZ/QVOg7xw2Ke6SwShTL51vimqLUYbg+VTt9u22TcKLsfokDpKGCbsYSJcOrxoPBl4dO979Zeg==","shasum":"e8bbe524fcb6b503049752fea904506314051a8d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.b9468f77.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uhCRA9TVsSAnZWagAAcIkP/A2Deof2qhPWFq+BXHeo\nzicyYWFPNSA0BkphduOzKJydXcbLBpFSPpjQV6yb5mewTxo5mp3hfn/8ampk\nEr2jNDvb6b+vqimrF9TX/zWA4BBWWaO2YOtehJB7UpVhNwPanQHfZ2Df5NsH\nPxxCgNMMHt/cPX7ghpz5Vg8wj7ZvxqVVeg6JV3pahZ2HdbxqepPmyaau1A9l\nfyDCJp+WTLcBfGcKoW5dgWc1JY/ZR92WVsHOoWKFutKptWyLWqZg3L7yyjtA\nd3lo+qtFyw8pjE2GvxOkbPjSfRVk1d7PvuQ1qabKoZsv4PNRbtLuCJtogfMp\n94oqZFMHL4HhxMDLFKrAhRAxp4BmoNd3xvxg4VOxwaTmJvK9Mcv3981p2r/m\nCm2VBtgprTUctLwAsspsodh6dtV5YVyoJdiJCIYPDL2cOj3Pg9EQxJWkFisV\nrEWbNa7rUe3yTQwfx69uPqRXcEENumByES9cXZOGx4KcpUzXutOkrij9QIB9\nJyNRqtRLMo0qsAa7E02C3RHzS5FQnaGuC/jnnQ/7/r4oBfWw07GLYB+TpvuT\n6WobdzB7LA9pDLY7d8lI57BlMzAwlG9wyaXWrU+8Bs1PhlJNWsyfTJna4iQQ\nVDs1YAXmccAMCrvl5CP+UsS3KnqlD1wXthVfUGoo1sOmzShQrGF69Hi9xRio\nR3xM\r\n=sjd+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCACWTMKo45kgCcMMEVph7EdnVTlLgHx0TSSYk/cs6DXAIhAMfARUsey0hJc9kFEcfCNoKILrzE/z9KjZN/TIZIGXlk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.b9468f77.0_1593035680584_0.7446745308598026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.eb790e49.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-icon-button":"0.16.0-canary.eb790e49.0","@material/mwc-ripple":"0.16.0-canary.eb790e49.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+HMzgwbIvy9Y1+Z0o3ZEfEM8sUZl9JRZuNK1JHWSmBOZ8o0vvdUiIhc2/UEZwPyPTN7yZ6kfA1IWPGfbIvhr0g==","shasum":"95c08e7b873a6c7b67f95d3bd2ded43c793bddaf","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.eb790e49.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTTCRA9TVsSAnZWagAA8+MP/2Z4YKfMdWisETLc8RJq\nhgcpuL69wf9kNACjVsYuYaZm/ft6Yw8H6AR/Bl+H8eVJf7BhFe77H592ioKS\n+CJa0RnR5i65mnlgy3/2M8IVgP/86R3Fzo0DO/y2wmj8/v+fHlgUM4Fx2BBC\ncEuctKcdOEdQbYyajdjcSl1nyti2moEHjoHOFdkUDHNV3ML7xA1NCC2mMzFj\nICjj3vUNCCFCwambdnIaL2xMYmIVTmvvW8Ckb/z0z+8gktNxewbQGBAj87R/\nQ75LtvdvLlylq8fbBKdaylytUGboRbdhf0docgeoPdyIcsdKatmuXhx7BKnW\nyTh+ygHaS4YpkEEeiEY17EyckZ8X4AVkcVbSlSg/CgX/3LYEHBUlpUut+jrh\nsTd7bd01apnGvQHEtr/RE9S1oX+Dm0uNJI8bqF97vWXD8jk3mTBF5daJIVLV\ny2fOjUzQs9elFd+RiXlMZvXG8rro7LfZn2Aeb48AWPjx/+l6eJQU/kPyXrEj\nMXWTj3i+FbAxCmOw7b84RVrpAA3UTPfsc8IFAJul5oLDLKMsnzOpOVZk5p1K\nXj6FKhZKnjDMbroo2ZuLLtBw6CiQO2k/0PbzHaI1Z5UrGrLjCDFFNC8GpNnv\noocnBmgz5MUe64/x7rLWNDRZzoQxRHqL9wOfM2iF66YG/307E4R4RU8k05nb\nV2Dq\r\n=0Yq1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj4agwldOdcJtuFxHynEQW/T8t0fKmNshDt9nC7WWc/wIhAP1+rkvi6HwyX5cOLZ0zmwkHAS+RZxzj6G4p5tbj7kWR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.eb790e49.0_1593119955268_0.7854679976143366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-icon-button":"0.16.0-canary.9aa1a5c5.0","@material/mwc-ripple":"0.16.0-canary.9aa1a5c5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BdX2avseHXMfzC9LrQXbjqPoVsbRFfsV4bzXIASGScF5SI1wm1FoDGs7KFfK6Kw5vldGeeF+XpUF7TCca92HSw==","shasum":"4651bf607d039e8a3a8417d05ab1f8a6afe25121","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irdCRA9TVsSAnZWagAAqeYP+wSPuAPrBeRXjlAX+NeC\nRTZlt4PeTvkjt9biG5vgxkJXo/8qeRnJztTkwrVO4arNKLVO3VtvyM+TZMru\nRf3x/YQ/2Dh6Lj5Kufp+I3BZ9n1lg531UWhxyYNkqmSnY4QviwHrJ71OAv00\nxjBOf7ZcPqq7cj31tWCe1/FoC+0/m7WJa/VXhC7tQzSvRHVdzkZGke6lW/1q\nNf2PUccbmf98HjZ1G3j/ByfPYUDZoo1s5sOBcflW8mpGlHCpkdSgAKq4pDlf\nWjJUSlBWptEGyiVrvSbc4zgVmsFYqrtrFv7i55PASJXHJeJb03fRksOzy4rf\n95/d+TIRzjZrIo2CEE2J7pv9TC1pTDmQYQqsiRM7QQ5DBqpp0TDkftazUIjx\nXPlt/Qpe6LAUt6NNoWMr1rUzg3R+1bXhUvO0LDSjzpnDI8v5gmDx/+/RlKdj\nN3cFsfzbTUyvQDh9x7wIs14V1384KfL9l+PaFIrhMpPIh4dM/877Lm4xZ07N\n4yVYsMzN4uiWImYLrAgXYpMY7D2sZwHnuqEjCUf1LgwcrRyRA2BtGIaEk/fs\nAK0AE/fDZBJT4N5rFxNFv60bJNdImqisKRYFf8RDwvs/Edtc2ChDolcfqp8S\nyx0JjMo8ImaKnQLbEPsbWjAxGM1UY+610b+37s/xiwsSRiIIZwQf8agNtR0v\n5U+a\r\n=A0cN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPkCREcJ9nGjxb85sf/OO3attVmaVLLVlu4ZkQmP9a5QIgCWBI9UvosvlIw8A21BK5FEK7fYhyGMybJxu4zSjewFg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.9aa1a5c5.0_1593191132665_0.12667868532318827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.d36e9861.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-icon-button":"0.16.0-canary.d36e9861.0","@material/mwc-ripple":"0.16.0-canary.d36e9861.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VQfGM6fpo11TiqKaCghH8wvj0Ri/ttWRx4SAzHKxzNL+rzBKVUyYq+Yci91rWnaMWIlMaNlplPXfWhkF5CA5OA==","shasum":"15987358ff4e5ffcfc88d4c388b6e035a6307bf1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.d36e9861.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jImCRA9TVsSAnZWagAAfAQP/ArJTpcIkhBMYrMcVt2e\nchHQCPAVm3BjU/PHDHJ7lhX6snY3skquClgd7NuTVpCFTrSQOtrUEjF6f1mi\n8J0cbZnrNhs2Ty2F0qwcw9NttBdqzRHmyvSR7NxUGjp6cNAYGImDu3oFL42y\nu127A0BaArGgy13RgCfuyGedBB3VYI63llE0jWSbZscy9I4BHnFtX9FIyXct\nf+SvbTIZfOU0jLTeroVR28z8FOfOVwqjIItv94MYH3MiuxP4p8fw6jbi/k5V\nQadJKEhPBmHE0WXisfIip140HhlEVTKenvEFSSNWiDnIvRRcxH5NyU+tZlC7\n03/Nqs9WrDYAWOplstpP0LoOlaXHQ8zeYQShCldI589/6If53TMf5o6CrmFS\nVGWU5kwBO2IrVZ51iDK979gGtJSn6Vsymsbs8F9G975hJUuLBnsIiXuLEyYZ\nkm116xSUl8/ftK41fX4yLVtzy4w0ZTPMsHm7W/5gVkaOtjkgnP3n0T3NEjSd\n+zhEcIYykZ3E5RUzhkbnsHxWAKQUeUJi8kxeHMvf0sEEG8F2fAfpa1G1sdVt\n/sJpNOEB8Z1LePdtubNTPGQb3amPbmpY8U9d8yZqa6qToZyJKm9QZhulB4kk\no6HqzcYW5NnGQZy5LeyvKK5E1veh7LRmF5hAW8uxecq+YcQcMv8mEbT+ddW6\naLjm\r\n=sySq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFhofIcoM9D35nr56Nx2WyBOKwnPdh//7Oxd0N0fq57AiBeMVAwKGFpGzxGSwSrpZqtdlIn7BeppeZNqucrTEpQnw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.d36e9861.0_1593192998025_0.6187170231911443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.155c2f85.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-icon-button":"0.16.0-canary.155c2f85.0","@material/mwc-ripple":"0.16.0-canary.155c2f85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fhyxMQR4blQpZF17j1LzDIjwKPsEoQMdU0DTgalHJ8S+2OFt06gFq0xgFzFKyFbc4ZNluwetDEIMem/rwz11Yg==","shasum":"4d0949d44bd6e0043a8d0d7269d2431c3e2615b8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.155c2f85.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oUQCRA9TVsSAnZWagAAptcQAIicvlbVL9sabYpFl8ck\nfAFvOsbO1yCTs+sJ0qKg28W/M7AOgLfAbomrshwvTvDLGdGAGH7Gp+oxyLCI\n3fdNfKB/obm5apvxN5UvvS6Wu/6cbKgCKsps68BwvtaHy74I6xJ5sfzsR+pm\n7Tsw5BDP0AbfYfUJhdV1OJZTmraBXFigYpyU9JZN0G/nTH3oY/ypwwQuDUm0\nmL+z/HtdK+wvsITvh5ucwHRj2YtVy3oQP6+deGlXBt1j9FTLbg9z+q/3d7US\nuAAtkH4HSDyxSceweAtUnY6y5JUb8QPH6fCFKmYKZAKjuCItYsvOr45xbm6b\n9qgyOFYcmA88vwdcz2qNCVCiNMsuOz45XUsYcldkxHiPegx+lTyTx3z93y1i\nB8VlcWh22KOtPdqXKhekGiA2PWru64mcwWmXns3rzRbj56ycOIac7KJjzuhU\nvL22VANFDinC7hOY0Mix+hBsSFs3MCG/q8+gMmjhTeGGrvhh8FWl3lI3vHbU\nKzIkJ54N2LG9gxQ+rIUddOWTxjdVxNLKiT5M76UvNWPK5X9wADuVCKCCKxjs\nU3Gn6TF5qRAHvV14E8musnySguPhfCWagPcgL7RJlEGYD6/U9Lv98QLgHjob\nkeAcv0hfz5qvwYBmccOojsEen2BfBkCUwcVdqMJkv9/kVnyJhxbkP0TxM2Gt\nNYs6\r\n=kSTC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdbGXxca0Q9WAFggVNa1Q9mFS87Tdgm0mZkOLFN85ubAiEA6uCEcNwbNBc6EJh/w+YKaAJJLgyK/7waDnIXnPba4Lw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.155c2f85.0_1593214224026_0.5412663057723641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.340c9c40.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-icon-button":"0.16.0-canary.340c9c40.0","@material/mwc-ripple":"0.16.0-canary.340c9c40.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gBLoozfIdNlWGop5YVoPWVfwmEbWNweHbcU4RvXg9VTDByfxw0kbeUiJY9wrFxEhwBUxlxtiyKtlRpB7JDZ8XQ==","shasum":"666cfe9d5d8c0f1e0e818fa282bca42ffeb69b67","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.340c9c40.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ob6CRA9TVsSAnZWagAAjH4P/3LAIIWCGAOl/R6Ss1Zw\nNZjzJgI3f4v3+zgUBeBBBQNli0UYXWT2O7xvxd/4ZSugOpe5hCIOR+0bhuvf\nEeKr2zHWq82yaybMHLp7qGXRcQwXym2jVflMew5i9sQLHOLQeG4V0U5lYSk1\n0Gm4p+XqsUYChQ38C+XQOUy9dKvvDYl8oROK5jspkUb5AnCjkxCS7K4MOnn5\nJTMakq7BNnfahPcSWB9yWGklxp1wBhHOcUi7tWybSyraMk3wA5ax/31odLwq\nZCVg2wWr1OHQcZKRpm4bobk1lUHfV2JYQOgPJNoZALlHi+sA9Ab1b3mpQeMm\n4fXbYMOg3ETDrpjlN8sp5faSuxSP2ugKwLgEe2zw1qJPSprEDNB5sLnDnJco\nJaKYRObzPPsrvPrHcXNNmA/7/47wxHEuUhz+BnxwAmDZY3iAyDoLC+Bx8O+K\nfPwlfEhPqutaSTCVRztuHg9xp1PjYW6KYI8cjil11gNf06FAk7JECSvqsj+B\nJrdTnVD6w3n2nOe3YjMjX7cb5SMxolWUrmZd02LriITjEgKOtfelPZHIb8zg\nb3IKQ+C7o3rpABsHpIdtQ6Zaz1Wks5mU9TXF95ceVOqDQ2IN+DdXiIWGCPcr\nU0vSgBvfXGfRWbGVdEBco4vmJm6ssQvXqG9ROCqc+orcwyxaIex4ZRuw6RyS\nyapy\r\n=tkOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFa6wiwpVy1cBaXSlaov2du8xSkpobRucH9iTNI4/AfCAiAg3nVymN93GRVgbryf/dU9kE+2nXB9u+RtWlpNcjfieQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.340c9c40.0_1593214713752_0.2548710641363998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.16.0-canary.a3384d2d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-icon-button":"0.16.0-canary.a3384d2d.0","@material/mwc-ripple":"0.16.0-canary.a3384d2d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-V2b1SKNE8I2Gk9WqtrkFGDXVIFVhRCxuFnhi0+QbzRtRP/DYLt95woO9RYEEY6dvoxi3s6GhoanCyatqBt9gWA==","shasum":"976844bc9e3cc19828dd7d987dfb3e77636d75a3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.0-canary.a3384d2d.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6f8CRA9TVsSAnZWagAAN88P/A8MhXJ8FvahAuKP2B6j\n6FOK/zktAW1P5Gyk+HaVJBgoiFPIiMPtPgNVBNAoriYbIFQoe43lchle5Vtp\n6YZw7RZCFKjPC7WkzJCQB6DSkorR1r5kOaT9panmJYmIpXV5Q13bmtQvJ2eo\nocMP7gsYdjfUzsIAXq8Mr+bi6HiXF2MtPiIneLPapWh6OEpfUbOlubXV1NA+\n3hRzhtBeho9bH+v0MQflpIP5XftJPlrTifJ8GdXJIjymnp9C/WFn7vJjMaPZ\nW1361kHUZSkSDu03ka0Vu0cqSk3C8pUrDFkjKxD4/ouHboHbNGaUEhjy9OI4\n+PUoZ9zVu1yV91cF6094SNEJr79PNeDBj1QBlD/q2HXLLHD7RLJx3Ltrc78V\nd5OGjCUI7UtGp3nNs5TdC6L7TfJ7aSmWOl5ZErSq99Zf5K4mbtS65fB/W/bh\n8uCnCtAZw75esXISyBjSMqXpCE/ml9b4JqUMHE90iSBTN3ByI57pyqPq0+LA\nyX4/n9pxtohkBFZkffZy6DfQ7jbPunEJU7o4PcyRcJQsCJkOaonvJgs7L0a6\nCFj9BE3hnyNdXKhC+oKMkw9VUr5jtZ0Onqy5vWJ1hyrvJBJOL5sB23lxXeMw\nG78CLy407ZQtCsQzbsCEBZ4uzE9KsMDd5O6YjhWAcl8c/5Hu8P4SIuNmZAGt\np+T7\r\n=tpwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAySHhcYjK18f1SzcwnIa4+XuDlW27qpcEwvlEnNNtqUAiEAw4PLgArUf1akH+Ks+ft/a+qlUl8Y7COtrWrgLUBc/Lo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.0-canary.a3384d2d.0_1593550843780_0.2732180606352719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-icon-button-toggle","version":"0.17.0-canary.6d056c96.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-icon-button":"0.17.0-canary.6d056c96.0","@material/mwc-ripple":"0.17.0-canary.6d056c96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XkkG2d4TJuhaLIneaTIUScrIeCqyV5dSaZfy6I81AkjXaefSBt2npF2fsCK8UFrdVMRlCWlaGvrz5DtboXETtg==","shasum":"8d38bd5257d65c2469eae9d5e064420779ec26d1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.17.0-canary.6d056c96.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6ouCRA9TVsSAnZWagAArKYP/0riua9HbB6z1lfj8h4E\nYUcYXno9AOi4zWuPGRuCzYK4r/ayA8yHLRjpvoKllpw9uxNG5xxk7j56B5tI\ny58ThQ9Hdb5hi5Yzgcy8MzGpEvDKo1WAtutiHfZCaeoyc4IZlGHUSWViHkyd\nxwZ7/mdJh9bbvFoPxNh3X2FyI1Ds19jNChiobQzD+MFjQF0E3rJI9GMK9+m+\npMhfSU20hNeNsyOv+Wa6fZG5ii/r6xE2dnWAUUppOjRLFhN7JO9NSf8JNPpH\nEVBSFTXlWQLskQUrXupHwM7qw5OORNPprWbNNPVf0iqmvBaHbN6nvuaeC/TN\nl4a5l716QzeGftXX9yibNnoroI6cNAQ/JITktpimrhpUj4S48n81QsNo2YzD\n3WvGHdH5p0qtqxLIlZ0p4mGD7l5vHg9anWgwtLX+rDQI0Jny91CdIJoXNcvu\nozEwKDF6qO9aGeNBDib3cUGEhrJf3mGueY0nahHddxfBkwZIZa6BMQDwHSLT\nMzN2MEWZRhdiZf0JfjObN8/Jv35hSwP30QdztkTH5kRG46ncYbHblU6zd1I6\nJLVLz+OkoiVX+1TPCuG3+Vnumjw6lGeSzdUZ4VpVB1BUkVbIhUgxFk54UHZ6\n0WXpI7lbB0UU+2ScjDP3fmdLNtQiBMghHeP2QIjhrAZZTCmqbwSREqubKtZ7\nii+V\r\n=OhaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbqETEz0nbUzoR06505NAgUvm/SYnt0Wxm7pENB8ajBAiEAvoDhez1HF2LfH7hohSKw3978CIZtA1Z1OOOW4m07qXs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.17.0-canary.6d056c96.0_1593551406194_0.7277905544996133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-icon-button-toggle","version":"0.16.1","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"^0.16.1","@material/mwc-icon-button":"^0.16.1","@material/mwc-ripple":"^0.16.1","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-9iMToblhLkFjwj5Gyf0kKbSr8OsS+FSx3oFd0JpvGFYOl84erBzXnenf/QWRyNeMbwafVPzZr+wwSZ53doWbNA==","shasum":"8710306897967d14842eaa9c8120356ce871e6e4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.16.1.tgz","fileCount":11,"unpackedSize":37138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tRCRA9TVsSAnZWagAAq7EP/iBhUrPxQkH7H8prykId\n7CmTSzZeLxl/rFHDCAQ+gBQzWgVU27AipAAFR9uywH/+xrZj6PzX5eGaZz6g\nNq1s8VlwBBb7dTIXFmrXWYAqnWwN/gncMsacMwlkOOylIoJ2SraLiuKBKUO1\n6UIIRJ6DJ90g9ok7hCiVx5t84oFudtYiTrS8RGeOX3GVgvExHtn28HwVDArm\nWgvwXqImSDs6bwyZ0wL4/qvdla5lyTYSrZG98gilWUHVyA3rAhde/wmHCfua\nlVNXOpv26GOF3yvRLyfmfOG1T+i9nWiGvp4fCsIpMlLJEHW5BoOUsSefLsme\nl3Wjla94MeBZR2Cp/QvY5LJakr/x2Cj4Nlp3SCwnOnoTXulv5vrhSTQPbSou\nhdWm5nGEqEpGRIHkA825PzsnVG56LOuhUaL3ToqeOqE8Xi9B0bT6R0tBhMO5\n4z+p1mPerXpEY1EArqstw2qkQ7Lv2Lj7gjrr5eKfpBsTIknW0LMS1X91PYKN\ngDJvF/RlFEO5yWdfxrne10eqDfNE5ZJ0Dy3UNR5Qwgf00y7twIQTpz8w6ER0\nmlMZwQ4M3Fj8IcUYhyKFu+cKHmkfQTeGIv/YgCmJTKliZ3axnXYhO9Ms077Y\nyjfj0+QZ3eB9VXV0czbglONUGKcsVywz9BPpL8k9TMfz/4Ez8g8aJsABLEoi\nqN63\r\n=0Jq+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSKUnf2JglhT/hi9mNyWWj8IKVczwXlsDGny48j8OFUQIhANMiEew9+h6dvbErfCpxBRi73F2GjTQ8LTqRGszxcgaJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.16.1_1593551697430_0.3564361498018327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-icon-button-toggle","version":"0.17.0-canary.f7e37607.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-icon-button":"0.17.0-canary.f7e37607.0","@material/mwc-ripple":"0.17.0-canary.f7e37607.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FIvwaVbVbwhVVBnJVVHDjvjhafOh3runQFdeDk/09WxVupJZ3nHGIlYFInfEisUjcKRs3VHz+uy0a5uHYFA/yg==","shasum":"929dc36f24e94b5ac56e2d1166450511b1a692c8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.17.0-canary.f7e37607.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7I8CRA9TVsSAnZWagAApBoP/1ZsnFAHa6M2ugXOE44v\nZYhaYrwtQQNOGIQYeNO4Bw/5Pw5FbD/9x1EPo6OAErsbMf5Dovxm0OyegzGp\nRPGqZq2XHkdTeMBo6msoMk3VJSUSDJXzmgOV3cvMuaSRzsF5t1pdggsRKxfI\nNJCa/vN3741I/5FdISCcC/3zjDYf/thUNxym4i5kTvpoKg0JSiCmoW9ct+YG\nunk/QrAGK8qYFOF2kZUvaj86JzbXu1FZKM5K1LMWhJuzg5WUtTOvP2Ult3dj\nE+s7z1xD7DM10U1MwsAjcpw/sgz5D7Kv8R8TwR7moFiIRkuoCuQZ5mgN9iwz\nK4VKoPInB5NTQQE8l4R0M5N7KDrMTNPVyhms3veUuSrCAafPuLaiqGPlWHYo\n9Ini0Il7sM35Z5OO/Y4/2NL1vJCTXMV40/LcE2YFm7Qw+M9B0CTgLIlEyomY\nrklrjvn348jtOj8sevx4WqLEJA0b9A0AKXClFA1w3SL29As0U4aD652t3f5a\nd87HrrIhztq5k68Tyl7wv/cjP6cPl/v2aYIWdz7HuJ6uCLQsDEYsKR/u9hVN\n+mqbKqGTdF0Q+J72AFQ1rHEyVi3148I/17TsRpGDCmOUbHN7npan9yUCl1kh\nw4A0Fu181FyhbcQFJby0H02jcwXcqzoZJybU+n7TG8MWAk6FINKTMyalei2l\nhiYB\r\n=moC7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUbD39C1zDMXYBUng49qEIfBpcNSdPSsVU+jjK4E8+ZAiA6yu8fPdmIf7zU7oLadQjgwWSnwkSRlaJzA0RYOE91BQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.17.0-canary.f7e37607.0_1593553468257_0.3148685051386577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-icon-button-toggle","version":"0.17.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","@material/mwc-icon-button":"^0.17.0","@material/mwc-ripple":"^0.17.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-aa5bBcnlkeqAoIoHI9rclqih9R4hiLt1GH2tF8ReHsuMJWOYHw581kBieK2rv7NYdAgTf6g1DzN5YkQhiswHeQ==","shasum":"7fcc55c94d963b8c23db1c715b4cf1ee7b610b5f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.17.0.tgz","fileCount":11,"unpackedSize":37138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OehCRA9TVsSAnZWagAAuW8P/ijMvEzNKI7p95paE725\nZQDMtW49ibcZkE2Ng3zmeYcGdoCHQvMW3MzivVi56eA1lCx17QjOxMbmvea5\nYRN3BZ8gy2d15RG3HhcpbOqTV29FAaFaNmQq0aHLIPc/DrhnLdORMXV1rSyQ\n9gTfYM+IExsmZBxVltdTthw6xitokrrE21xch2Kyj3zRNIAWizVLuPi+Qeow\nFryGYNkXVew6zRn0/8bhS43Zeh151YYNdCMkccjLfbwBr5ItT2ppijt3ioKt\n+ly41PRFZxikntK7iZcPApNatfLVr1I5Fq3oEK74bbL9TxKEiQ9Lu4S53HcU\n8hb6pGxWiWC3UGQ+dGFeET8Ky+ZXxafkgOOPbalDEYa2xikq6k59YSAgirzp\nC0v9kpjflfJOJQIxAQGFJ+U7XUZDO9PNrWcVp0UifjzAXQGlz5wWcZaesQ/Z\nvle1if9vLvA+aM9UNs/ZeFqhjltPQ/Lw4YP4vSK7Vjqdf1TjRWGEgYbkKJRj\nc7SbJaCSyoORpl0Z/L3ZvknVrNsVpqtZSKCyefNJFHBiVh61OoXkPlpY6mID\nyrJplyWgNuBFptmVupSjauKFbQNNIBQhcshAcfMyRbuDlZQvyTQ+TYNpJ1Hy\nuGQaa8PGS1oVYa14TJN2cUISMQyC+4KL7Fbtvpi29Oq9E/5e0J83h/eE+QV7\nn4pP\r\n=8Ipn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYdlUifVK4CMYx7bt/oczpIYsNQf/1IRcjIidF6DXj5QIhAMnbS4MrE3Go4nEyjFwZTEib5ZVV8s8T2udpaFhMKR2v"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.17.0_1593632673116_0.9362922577544976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.0afbfef2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-icon-button":"0.18.0-canary.0afbfef2.0","@material/mwc-ripple":"0.18.0-canary.0afbfef2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UaUJoZIEA2qwjVoxU5Hht+dzybbn028C13ziL+OJkCKw/7znq9mqLUcae/wVDxwFVpFPBgH12+Q74gUHDPAMIw==","shasum":"308191e7afe81c09b4fb9ba0a879790c63e918a7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.0afbfef2.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OexCRA9TVsSAnZWagAA+aEQAItwGv0OVETghoDn1OWh\n9PNqyfn3jw2JAZB8EjkUZPGSQlVPqxEVA9j8T7AiFAkLREDgDCo5WvIgXq+a\nQxz+2efAdhZrOKJbQ5hMxTMX8WMYq2abzfvfJnnVFJ18e3GMApRVO1PeGJs0\np5RykMK4dI5OKbFn+fgjDTUiXgT0qHViF00h4zSidyeSM5RW7OhPGWK0qTV+\nplqO4vosuiPlzJMACoxUeLji+7zbimneSaX55g6RZQqlIJbPoavHIyDkHF1Q\nWxGtMykZ7ItGjwAX8TOnHnnjzqnNAgeAoOx6xGhmjxt0F62mxQ+YRbMmODpC\nZAHUu8lEeLE9wXEZEPzuqIa61yxQ9q+FFQ9RwwqjTD/jAq311LAblVVpb/mj\nKpSG7Z5sqc74ektwKh4xyRZdxbH1UiK1xcNwT3AtiGvuwNg74md4e/f3g1hB\nI2sIDenXrJ5gL2kQ5S9qxrn85iCLkCTluxf2kj50IEbmaPbT9ZvGfNBjXPkv\nZ7BYuA2xeC0SJLruRet1AquMurw1Olilf4LUJwrJa6S5G0nCBbncODaPt89W\nmcPIY7WyQw7OhvBZ1lyQrLWRJLDX+HPdEOFT1DgfBdiaFtnNt/rHJz1Vg0KY\n+p0iwleIUssBEVuOJENLfH2hY2rmWj3I8HEHESkrK7GR6tnG+aI1W+WJAhWZ\nNn2L\r\n=pA5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmKK9oxpuvMiz2gq7OFe7QOgvTMXPS+lj2o4TkD59r4gIgNgh2amMeyLPXfKjVkofNoGWeXQm0+ZRu/IogMuK1rUU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.0afbfef2.0_1593632688534_0.7120166247226338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.fd970958.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-icon-button":"0.18.0-canary.fd970958.0","@material/mwc-ripple":"0.18.0-canary.fd970958.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-n6c3pGFZPZVcZYz5TgMyxsU19tvhysJGXprkno0FWYKiZI8a+8jHXFj4hGEV1rC6fya+v0sFldiQ6nsU27dnYw==","shasum":"e169bf2f1c18ef914969cecac53eb80a5365db47","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.fd970958.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1cCRA9TVsSAnZWagAAewEP/1tupHr+lJpIuM2m2BlF\ndJwbEm9QGyNmjBrWtfA+qavdLjopeXvxgMIC8FMbJ+wzFHDiBGbMsKkbZacL\n4O7gD2sHNi7A1expyKxgwVJfo1jFdpy0DbHKI8+bT1O7M64OwQfByz4jDEP0\n4vapM57v5FJfu8ttsVng96c1wo9B0+6RTyM1K9/EKFgi3yh1/u9vNGfzPGBY\nQJnRqRv4TL5EbMq/qnr+LqSMHjy/23q9AyWbUyKyx7+eESMyeoZuc6T9O8iK\nczBIDGwzgzW9o5wNk/2ae3cPxtFr19LsyZZeappog+rRcBnFFUhgwiCbU6GG\nmJ5SO2EuyPsbqh0PQtWan/7M7SV2RkWXNCPQx/Xm8nnRptewBxFCM3EHdfWv\nmbeB1HZbotEWhVvwHUYo/pgPAyJs5H25jjwF5/aN19uMe8SjEBjGmcPoPC+R\n+aD6IgbswIwdyM+wK3ohfFSfq7hRrOJkbIO6j3Pc0jyqPumdTheZOOtMmlvT\nLsb384eMJXanMnwkHeaXFGDnpxhNwcwXjyzqJKtxtS1dyFW72ASMfElTd/uP\nKQ92aEWNiYnob7wXQauHdxycgmD9qi7CJUkIOAUW0RfJKkOeoIZO5OehqWZO\ndiVb+UsL7GRrK4tB6vhozxpzfMuNQa0eakTg1FMWiW045j4UTjAjfgchlvgC\n2RJb\r\n=dOSC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZMZZbKrvYHIFLdf5SuiuDSVeRLOiYvHnV49lFw04GeAiEAmdQ2Gun/oDtihGpIfm+0fFQWJ4QXPwvWQyyGmgUnYrQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.fd970958.0_1593646428002_0.6141213370027387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.fd44be19.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-icon-button":"0.18.0-canary.fd44be19.0","@material/mwc-ripple":"0.18.0-canary.fd44be19.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3Fps6vKa2kUYbwXVwsm6b8nbIc1iWTuNy7CbEPKqp7GmrU9sLm/WXMfMzZOKnUBxC8+gl/6ExluQk0F82Vmbxg==","shasum":"7eed441c59eabbe7c0e42a8d220267b120787006","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.fd44be19.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XVDCRA9TVsSAnZWagAAWAgQAIw3PS6TZcmc8addPDtB\n6prH+KwK4v9Dq4TwGpVBqbb9WRqH8XkAencHV/Q76uBIlQ51fNqTQbTJXxwi\nm229IHIOnghd2TTYEyEGyHb8FJvCzDGl0S4/qxMtr2X7LdkbqaNIe/yBB8eH\ng6VoGTJ4WTkq/k+A1vF/X8bjyKzkf7XrtIYTBsVb36SvFjMcY55rajlzxRDV\nOOE2KhszQ6Kzawro5k8FR8XyHmCPvOLv52uCO6N1etOS4UrMdDsLp82N2FNv\nqpu8DZIltlywpL0VSZfRpoea3jDjXXPUv/WbfXoJ6rXR7gbKnvAf3OGy79tD\ncEhamlrQzsGMpGbaKpS/GL3mdAe+OPpL8iqyeczv5qVx4GdN9/LreywHF2q/\nk3Zn38YuEe2T3fWDYLdmpYffhUFnNHbZHaTt3TigMrbgsKa0dzse5OMImkg+\nzQB+yP1UMuOHZujX2PHgSjH+MBMZS4jIkrmLLuHqYwhgIp60mo6mJSKDZNku\nnvoRZsWQz7VDOTD51XguqIICq1WOb0BwC1Mri65gcKZRXcsYlCKvu0PueqCO\n2RuUyiatcUwH4720Upr+KLcRLMszmhJ/Hl2cEF/kynVkvjpYAKQynwXEDTl3\n048MZ4WKaCVJ/7SLu+BZCul+LVLnuA/IdX2Wq7spHRi6dUHVrhRxpUC6bVBh\nhE+t\r\n=LFdo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNm2SzWBo2N2pwm0JSDoEaTwjOuUsoMYcfjPMwWaKuAAiAr9SeV+38YluXAMoOZXlA1R0GlyLQgvEpRJfj2utTSeA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.fd44be19.0_1593668930855_0.14841382929763358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-icon-button-toggle","version":"0.17.2","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","@material/mwc-icon-button":"^0.17.2","@material/mwc-ripple":"^0.17.2","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Kz0lE29HO06WubyIZie1D/zTNeicpxKLFsyG65BACF1mUUOrmawJA+W3j9xsKmlVQllNjBlXLDBgpVYYdu1gUQ==","shasum":"8fb7813763ef11f2e9fcb5e4b045ffbb6f1c8ede","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.17.2.tgz","fileCount":11,"unpackedSize":37138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeDCRA9TVsSAnZWagAA1coP/24ak5mTUqQD6d4tfD0+\nADI6ZMq18jEe6qIUdRZqMYg09JojGHZTZkt5W7KNmLIFPEMAw69oSlI9NzUf\n8gLqQ0sMEeU52xZ6DoVmE67Sp10qWSWKddD1D0z9pe7krs/JTOQPTdi3u7TB\n4n1BPQ8G1W2A6pMS9PrMKDUOmEb3AlomUqyYBzqyrDC7fyFntHB7D4t9QutN\n5Cw0kCMdgOtlHRIqLADdKeNPb5LUvELQqNFvgQ9J6qRFVFd9buMj1R41cCNR\nD7bMsKmppGfsQ3fHxVtaI1IjqKlgztVNsseFWy30aOQcAZcjhso6NhXHVi9X\nIhpG9yugeRQCBqnBzodMTT+jluV+C9y4VVwBaz8xmR1fk9nTku5I3JhResOx\nd05PA4PuMj8ihkU0iARrSyaBOhK2yUvgJrrpbagtqxSBAmr0PLPIThmPCeL3\naHIOizv2h2Pdk3imE6pAIXByxTzZIUSfN25l8R2heV+K01OPBVmHD/fmRqxX\nBFkEjWa+Vf6S4+6lTqBh7rPL4GUyZ5E03kr4AsMsByUnbQo+aYucoNsw0OXt\n+XmeZpqSqarjmMxReywsCxDVghR3iu92+P4NHKUovcv9zIo4fyx04PxmgEZp\n2eGHTcFHrdYmESHiaD2mKCW9mA0Pp1P6PAARxBR1hWT7lU97k4enrNoJjadK\nJY7w\r\n=6VGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNbQWQvVXxRQmxNXCVvj4Y80GWNVFPJeo1gJmjhFiAiAiAKS1o4imTEWl8YqYmB6bYdFyuq+2Xy9vg7+eCNlIFkhw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.17.2_1593669507183_0.8672815220290397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-icon-button":"0.18.0-canary.ca6fc6de.0","@material/mwc-ripple":"0.18.0-canary.ca6fc6de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MO6J3SAQlQasAANBWILC116AX70UcZmwijDC+5n8Xnv9K6kaiVJBREL9LYNqIqXOf5zsVSCaWeJcENlFFfE38w==","shasum":"bf30a6bce8da9effc8ed4d4df4b5c275a221a3f8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.ca6fc6de.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfMCRA9TVsSAnZWagAAYegQAJCF33o3gE4vyceU7mgj\noFIiQw5v3S8tK4x1Y0W/mUrwp0CbepBwS7vbt0rN88AO+wpMRQKeL4TwSzYG\nk2LnVuzY2rjVntCXmHWBFG5vx6gE5Pk+gpsDJJofgdwp5pdzdC+j7jLcirNw\nIfqvPsMJodrd/lrSqT0RcYqg0JFGrGxqxmbgz9YGO4VFBzfWyi9Ar6PT5/PU\nnnSxndhAA+tvAwLAzmfkdXn737pBXrs3W1gzvMIMJDk4PV33mlxlY1GgyYJz\nEhIjn9q1U1se8+EF3ST3eAXpoE0Y5r6Q+3AWePbiA/5XA6FJuDl+71uoBEVi\nooTpWTW+bpg7nN0vyokBvbRORl48uxHjoiaJqVZ41G31qqIa+KXJPgivoyAM\nmJoWxvPu8O09H2Rj3QHB767PQXRGTq4j4F4f1fThGS0xKy+3HKTGvwL3fLpF\nPDaarPNZWHmGIowOCyJxecjhrofk6gFp5+V2F+d1WJm1GslSO5XjOp20eKKd\nApZH4OLzbyMOv8CrzZuGi//NsP+cdH8haoiJhVNsSkEYS+rE1vFONqNEodQO\n5ZqB5PZT/hRtcbGbl6e5wLssrX989VzQhL40nnZyC0Kz6x2MosGCn7mRqX54\nDrzbmYS/2cJD/1Cr5buI8RD3XQgH8AgwIpftaw0H3tIaA3oj9BbXWz6uXm+k\not6O\r\n=Y5an\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8Wt/cs7fTcgXcnUAjQfxZD/Jqyp3tDlmXUpu/cLKoZAiEA+wLElmhokjh2BQ7b7awRJqUjq1eU0F9Ucfj7DAzg44M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.ca6fc6de.0_1593669580496_0.7536092236269349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-icon-button":"0.18.0-canary.79f1ec2a.0","@material/mwc-ripple":"0.18.0-canary.79f1ec2a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tUn70Glg0y+Bvko7xmg2F/bbKe9pVAEYLm+aq/Zi9IhqfWgV4jL9U54ZfimSxDBHa5yHue0PECWAf4uylbZbXw==","shasum":"96609abf83c285542529da454d942aa96fd957ef","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.79f1ec2a.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHJCRA9TVsSAnZWagAAmxQP/i2ycVRLjwkI7PVsO1nh\n2Kss5kvK8AT5BIETuTb4IGqQgHutt8tyLoYxaiOdeiaTUrXYp/LE9MQmUNAb\nMbkJk8mVMPaiMvuRnEA25FNqiK1NoD4kPjIh1zdJ8TT34PqWJCoYq9168/X3\nSBpqNPc38tIaECHvATQJDNZVfXQVwHFjQmQYyMiyvjnKNg9mqRs/ScSSkRBM\nwwf9fuWN4zDJq//r82meiV3vtViAVwTeqvWyCNh24ouR0A+5libffozSx7OT\n//mvKiLRqLuUVjtfCJu2zr/vJj3EirWBjfcWZLOiOrxQGxZ9/UwJ7IhJxdwm\nES9fjNckL8Z6EGFFAPP8HmzjQhDZeQlZH59m0/bS/ExffBtmEmF57Y3/ZCzL\nboq8zvk202ySWCk3ZiDUtJLGEp621q8pg+o0Al6L3rd47XKnjQ9TOwPkyzHa\nooC7D0VLwUsM8bk4rDO3i9qOfwkX9HMNaNNuYv+GRGqFucR3hm8h5cPPZFks\n9I+mz9my9kEX/uroy8YR407mbnvxAzk2W+OTegVzw4ARAn2QVuEnQU1MiEeI\nL0W6dp7O7UlCNlOR6IuYffFwkq3AmyDUJ/Cf9ry0Du2LQY1eWa07zLIhsZNT\nJTs0qfcqrA+1yq5RduSVYLILolDHZbeS7zkCsB+pZdf1QFqPml7dmiHiOlSI\nfxaB\r\n=CG9p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdmp/0m9G+7flAC/VWczTKi83p57UMt/M5qU0QszR1oQIhAJh5ngG8hQ45VqPdyFpxEnACebXYOIzsfnKXLywzYqY1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.79f1ec2a.0_1594143177259_0.3865536021975158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-icon-button":"0.18.0-canary.a7bc45ae.0","@material/mwc-ripple":"0.18.0-canary.a7bc45ae.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pRc3Zy72ZGeH8XR4VPFnM79DzisXBO6kEuKqbv9tyhmDDccpluScRj74f44OeE7mqG2n1kQ+/5QFwAE1DnXcCA==","shasum":"2a8ee82ccd54f17d66d99a2dd9e272928902c998","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.a7bc45ae.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KYCRA9TVsSAnZWagAAFFIQAIbp4xzB5WBm53S2TQTU\nMc1n3HfuTpKN/KsYQTMaOgouR6PujK3cGSvcGDgmyDakQ+LbqzNZ9LScR3AP\nogyl8odcF4mtOF0giyYywnlcBDaVe0tmsICXg9W8MekwKv2U6kzMUUK+2Ydk\nO6CS+gvVlHBplLo4o1S82/dTwwYPUMQQIIrAbKIAtd+TR5Ftlt6szDLNXb5k\nws1fuvDlnKekqdnChPQa1k87tJGDS+RipF1QDNQxMp3YifHeExYbo5bmudM+\n8EkZdw/aoK7wxorXgkmwXf8FRLp4WFIhiUl+E07vkYS/7JOAtlaUr+o1F3e2\nA8N72RdCvusqws4YgLw8FpAW7kKZyxvLt//FnqgxpHlO35B0cHMh01tGX5En\nq+P1FSLfMFF4zb/icxeZtr2ho6wi8UPfM/XQI+pmIz8xO8XOBKNmfuy2e1Or\nau/5JjIGi1SUqPo5c/BG+JVFm+TSi5gxot2R/fTw9nYFgzuH3u5GBg8BTlct\nlRp5XzF3gYaml4DCXWZ1Ps8ous+P/2vmKZNZoAQpOeMT+/++eqsK5ygJxwUX\nFLu0Fa/QXNqu4Yyf2NPz07mBpluAmAfY4YVRMIRxWX4MwRYZNY2xRuus3dGJ\n/tQjaQzPellKqjfXTIbGxhbSdmvsmro9SnMJvtdrHkCY/aUBOWKKrQPOVS3C\nREXO\r\n=Mrx/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiwwT1mm2JgVnDWJz+6zgQYdc/EUKsS4DVNWdbFvcYwwIgZL35XLRDKWbCTUwM/+Ypm0UrFepSzX0+g7cuR+eqYmE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.a7bc45ae.0_1594315415961_0.0798706873705517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.b184bc1c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-icon-button":"0.18.0-canary.b184bc1c.0","@material/mwc-ripple":"0.18.0-canary.b184bc1c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gBMDqFYTUInF0+jycyYshxh1Irbq3EOQtAvHQ41WtryP37Ctx547BQvaz2BIqXFwtEkLydmB1GsSaWZH0Iullw==","shasum":"7c10a571f6d328068987c8a42b992b12852c9b3d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.b184bc1c.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1S/CRA9TVsSAnZWagAAtzwQAJCHLDNGfyflABivoJ11\nztK/d3jZw16sLTiadOyvi6Z4LLmB6Z0cNlegN6U6fWP/tMEgi4KcVbDei8cF\n5X9MvkDsFx740yXTB7jPyfttSKC2rMrp7zOJS60mo32a82hosAClr6UJNEBT\nTFnUu/yZJ4NsoiVVcFbN59hJKVxl8Bft/Vp6UtHQjr/iXmalRmERk+hzWF39\nLmLmqz0R+NHwFcCdaPKxFRTX65yie78QSadC3rbAcIZH9c++Cv3UZqyN7k9Z\nCAxyAxSRtWX9THHjHDN/DZ3ArC9NEQk3YZuxO1CtuWJnHn8PnbD1SxZ2K7Lw\n0pRN53BFiyUV9le8h8OZgqLkEkg/jDl84zTDt3pllTLr1raVmaDrHAibZlNe\nQYyTkRdKU1Vyj65mNqtdPdG778LVtiJ89qfUGeWIVTFHICZCUPROg1vtLBJq\nfmsE/HHU2LgHvAQec7ZizazbAVsHteSgq7dVqKC54rFhsJFeXqkO3N7hkLXk\n3G+lHzhWNdhRrmsbuBAAy3XZChcd95v/nNt/4cVywsaoZAlJn0OlNECxl26m\nXsO/ygsxJB2y7GlhByATkhJO/nSyh/c4emnwUbgmIAr3w/7P6NXcjLmOa806\ng5bDl9JypyAijOVBJXx3P3lTV2xFCIKC6LwJGI7nJ/3k6UMIOfUlA9HBc+mE\n+oB0\r\n=Iwdd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErR3O/tfNVInScNauNnpDyBA84OXCczCa0yzQNz7hSOAiAlm5zzWShR4ZylF2ot3P9YFo/SoRsM6RJj2v3ekIdVjw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.b184bc1c.0_1594315967090_0.27877546079577487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.b39fde62.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-icon-button":"0.18.0-canary.b39fde62.0","@material/mwc-ripple":"0.18.0-canary.b39fde62.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-87RqMkYerz7bEwZ+tu4vaZoEYkqut106F9OkNn5WWjmcZxCkAtxhRlss51YR1DN4RgGkYMq2VXI4/WwGKJ7l2A==","shasum":"55fb62c33f9ba37703aba045f2fcb536f1447341","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.b39fde62.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1X4CRA9TVsSAnZWagAAVroQAJ2eSZ2KzOurwt6bswt6\n7y+EoUtFH7y4ME284CugkUpaTqRFnSSp9/kyFuObIAgh9cUUnUsMn5thB/p6\nKK5k/OTODUXPF7sjo1B6MKwwq60aZUBGVPQDJFzl2ByeX0UXjpdhjgp9YLi+\nTcxjzk60rO/TwT3o76XjoSvZodD8rQ7g7trQsRDVnbo4COChA+XH9E45Vr56\n48GEhz9zNVtYK0SlMfigVG7jidIuvWF1MH+1ozs01z+7d5GUabtY+JnuGtuC\n5bMPlWLja3OWG3RROk75g2cwxOFv/DavZPRxHSvVwM13WjIkzuvk2EaiT2G1\nVuzCjw1e297yFsNAomey7M1g0RcV7ARWTGfBxqZhplGJ2fc8JGywV5S57GMT\nGN/PBn5Kw1t0zt7dfu7w/fL46sRS6NeyG2G42vozcEmdf1z4mzYBz9uBdhqM\naIIQwg8AIS8yO0E2Hh/ibJkgl9hMdmB8WrpFi8RVjAnv+ab4BAjSk2XG2yHX\nZCQuDl7nI0wZIhO9+Yv0D9kD1w5T8WopGw1felidHmk5MtpHRIsGeEENUff3\nfaHaHHKKKyIhcC5rP/SL9oOBVZAG4dHTNUGxhPd/PqBhKpZyUghWNaimGbms\nMhGGr4VYqewNnWCmzr5azizNK7oGMRr0Iws9G8Y8YoRyr/fr19mfxBZeK8HJ\n4D/k\r\n=QaI3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbBqsJY+2AuBiVOMe38BT7bc5kS7CCH52pwP901aFIcQIhAKiXswz4Er/xZdolDCidRFeEHZCiu8/UpY+xtVZ6PULs"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.b39fde62.0_1594316280081_0.4504473913643088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-icon-button":"0.18.0-canary.dfdd8d6c.0","@material/mwc-ripple":"0.18.0-canary.dfdd8d6c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+o+dVHK5MdbRvzlzN/GwFoQlJcWIDA9sTqoNt3/OGZUmnnHTyJh6RgEoMkhpjq+wWwtK9Rq9kt41q2K0QAfeVQ==","shasum":"1eda60ce4ec007981a43d73e7d70a354f6eb6b28","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2E9CRA9TVsSAnZWagAAsBAP/1cqErHqWf6EmRxvAiH5\nJbEm40DlJh1mamMQo6rCsb1Vy4PcFuNWL809VAOJA6KY9MAJYOv7SXj8JF7E\nOFrJxnV8yVb/oJdDghmdFGK/gpo4wOH3JztP4MEsvnihIpQmCPuxGGnUTqDZ\nphRu0SHawZp1aCXCgE/nojyjxaB5UcuMVEHPDmgG/pPnyUYQ5wR5Yu/T9KIj\nPVXGMJQMHkeJeKNPid6500kUzV+IgpueYBbo9SVnXKxl8dS7uja6tDDUqDAI\nALLBKJYC+Zejdavd26RmOhsGq1eA30R3zHb2cNMiy5jd7RP05T9xgGVyirTu\nNLm+jPapTJhsyxkmQ8y/+8s8e7RuMtvKU0YDvxXpc+lQDRkS4ePHwiaFskDr\n7VN/tm/lnh+s2V/ST59Kt3USxLwe3GMQpN0BBc1OIOrWALjOK0aIUiubV8dy\nBok1n/ZshKxPWuX2fNu6PKc+GQfsxwwfUl/TcZtL164ZU1Uvg4s0/T56eJCB\nl7pX6aNb2YhJjhLq6Y2Gzy+5LFRC3kwT9xvGFynoDaCrp48xylIa91FzZavr\n5fklIR5yBaRytV6OvhbncP+aWOyQWIcVsiYHH+OoFqnLjJTbf42Dpz2HFNCC\nqyWdtoizpuz2HF2MNR0Jsnm4ECIgCcMWVox6PV/8QKYwaVli/NYzHaxYC1sN\nlmqM\r\n=ydLK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkLbd0KOOxxGeYxkqQFva0Pc3acNUfjq5LLYuNJoImHAIhAInGvGQ3kKQAX+XCy2U9+UXjoMgWk1aAo9SMOGROKORp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.dfdd8d6c.0_1594319164458_0.1002427114006621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.11cf2694.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-icon-button":"0.18.0-canary.11cf2694.0","@material/mwc-ripple":"0.18.0-canary.11cf2694.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ObRb9v+ZoZLx4+QtVACsGKPWNaHzdGfCChSbrJk3d5RyLkeCP2giuHOdbFne+ctqgNzLPFunALygYUTYYgE/uQ==","shasum":"10e60f9ff1eb519ad04dd95db684e012adb91bea","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.11cf2694.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4GGCRA9TVsSAnZWagAAUj4P/2oPEqZrE60voILlM1y6\nS02PAvSPySbbycTRpwSfpCieqW3Bw1lx00ojvUzBXdQnncxCWejJRZHHcdeJ\naEdAY7WeM/IfzIWxyDQUK1lzeW3PwnR3LYkqhalzgvCu20dK1hSHQn0xv61b\nD/iktPA1cvAHn7J1auT17fqEADljaGSkkonujI8PxCCa9/IoevlF7imCRTQq\nPOz+7HAZe56kvUmHuQq5DMF3ij0jg74vVCj3NjybiaNawvZKTKBaylh4SO7p\nh30/6+LwdhofdwqnqN+S6+gafz0JNdef3ATGEdRIaz6PV5E9yBBC5K/BDOqB\nq0+iGirOyS+f6CFltlZsvYjoiO9zWp8HB5mk5dRvm+1yk1WZCO9O7soqBcop\nUu+jH2MSBEJkHwCJsYIg/IUxqbXFA5+DBtmoDgpLY/tjr/w6VQPiDzVMUlUR\nJXMLYpwcrG26QGf9uOEMm6x1oJtpi2sM+gKypSQqD+zIoTcSXRi4nq5bA3wF\nkM0GdDxdxePOnZcLegiTRbQ0Y3nZLlXhRqpTSa/08C4bYflkiuGVPBdcBT3x\nZuWoFtI5lOIwXRbtnPqELGFlNT5Moh4lgxBOxbhRpMCmdIeLPX5SiDOWWlw5\nRzijhA3dI3QnFYmh7c06WVlgsLP7xC6JWy40WF/ilwz7I9bKVPMOgm1ia3kd\njB2w\r\n=B90T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFDfSTSrU0SsQp3VqSK1wquM0JgKZ/rGySwHbKOKZGCAiAc8tVR7/qh3yUA2+MuebVhswvBhQ9k3CtPJO0I4yPkmQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.11cf2694.0_1594327430543_0.46094822516212797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.436d66e9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-icon-button":"0.18.0-canary.436d66e9.0","@material/mwc-ripple":"0.18.0-canary.436d66e9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KY8n4Sb9Wyf1e926mV2VY4RnzWxP4bYAsbUBLSPiQv8FuXtDhZHHNpaZsNvdMEObKxUdl1jSbkoOIRHB1yR3iA==","shasum":"d6c927ac1ea959a0071dde91e1a3d54bf6c51aef","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.436d66e9.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KmCRA9TVsSAnZWagAAIbsP/R4+IqHG15bX9TDaJcJr\nXEsPLas01/Wx7iEFZ2EvBX8SvLNp5Fiu/ECrDXE+9pNscmupsuLu/7vZqfX2\nAkWPlR2gwSGJjkCPa/hDC4aVwfZR4wXAFUPqiC3MC6ObLEweaAXUyIDO26Os\nHTEBexqPJ/JpkmxOHJLel4+HKKxUhwnfY9Vtu56FdaP1Tv1GsDfWh2XO0ePC\nOgfd8ZXxGroE90Jm7frnUEIsuopYwqVp4AGyHFntja4EDg25G4KT/tX4FUJn\npElO9UKYT8haFr7kojcITRha3bm4uA48lMlF2U/RtO83DI3nWReJ8ruIBUFV\nD2FxQ7uJppv5bv2sve8QW2f/d4CIAsN8eHTEB/C5yW8d6hgNl84KQXqjL6f6\nVnDwDsrwnFKyq9+cO04E/agxoUxhobOqgIhwy7dBfSY3wceP8nEusk1T2SNY\nVTO7PNfwcqK8c3K28N6vK1bR5yf3GevM4axh0sSdjyQzBaGPo3zercLMFP4/\nJYANJBYuOXt3hWSSQ4Fvs1FW2mG/XgBaUtZA2Y4d5Z7ed67EQ2SWoPeyOnVk\nKASknHE7ayhT2kUOoQ89wsy5LKKA3EdllhhdJPMYbAr3FFLQwcckzKpJ6QMY\nSBOuXfr+wXVg3J/73vR3aJpAf4hT1xcNevWD1OeK4uG6z7I9uHve0pYiuYZ3\nzFSL\r\n=xmZh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWCbd0zluSWxAaOQpkxGUy+oOmfZSVtJ+k0GhWylzyiAiBOkWNDe1+gYIXMSfvy8aPjR7YldXoQKMKEw57I1bI29Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.436d66e9.0_1594327718461_0.8647407244315055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.3a44d36b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-icon-button":"0.18.0-canary.3a44d36b.0","@material/mwc-ripple":"0.18.0-canary.3a44d36b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TI8HZQMzvFNHcTjo+32oyDWRb6/zJ6lQtVYd1v4mKXaABMwF/m3c9iButcS4gn1eKZUbIAx66hmpBQKyxIeCdQ==","shasum":"b12c89da5d75e1f3c781361d5a769b07ed82e5af","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.3a44d36b.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hWCRA9TVsSAnZWagAA2CMQAKGJoHYLz/STxoJyGXft\n8+cwpnDXCk7kWcZ/9h0vOCNqr9D0AtqhrZtNhMo5OaDkVJdPjtztE5Id3hx+\nWL0V+CNZPjUTghZTW98wsdZ2lE1Be9rby4cAP5+uQTkHf8X7RDXBOPi8wgx6\n4IQ5oCa2ioROxEIDBDYs6G5gqHRXb+ZGFVDuI/rceK/U2YfwmpfhdCFLUqRB\nKkINMLUXdWOIew7nRJvwvWahP7s9mB0YiPmqLr3w/wEXETYDvLu1VoDuGd6l\nNX/hgmNEfetZTD0ENl9ivkzpsPDOGPj1jOC1Rg1DxUWhZ0sK8r+wayfJZmFC\n7D29Sod7afr/P5fxF6U3esdEeoArgmT62NvitV+zL9jn11oJAZ/an7l5mneo\nZQ9bWPFWVrDvUQ8QuTT0sQuDnEF7q6yIfiqgsI5nuJsZMyM+iS6TrVOMD2N8\nU+YbI+isPgy2f7z37faH9ZaDRiwZi7/UPAOcjNlunJaliRLCDbgcmpLux4CF\nngxbjste03r54GbAuiEyrib6NzwYulQ+rd3XvqkPgnb7nypZl4U5Uo2deNO2\nzhtwJzpuAZcCm/58iV2WpGWs6eQ/XJXoLDE5dLKHwXnBYCvVMPO4TVcglS3g\nXiLqDJVRx+LIx2sslZwsvknJTBo08NHQcvbofv9tbCIBs8QRNfhtOhPHjM+R\nIcjV\r\n=vgIh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1VJ1nmcsi4Deg2WOCd5PaAMDKh461zl8ho79Jt3A1XAiB9ta8EYKz8yLuUdtn5asSNWqxP5xLlz9AWRsLz5eFzEQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.3a44d36b.0_1594341461673_0.5201290333544395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-icon-button":"0.18.0-canary.ec11ae6e.0","@material/mwc-ripple":"0.18.0-canary.ec11ae6e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-K2HNHWzO/H6iTYIKaznjrjZY45J1/7ZhZuuOxakDsHg7fwS8J9S1PtGziI3hPx38YTSg/FzbOn6QDG1Fj9PBGg==","shasum":"87258b8956a8b30c91dfa6df785cb2d2a1818bd5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.ec11ae6e.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsUCRA9TVsSAnZWagAAK8AQAJ42icslBuWKPsx8hI9V\nHs7PCK6yQd5/gWFpV3fPtRpX9fU4IMPbWnYiOAD78kdUl1DzAcgKEkNyTcxJ\npTdvjGmxVLBY9K+VSO70aD/NOOR7uxMDFjldxIT1475ysBj6gDgXxhZTpBp5\nhcRprggI3W3U5+Y0CTsINlDIt2GABFtD3g++4rT7hWfqoEn5UPx97oZuLY//\nwalXWB35YcfyYbt5wBBk3kuYr2IpIREB4Elsl5h034pNfFqbH6ueeW6sO3pU\nOK88xiQSeNtIdj1P8ZzRCGAjEDWnPM1DuVoSLzluKF7IvtbPpcRJGtxKbgmt\n/Dqwpt9w8Jgo6nHfA2IqPb9SAf0cG7ePFGiUjToAYkYaqtsMr57qBPRhSEnv\noe2lTXELW+p2l2baN0Qx5/Il2jjGln5Zcg1pWZZZzUdXhrPTDq7WdX9cf0O/\nyAf6RPOdOoVjPHKIySjsywK/ho2oL/HIRSldRQ1bbqr89qWBOddegFF9PHN2\n7KoXawEO/yBHreHBzX6CyJrYBk1jK0vgpUUFjoIl/VyPTcJ/azGOGDtek5q0\nPcqLi7KUTSowbNUJbPTsiqbg8ydKAlakCIlVZYltF0arq+rpWIZ3SCMiN5po\nk9zAOCv15npUH64OEt8i+lCqMDPAYm4gGyrw9nl6uS3ZxdJ3VgR/f3PMtSQ7\nDjvr\r\n=Hw1R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfu/jVt3VuWe2JPpsoUfS4L2cDvBKCI8T3NUUsi5/5lwIhAOZ/b0uJXRUm29R5gdRoxuZXPO6CZdAtzNxfF1oYbX/K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.ec11ae6e.0_1594403604212_0.13807791239132827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.17f6cf27.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-icon-button":"0.18.0-canary.17f6cf27.0","@material/mwc-ripple":"0.18.0-canary.17f6cf27.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hMvhc4zMP9gjTBaedUJNC/dtcfztwhd293tQP4ngnjB7jyKEu7OB0UcbGzgLLs365geKoB28OhD72U2PL99R7g==","shasum":"8d57b48e869853bbbff934986de9cb3c9549afe3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.17f6cf27.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRkCRA9TVsSAnZWagAAAo8QAJsKWnaccgfuA945K/fI\nghLAGUf3t8rVwPwvQSMpyYR8W6Ct51PC2NHJCpdWS6YuqdvCqNeLcustJJRU\nBe4L4T7aBtxOEXTAyExks3b8IAg1qlrjKn5djUyjl2Wf+WekgyFjk/vpec+Z\nNO5h9ntIK/i+1R+NhnC6JJ8+G2s9hCUdRf76XLOb1z83ltDQeNuYY5U8VLoi\nu6UiUlzbV4XyG09PyIzfTgOkMNuaXY2hs6V7RlnquO728eYoFRWuIkSyocom\n9Hj2uIQDBUnZKqbaKuMg3Rio10ZkafvKnLCzwsm8cX7mx7ZSEp640KlOyBg1\nxRb6AY1XtJL+RyHluVbLL/0zpTqsAjYjkFBMvv0ii2sjxN4X4l2ICobklJP8\nDB++7WKDaUidJ62y94lhicZ8xUeyxkDTbNP65W5EYIg8ybLBuVcvHsU4aMSA\ni5uXvQ9zdT03is8V39yedRixoJF2jbTaaLqCBiMkc1d9GHgjlxd94pkYKomS\nTZmKBIKnerOrzPLKeIGpfsPdO8q3GqCAIRJq3/dQx3yRuoK+5kAoDppOTmMJ\nsKRYpRoq0AkhTtNgSLiu9Rsf4UwVVVyYwhwruO3yLBAeMY2D21jJekOa/WqO\n1cwBZh+neMIEy6d0nBF14H7kRVRgSLe5Tc67xSnXcvOqsocnnyrRqxCNymtF\nrY+H\r\n=eP8y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyNIrKi/qgkl0XKgVa7doAc20bG0if/M+mEnvF0yyNvAiEAml+osrLkjFYMe22B4gm/+fJGxR6gFnom/TKO/Pk6bSY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.17f6cf27.0_1594405987922_0.8896877514926456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.efdfbc21.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-icon-button":"0.18.0-canary.efdfbc21.0","@material/mwc-ripple":"0.18.0-canary.efdfbc21.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HFakCF0FERnkPceWy230W05zMv2qK2mHKFtWupR15wjkITGJ3KO5CaK3U1e1/5hP+kFCrjejMvaTBwI0ZHxJeA==","shasum":"284d326cfaa6f24cec6fb3b09b9059b49fd819c9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.efdfbc21.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcmCRA9TVsSAnZWagAAueoP/iujBNwsLZqKv9LGNe1D\n+FBPS9aWF6Lz1JVxkHYhO/CVqYztq/v5HmSZ11hhLqdR8nFwOKsMlGiTwkKM\nRJlz1ATE9l4MbwWs9LNDT0vXdDolRj3N2dS/FEaf0DXxSVfK9A4xsuERhfX1\nwoE9RAhL8h71oIqHSAscXCqyGQkkqAfuV/SiTF2Y30UZWQBrClNL2PkI5OrD\nD3UgaUBRbEoTsMBq0beLdYlVTmjHIDD3J3chOCRNyIjAuiN53zEIF/UlYEZQ\nGFLaxB3y0jRGKiFnEGF/HmJfUqldJX2JycAlxhDQN8OSh/kxwedD0Xm+Mctw\n6Kj4EWyz4Z7veKj667EQvF0bziyXolJzAqpMdutNQ9Tu03rHjBVLDH1CkU+6\nC6EIAx0RAmAMFyS2tVix7tI1nlqmwCxOgTKx+VEhq3ISqk1XeHHiMIZG5xcm\nRs7lxIX1oC5U6rzw/OQ7fB3K00SgumFlt9pjJPNphKytWzyedvEl4x6C/lFN\nTu7bUea6KaY3sKBlSaOnBti87HuKsH3lTVTcZ5lqMGBeJkYZFW2n2X4cA+zc\nt2/Bf7SIEzwLx0DJQjMX36J7V68iBCCCTEKICdEqTFl+u49/btiETDGy9Jt3\nqG2KLVnvL3ZfFTBKGIQmby5ryXBkr5CdZO6goXqddqckCrYxGPYYvm8AfSrw\nR1st\r\n=+sKG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD13JTS4/SWqLRlta7yG6T/02H1eGmwbXEowlpxF+tWFAIhAP9+c8ywdQ5MCCAOEWBO+H6KxCxTOkAAFq09iXXv5G/b"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.efdfbc21.0_1594406694317_0.835039592961788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.bae4339a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-icon-button":"0.18.0-canary.bae4339a.0","@material/mwc-ripple":"0.18.0-canary.bae4339a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eWY/ZYqwEpPJmvCmJg+2MuoZumzfmHZd9ip4IWA+mr1mjnEmAYp/xvJmWFx9slT/GqgykjP73NjHbwU9S9UWBQ==","shasum":"bbb4ac8b72cefcf08ff93c3dc0f7dc175c3897f7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.bae4339a.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBqCRA9TVsSAnZWagAAek8P/34xvrXr4XzWrzL3kiAi\nKIv/rmaaBe6NK1yWtv+6BYwtxfMlgv4QT0Vtrlpi7GWeW5LFuW3C6SrwojpX\nMe1qpXEPLBt9x2WCZ+tnn8gN+k1/hIzFZmG3xIZACNnJmyQ325xgmD4Qfr2Y\nhTc+VUt6kAfHwHN8zPSLxqa+/+kPdA6oFOfXGgYSA0vjpUdP/zN7ujjoWPYk\neM0Z4fBwai7kB0lZUaBATu7C38BAEy+00MHI0pjoCEkqOq8D4NFh37ngj1Hd\nV9bVqL5g9ArB6OZ2j2c5ieGVCeo2cBdT+Ao0DTRkQrg1XtbIyWWOQ9ru3HZg\nlQUTv1uvvbka/HJRu98B4iSSPzAjy7aaDJZEgE/T7WigBkEQMs0yVFuOapFz\nsjibWkRgLyM5/c3QjZ5FniSQTIm9HdO494n21SE53OEMbpb9Im4JiJ6UHLRV\n6igFx1a8cQQmzRVfCb0xEut0JsZw8OEzd6iCWkXgLaJCkq237kEBT3dW1mq2\n0iktK3pqFoAhvgIjZv4nmMXdfoRnADTwYGgGF7wT32PR1EszOf1eiBi5l5sa\naGaByE84ocRKaJ5lzwQgK3n3doy9heprS7dKSh/5zWHk+St/LatzudQoe2Sd\nXCAjZ1Bmar1GGeW54avZDOo+Zic9xwsSk8eTsIipNQ4IlH0Isc8tSadFUIrh\nn4sR\r\n=RNzg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqXsXZA/qEwnMveXfM/bNeDBUb+QpIhlUI1Q5jD9V86AiEA/gD66l4DPT191fYMIR1qTLvVh8jTpiMJMVW1fu6EFoQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.bae4339a.0_1594744938252_0.07598711353149334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.28eac13b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-icon-button":"0.18.0-canary.28eac13b.0","@material/mwc-ripple":"0.18.0-canary.28eac13b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WKQRIvLGkqFmX1yLM6lb5N1prAe+e3Xqb+MiUQmtOrND9LMuuN0YaXHQGL0TXkFH2wdJzzFPXxfoVnm0yrbrXA==","shasum":"1cb66ec43a2da2563debe53c3e6ba10ec33bece1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.28eac13b.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBxCRA9TVsSAnZWagAAtQ4QAJ1KNyCt1llMDnJbiFI9\n13bCGifo2fomzMZ681+bW1skp9Um+n2T/y8kLtVWISgBquktj4TGMdDcbifG\nooRbxZegAX0fi/ph4S8muKnnbzbMPgnFY9IqjcQUqE2fz6rtpxwFtQnW70yy\nyEMGoSd2B3tjiNZMTlRauBgbsWHbLl1TUit+tMApPGFenqgicPmEh0wRVZ5y\n6xAe6tckSlunNysz9YWbdK50seB/6BvKSqPG8gjxqPQGsWGaE907CjLjriAw\nyGJObj1r84/rHp0VGFEBgaqlGcf4QUhO4p8gVKCN4uU0AMiy+hW9UYfKcKRb\nfpACdjTmByJxQ55Q/F9HmzQ3vCqtSFlvXtpp4DvwdILBrVOje47YvfKfThPB\nzcvZ1gIBWdWhGRMa+c66u1y8Kidgv6QKmF1PRkXNL+/+1vHb2rETWXywr2xa\n6j5S39ngvAAOxl3wKv+f+dtxL4cRnAzU8JL0c3Q/lWlUbLPoMeRu3GCkGEpS\n0xJVW93ixaDCcYwBPVflnY4cHatPjfodNDq5D75VWild1prlnHxutU4O+IMc\numtIaST/6R0V7tJ110/KTZkpWu4aYST4ZVijh0ntW0MeaDoBMRAZKEctZ6+H\nHV8mNODknPltILocWsgUsx11xUf2gnSXfoZBa7ZsFruK8I4FHsjCgpAFEa35\nOIZe\r\n=jmY2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdu4OjMjZ60qpD2TZBmkBJygjxz4waGx0dEqgPGhqhpQIgUJJ7XAUdLDaXyFdbBsPVOkna/JtChdzrn3kmMLEklq8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.28eac13b.0_1594765424418_0.7620631903729711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.44966b65.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-icon-button":"0.18.0-canary.44966b65.0","@material/mwc-ripple":"0.18.0-canary.44966b65.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lAB2v0hMMyDSTaLTDvr7tGocoShiZaKxuy8WR5iDPP7dh4+2M9w7BpV1HAoEvEFz3O/jhzdfRuogKdUIua1yeg==","shasum":"75f9844b9217f957623e0526eb80236fdba40306","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.44966b65.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VeCRA9TVsSAnZWagAASisP/1oEsQJxYTc06YtALaIa\n1bWQbEUiGh94zCkWmISYsIxjmQpSOpAxtsk+sjprVfRPu9jJLFNrXrOUV6Vi\ngl0SLy5oOc6lSPKCPEk+/ORiIsu9vuYU9Zc4oASR0L+tzAWKRBEU2fAu2fDA\nr+nxsM85cTmPCEBW8jH/Y/JnMm3pIGrpYO4bBlj2fygEBiM0Z4jvRv8+ohGg\nnTPJdmQ2AyT34CBsb7p07ZG4EkWIxZO+Fpr03hWoq5gpLdaMyP3+FGA5alqs\nUij5p7H+BIO+E/ouzakemUn+p4aCJplzVkZR+WRH5lSGkhq942uHO2gkObm3\n0uEZqPZ56dAQptkgHxSRP9cLHsmbdQKcZL0tMqCnWwqX2+xqJfLQ7Dy6oJyE\nTMK2hVJnVQQ7OWJ5LQdr/y0FpdSFO77ODhQz+JTVOgbFrbX1tIKPDHIOnCkz\nPrhUrrOy4Q+ZxcvTMqs7rT5DQAwEe81IobZUu888FlWOfAWIl2Ci6Z8KCfBS\nyWAh4O1ZGglxIQ208wBmfjbzsyxKbKEDSx6f2TI1qjuRxQBgiJfcQghsKptd\n4u0Hay+EtvE/43AV4yWHWL5PT3OQ8VCja5wgSjB2FacYK43IIHI3KNnzzb/g\nqWZYBe1j3yxAOLRDgkvzb5uWKCdJgdlQD6wbzREAoTxaJh2f8esvFqCxI+Y+\nOnRI\r\n=oHZh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSznZYbE15t6cThFgljx77MSN4T5ciMDyezM9/k0JrkgIgR2GAvf4grtHu+Hq+jD/h9+amw9K+rm/IQSAkyttQMbM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.44966b65.0_1594836318416_0.4546265814915498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-icon-button":"0.18.0-canary.3ef0ef60.0","@material/mwc-ripple":"0.18.0-canary.3ef0ef60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TJGzLEJbr33/ms9aWnsPI0W9yVoO1itCTJuqYtO5+zK08Wkz6frI/0hnSan/NXQz6UuI74dU93e+3HtxUVIaGQ==","shasum":"68227ff2f15bc6d907472a6fc15ac8ad90d6bc4f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.3ef0ef60.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZqCRA9TVsSAnZWagAAeO4P/A7VFI06CuunEIFD7qBo\nA/WX7B+AqdcZsZVPTKAelvhrelPWn4bGUI7gSQr2AhwyUQbOfF6sc71UhkLr\nn0hBNduYD8ZA9h3GWBy0CiiYxxWkWnmyXHUUXUdbcnJbHyhEH8iOpR9evJTb\nXo75osPbneraxMYlpjFbVz2EQ5C3mMICDE4wqPDhVitTsPe9EIAACbcpPc0j\ncbzhfWfTVP6JyGXqOkk5uJ2v5gQ0GtO31c5ev5LFXvb9ma8HcXAhmnWH1l8X\nYpjJLlWJtXJec1VzNH0PwwHQ5yttbpkYdm9KuobqAviQhu5s6F6IP6l2WpxR\nbNo1P0KMevW8G23v2c+f5ArZTVTXN62KppQH6bxax5dzlnfuLgHDArh1jVno\nkC7YPMYfG4A9le9ODBPfvFDYl5PrwZ2jbuwaWNEu75IIRhIblmQIt9W3SUg8\n3qaGeHIySGjz+WoHvGHYtrdx9PlvZtPADhlrzlugmDNSkuHpWd+9/99IaXWe\ndnf+pXaog4T/N5JMvtIZ0YEPb/pDSBCBgyTdFQ0PEDfLyPkmCuJLLHOXH/XT\nuY5Vzn4F3I6ByDzIYE/K/AEubU72qCsKthDgv7iQ1AyxGintN5fziV17Ixq5\no7WERO5BsgyRv6VM+x9gZVgaMWt9moMnEA0L903S83x9sgQUVl0GARuXSAN6\nyH/C\r\n=GeFR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwv+d9LrQPuC0R4PlMOVuR5zb/w/77SSoYcAzzdHUhlgIgUskKM9FGZnEaAvM6D5IxSN9gyRb4vOXZ2yO/XjL6CFc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.3ef0ef60.0_1594918506048_0.1942516587485068"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-icon-button":"0.18.0-canary.fcebf9e6.0","@material/mwc-ripple":"0.18.0-canary.fcebf9e6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Qp9QkFtR469rShrnnbgq4QG60xWmlpwgCsXerMyvZqUcxRqocZMjww04u/3ymcTm7Es3xWn+xr5qKcVo2hQ7mA==","shasum":"5c3241ae7240d1fb1a1771b701f909baf8cc7a05","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.fcebf9e6.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZ+CRA9TVsSAnZWagAAqiEQAIBTAH5keke9RdUwM3Cp\nSeTAa3MvBgqK5+h3OdYB5FoapmYn/53p9sa68UXjUvodwNFw6TnxbbAi3Iz2\nHXO4rzDol0HEDEAmUF3WUgSJnrK7rxTWhkf0jsJusQ8FIe/Fl7sTvoaJPWtE\nw6U/y1hHa8wyGyXBUYwVutOKORjNLtysr0V92RxAUfm5cB/hvjJSwW07kYXO\noGwDTq2V/3oBWy0VQXyh4Zb1/3if2JxID01nrEvYcHxK/Z1C0RlfoFNasKqH\nrUprJfm5Eu2QlCYTqLn8SnQ8DJ3Qisqssp8aPV7EuSoIJ9oLwRn3J2J6/DGn\n8xtNGzZFUlcg/mr+ykb78pUVKdzC/Bj3mR9D1fUVnqzSp1IwJhbP0om91ddT\nToh6vVfSBJB3/WdMsN47YxeFUe1XSDiuJ1+1Lm4Q2aqwvpqqPibNeILFxTpH\nylbeRE86ifzm46qINoE5A2EKlVLPiBAhLZvgdgTLOH5rObcU4kO9ouOOVgF5\n1Dqdh1rHswnjbsrVfkFZ/KcZ/nsHROJg+mlDqAKAFEFpl97pgm7VuBI8Gq3V\nY+4FPbQJXQTLt+zTOvX9f8le4QnhoomjSAu8aDG731IqB8Odzq82heTRvELw\nEh1seuO8jf5DG2h7ixoVqsHc1t78yV7R1FlyMDnT//R0T+XXvz8a4uu/gWCP\nmNFk\r\n=y/Ad\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/P8yW1b2oyvPB5FZ5UZ6q7Db0GW+2LmPJ5O2bCvgRSAIgUelxisEP2JxqdCobViDXq3xuG8JSCqxJdqINAdDVats="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.fcebf9e6.0_1595270782271_0.06750851864156382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.b6a772df.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-icon-button":"0.18.0-canary.b6a772df.0","@material/mwc-ripple":"0.18.0-canary.b6a772df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cJ2EcZPbTs0uaAG/cyoYb6ifyQcQDmPI2we5dC/3hjh9sAqUvS+KGn+pU1yxVw29gMprKhpypAwBu/iBswxdXA==","shasum":"b835da0cfe026e3b968a4a91f74d5e5d3936adf3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.b6a772df.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7dCRA9TVsSAnZWagAAl+4QAItlOfvmFccsDzuscGTu\nWltLTA22NyOt/N3kPGhCRuA57Nd2FjkFh+sm8hX4euNi/TQ8wozCnWdH/eds\nX4ri2sYTWkXPdNQ2bp1ipI93nHcFkjYsGifUvwsYKKIexVV4Lx0GIHhATbNu\nx1fgM4JQVW0wjK3UTQd3Q+uLD+LTtrdcoj+Bm2lczvLVIA9t8/FgrUZIUDF0\ns5Ftph4diRsIwM9jIGb+3NormriCmB1umvgu1bPrFY8G/Iq6VU3DDFiUIjfp\no1hzudb87zhui/k6xryTwXK/GiymvYzKzFBI2PDx8Y3OslaI7KRoinNme0nz\n5p7T6gy6iQvngMtU0Fd+ly3NdQk4In0uWTcj2uu/h27RwsS1qZI01SCv/3xg\nOc63S1tDm5T05XyfORiPwrbzkObq7F4qvn8TMCtBBgME30DKPLu7wMVZF1JO\np5ge3w9CYuAfSi8CMdQvdpWdGnwZx5v7LOXSxCwHfgeB7B3lLMpK8Xcguqmv\nsU2zMK3PYCZtdEVCraCvsF4X/v3m03nj/y7h/sVzzLENXlmrjedHorZObBcy\nyt629GLiN0hEct4LeKAPzhGPZu+BL2f+LBpeBdIGnA+KndbvpaXDOfvedRYd\n+3xi3ZRHOpy/942OUjcsDkT6SgtWYNiyxyYFpUGXxNkASYD+Dj5Cznf8TRuw\n7+RR\r\n=03qK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnKUPZm/eTTZfARxB5Ea5IgxoN3g96SDDVtg2GiJT+2QIgRlOyhS5eX55aEDkHX2MNPZvDqKPfv3E4BlK9w+wzIqc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.b6a772df.0_1595285212837_0.4532445699120018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-icon-button":"0.18.0-canary.f6a6ca38.0","@material/mwc-ripple":"0.18.0-canary.f6a6ca38.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jQna8aQ4xeR7VKqRTMJugyOv4WBNTI8nrdW/3VTkKZfcHVj8TQsqjETABqIUPRbzmC6mOqf1DBYqydAofyAI7A==","shasum":"ab6c9535b6930fbf4319b8812eb19fb7a240cc4c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.f6a6ca38.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqmCRA9TVsSAnZWagAA+hwP/1J3bMcpP0RU3OaNFKZk\ncm5ixsW2JfDk3ohWszcQYm9qAq/6rIUvKs5wNo2oEt2qDoWd5Ln2xi9jLbkP\ne85Q9k22P6/3ZvFS2rjEyNqAz5r7EMggy6f4U5AJup2JPen4payP3uw8TWFp\nbOLjEbO2bhxpFeyOqMHT1ernQERuCVVrKMZnnbX8aou06L9cSsLjrb8IsHX/\nBliRQAM7j1ykM8tum+aF/araQY0q8KdBGNAX4WROlTkyrrNR7htoi8Z3WPvE\n0TK0CTChUzbfpYYAlOI1SrghnGOEQ0ubbXKH1su8uLh7+eK9PbMK4j8jh8zd\n1Z/TrJqdETxIlBKV/nHjCXbE/NBQcrMfLkWFqnlgnp31B5uusKFp7GbHUw8R\nMesJmzXuqGfNDch8EPweAy3JofKztj0OROiRFe+bABoR364+52K7ZH04wFfP\n5eUhvJRfeJCfJrZ1CPU0pYI/pEjUbpQhkGakSfgVnGV9+BOfxR+ieAkyPY3q\nGB7Ln0iMdnbJk0gcc/2ciAzugygtaLb90NoypvRcyG1kOUWeMMk0zU+oG/jx\nEx3Pw6Tcnjj0IEbrb34jh37Hq2GdJVilOoMWQhpNW35Dx6S8SA2YhElsV+LO\nrU/eoPVZDEgegh9XFffmsfKSx/DIWAIbTVnXzpVDnEv4iyzfjgelJvXqmbzE\n81Gi\r\n=CeHJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUz6KUa3QryKVz9dfqQ4YPcDpZtOy9yMzvfS6Z6q55RAIgW5QKE21E9TD8pXV6wGgkyiBERtTman0zKscadB0cDlo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.f6a6ca38.0_1595349670325_0.9497021350249322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.647dd6b7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-icon-button":"0.18.0-canary.647dd6b7.0","@material/mwc-ripple":"0.18.0-canary.647dd6b7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XTDS/wtunfd+YSySv4+0zxIn57ZNVdvS71nRb2w82sB7iPJVpcYl0wDIXczKY8Lq6PpukDL6njoV9EZwa/tq6A==","shasum":"1f652bfa14713d069f4d80f0ac804239078e4d10","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.647dd6b7.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzeHCRA9TVsSAnZWagAA1bIQAJe9RgOT4W1CfyYE7gjB\nxPhay0q4MqmtK8I/ZAs4mjUz760IAxOM22tN4zVt4kwz9eN5uEC1SL1vathz\ngSo2umKyAEWEUuafXg9lanei8d5j7sxyi+9cGG2uf+kHmzUnswnkfIA8fQXx\nRHqTTmJ4aYYz/uBUk5hqpOo3kUrfAVGVfCh++9ubMAFqT8pJ9XSdVPnuJuE3\n028XiFfY2HZ60ax66A4v6fXMPY3E/r37RyzC+HIb/MfvcqNreTCHSh1soujQ\nxaI6mEWdhYMf9X6McEMvavom0eB+JWs9oJtcGtURRVdryZldm1euA/RrLWa6\nLoFCJcYM7kvXmbXoN+JkfMfJ82t5LnAZB+cH53t61xkFuAVJsfIpVU9cD3nw\nOYrUfxoYp7xhBTTrIGoOo1mEvE5UOMiKLrKsESDFREVTn2LRobuq8VaupBh7\nBbT5CZo+ErBO0BVo2zvPdZLpsV/7yHbCg7BjD1niMuN0b8rwoKV8LfqLD93J\nORUyJmftCPqSxqjk/bTGuxr3Sx0z4E3q3gjkK54Tsckw1lpBuuheEz3B1BO+\noLadgoQxy0B7fq7G5WTYYB+6c+V1RBZxJgkScKiPAAHiz8L/l1+xtNT5Wsaa\nEWbzOLajaIUyDfLAq+E4MPhxl8ZHRjRcPYvWQ+VIwhSmk+HcxDwk2PWkrTRi\n65IC\r\n=Xj9j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMyDH8Ufbd8Hk41dMYkxn6Ay9hc3BbogoJ+UqAZfkcuAiBD58zS/0aLbwo3oRa6RoExn2NP3Z56xq5ZkpJiA6lK8A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.647dd6b7.0_1595357062723_0.6936097977477589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.3cb7406f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-icon-button":"0.18.0-canary.3cb7406f.0","@material/mwc-ripple":"0.18.0-canary.3cb7406f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1CA+vIOqyQvXbbcKf1SKkGMIUe4hEE1NaNgrAoQ8XTdhZUB0yrcKUrlARd0caxRmo5+FUaKeVQp/1f1Zz6SsQw==","shasum":"85a67a761203d90e7849b85854af14958774a2ef","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.3cb7406f.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwwCRA9TVsSAnZWagAAri8P/0TWRA9NrbUozXoGZlSd\n6nIz4U2SajfDTEcGmcZ6rz/kiwCMl+tSRJ5xEdpKcrpZewoBx2XsoF1mdhta\nyYgsLXYOh4hr78VlPIRaQwlnDymBsUCCQcCQkrwpC6sZHwqfa+jdV62BCWu0\nDUFguCLer8mGqUDddHkksZuEB0n/F73h2YbZ6A2v4JpavheV23UUiWBQe0Ow\nQ9hSEv/WbSSnUNvBaqnnYXSjd2+9tZ98BQ25R0vPUls8Ll6/bPd3zgFFSy2d\n+f/7ANCw9I1MT1nfNUl2L+HRCVijsZUVeeHOJjAvixUV8sA7S3C8yCCkdBJP\n35ZjmT9njiyolib9ze1j0kOYY8AS2wu1wfLd8l+ZOhYN56NMjF20o0NcwvFu\n3elBnNIZFH49VoqPd2Sq/e5Wk5SyNRnKLrDph/JPkWjg30mIbkQ3Dg5yFdMq\nrdMc1JCXnO+WPhvwWsFe9y5qzsCD14n3LHTzfuhraVQvrloWWY+Af1Wwf++k\n+sjvgZv6ml2jm8XMGIwd78VI9wmUPJ1wejiyyRke/zllCiX1Wt+TEfsGnPI4\ngsplkGc91uBZ7HZdXgX/8UwTBRuvQ3Hd///KaiRXu50UhAUfbK1OcwfDepe2\nVVKRZoRPoffI0xouBDeBlTpX+gdxUYXUId7TAIJjBkZYvuCn+LVwmiV+rfaO\nAa80\r\n=wlVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICc5BDmlMxtBvm4Vja6cOb8HZS1JZJCwSApBZ4YdfEN/AiBTDBkyHbDW0Vx0Ri7VDvyn3vzn+XS4qJ1pyFMvjIZ8sw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.3cb7406f.0_1595444271152_0.40548160186213544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.5717a5a1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-icon-button":"0.18.0-canary.5717a5a1.0","@material/mwc-ripple":"0.18.0-canary.5717a5a1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6nS/6t4VKcYLify+XCDF5ecLFE6rAdSmMDtgndnz9Ys+YCF7n9tblaOZfb/jjUwgXTAmMe8MTRW2nAawKSqprQ==","shasum":"b7bb9fb7cab5914191fdaa49fd0834348df56b67","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.5717a5a1.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLI9CRA9TVsSAnZWagAAwMQP/2ZdMnuFh3Em7NnSCvwJ\n75dDa7PUEavxGT9L0lr8nBu656/u8SdML+0e7w6Y1v6QoA3INsONoT4aK6Hy\n+kZQwbY+ToNQPkDk4S4eXD7i7gLornTBaEKBr2SJmkMgqkaKmRwc/dsAAZrY\nznsRAx18oQyBFSOYxCTCKM9cCkmJ11+Pg+2TbSExBZPKlBtvhBEVhME9RsZm\nlKYtk61yH5/l441HMeY2gSf9J2cS4kG2dgRYE4ZatNY54aVN1ZsjfZZ+oguL\nWzl4OFquOE663nQfUSCpd7oR6nq/Wpv+cquowIYnFncjvjapWyCHEkYrHhAw\nIXDc/wM7zArPFsEgFIpu1hGMUtRZSPT7fB3kPca+8syRAvm/C0YALP6AgqY8\nR7itDfzaV1VD3Qw5AVEMP1TjcfmVF4DLQEgv8JqE+ijTb1i1aif4z64lk4HX\nvDrX964Y1CatD2gabHJQZt8feoIuknUoYh75ydH90wZIkeFP5lrlP6nKTbBH\nEZx9tmNZsALqTPcSanUkBIUZJLnXbszSCgjc4LTLlQJu5hKMtIu1tSOjSn0P\nKQMSqlkGCB1OO1WClgLx27tmlmVqwFamxyPdSmSWtLPKSiU2/jkMp9YkQlFl\nnIWpBOR3OlaxuBa8IvPxHxt2gW1fSKC+z6W3XPRJ7iNCMhSj5bjVhNBkng8j\n3pWw\r\n=/6C0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuPfWuS3QWqx0e297j5/oXT7GuSYfq7NGqjKN2WW9mMAIhAKXGFGAHbjZeevFkCAVMtkZiwY/Fffv6wx52JDcVNhx9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.5717a5a1.0_1595454013048_0.008536229827754038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-icon-button":"0.18.0-canary.d84cd4b2.0","@material/mwc-ripple":"0.18.0-canary.d84cd4b2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pifRyxu/hJoSsGcEOFC5K6D1vbeotiXMia9uyO4lx4B5RsTpZFjUV3+/eDn/bJWyAfnV6di0W3zGOcGlcM2lqg==","shasum":"c235886abf3c1d869efdbdff5c9748668bd7c749","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.d84cd4b2.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLK3CRA9TVsSAnZWagAAtlwP/ilZ6c7xrpSwktK8saeA\n0vG5YCLoWKPo+x/mBceFVLJNKlW/nr47SsdW6TNiS1x50rQN/L5SFUTzS3pe\nCzMzE4xqHJaPwhBrlS5Awh/J6fplKMLI/9l/5myO9tsKXBnx4o0GPVe/thp4\nzJhPgtguczbzXTobALtbfezYznzF/ACBfvWu/2udpyWmO/CsFrZhVRdFYFlp\nLzPdet+TvDkaiECU/jITQSvgNjfrTYSsVHjBy//93NGJPYGKYwvSS9MKMgeE\nClczVRbA8b9OPBQwIKmXSNz2vVOEyBf+bLtWcXugVNQPnBnu3iK7hU6p96HP\nAa4//lsyN/1EhcTTR140WI5Gkh7kwGSqGq5WDm9dvccl5f/d84lr+5AjngPP\nKW1lMJQc9LW2ykb7ZBiMoh1kElbiNGW/vBU+mEzgutVBVr+5jTFqqfwQt5AK\nuoKV/6G12IFfdAGW5478/fsz7FVNCDbHX+1nAOPO1XXmx22lWH4z3j1pvdyc\nqqcL7LQv1j2gHCaYyxEJpfw+xfyge5fn6Vy10AJYot0eHE6tTFV/sgDTSUfZ\nC+mMJUGKbVuvpOg9sfmjM8vB7qBFlXdk201ZjZ6imVsdorHqGc/1y5jX8a5z\nwYf3bIW9pSQpaQhkj84ntqs4YM9J1EKMc0bM+n7BeE4X8ZjqRZba6OZFOjFQ\nA7Ni\r\n=RTuP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZUAHW8EHwtORdRQMqXn0zyLb+7lyZ2oLzqgxU6S+PrQIhAK0zp3PkVFPFm+VPuBv5IGCO+ybF6wZmHHPWF4poKEkc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.d84cd4b2.0_1595454135543_0.1976942697504025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.f279e7fc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-icon-button":"0.18.0-canary.f279e7fc.0","@material/mwc-ripple":"0.18.0-canary.f279e7fc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kZ1VWpfwZ6bn4VAfZsFo70XKjR66cPYbQjAiEL2/WyFcGiGUAlq1bR1Hn9gBz6SwpW11JFK/Safnoglf2nd5gw==","shasum":"b9bb998524b15d6a96d69821f271c5dd3b797783","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.f279e7fc.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLceCRA9TVsSAnZWagAAe5AP/0HoYqT0oo39DjmpTTCA\n9IIbK9xS9LP6ksd7AIZJEJuGO4qmmzbw1Ix8lsquKSHqGTvkGSXdd8S4QlNC\nCOhp8mW6xidz6IGJ6pVg3J2zt4ZGHCDn+GDmvAV1MAlm4dufN6O+Bt/JKOaP\n5yTFnUjdbCfWRyAVUO0wsbmNC4NapkxmdTnQkmg88WQajiLXj2EKQanr751D\nDu9+kxxSgY6/ihNg6FYOkscmP8UjXzLFiiNjYIqlEH5KfsSFUXebZ9fotArv\n1CEr3WCyaJwVVh7IrIvV8kDPzxR2MpfZ0eY+b7BFGb535aROvyiNe4ywHNuA\nxlDmf1f1435KkXycwcNLMzGjTN6AVzWyEdgykvtRpaAWjzJT4Dk6lsjqFkbN\nZ8BYRlPpgSmguJCvQr+c1mufT4iNEH9+xvZMCznRig5agT4UqY2xdHHo27M+\nzl14F1zRR/04ZlIUb3c+AWTPUkTMZgrge32yeCtZBoEZi3doWz8cJ6tIubAR\nP7aZteJ8OykOkv2w//3qG1J9yX0edCAW5knyoQZ08y9BZXKTeOeCSVzUjjfL\nU47keHR53VTDhZ27M2JdMN9ihyJ6pgcZZtRwTdrajlrS0Wo2+RoVqXgLoMt3\n5LDhqjTecBo1fByemV+5L1CZxFuWWFllxxpFBXkzUMqNvw5Z2cSidtM3zC1u\nyNpt\r\n=CDs/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKQIWYEcLgy+xbmftJFDb+bC63jpwqcr1wMLcgjzVRcQIgZDTUImNXmhvS8jB5q3OQsZgXYxzt9pRlMmo8aMLAhNQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.f279e7fc.0_1595455262496_0.8604827637924184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.f181e3bc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-icon-button":"0.18.0-canary.f181e3bc.0","@material/mwc-ripple":"0.18.0-canary.f181e3bc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1oMWZT7rVtV910lghFSwsLIBvS+zelKPLcG1pRDGBQaktjTc4IkerB71RO0+tSFLaT9nvndJyWdq7dJvyMC1Rw==","shasum":"b8d7a5bfd4aeebd079300447ec8052675aba0493","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.f181e3bc.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeWCRA9TVsSAnZWagAAQYEP/jNzLVowQtCAS4AGPw4Y\nO+DMF5bgYWRw23nAEQfjyIa+CS0BXDeZFjKiRk5ULm5Zw8D5d/TZpuj4aWda\ngGPtjK10vVvqkAO/OP0cY4ndjouGeiHZwp5/pmv8y+gxLgaCNgHuTyZCOKo9\nWWzgFTZRTgDKVkRKrdW4s/y3n9T02Cb7v5CURTqDWq/Vbi/kUguUPWU3R/7O\ncINBjFOXRkccvWl58HvgrrgYhFvJyelXKXLlHEk009/QWba53imZF7GYc2a2\nx5yPMik5cYjxK59Hevjy4kQkDGLjAsDd/Hl/C3aI5MXMH98gYab/bLBA9Lr+\nF+KMGh98t2ltsqixzM3vMoWP8yuMvdcReMpGf+rehtS7H6qpmT88XQEGLgE5\njc0MLVvrw5MJV/PMHLlc+B1wG02QOCJZ3DF3LNXFVC3x7GHpKr5Wqdt54cxd\nBy5fltnW4Ozz7tpcFPLpMkjkqJvmK7swoaTFcVffz+cIksDGvgoBm9QRDyLF\n4XRGDjUlu97duPB5mj/dCPjc3qS4bZpaG8VLcGX3+44hC8uFm6u+tJjjM7kU\ntF2FWf1jPoL40CXsdKE2BCGe2cJ9Kd4+9IZrQD1jx+iYTzniaIUF5cCEu7hF\nc9MvLKRmc4uXpwo/fOb2Ptl2Rx0wgJF6hOc9fCrDt9r8rDA71u0/9BbEXy1k\nPit2\r\n=4Tpu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGvQpZX49aNUtIwMjeF8hOlyl9jhwDM421SQ155KYqFgIhAKf5Ko4f5UUPfqJKDUgOuYIZC6SFfHIhS5B4mphmQBdV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.f181e3bc.0_1595455381940_0.8875418910496211"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.346a622a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-icon-button":"0.18.0-canary.346a622a.0","@material/mwc-ripple":"0.18.0-canary.346a622a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JJxBkSVseBXJt3QNhCHQRTOvOeIk3dl66aeAUb8VgW2aGoUJYNLCzPD75QMT6WaSDaRfz8fI3iBmj7VB0Ikm+A==","shasum":"55183902b60a6bf213fdfd319c994a4c466700b2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.346a622a.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5hCRA9TVsSAnZWagAAUxgP/0jlLIjR/ceRRiNwlKMR\nPaheAkQ3invFbj6auhgtS66j9qyP2PFJR8f5c7ODwJrxpbOA2WzErccy63hI\n7qRA2mVgNfpc75cI0k9f73Wk/bgNuvVKVNJnVJiADuidl/34w44RMeHUY7oK\njbUls6JoCF4MARgyfSnnudRBpFvWBn9eOqAmh21ePm1NabtdHKqxykuxlD68\n69lsgBs9tnqRPCkeo7t4PFo3E9Wsl3KEbXyuGktBsd2/mDE+9rFBCyybq50p\nJ//39lBRxbDtK2g0et0Yz7gUJQm7ZUOVQIeaoNl8givhOVhjuOwCnyHva3Ss\nschcm+OvpdMprgzsdpPhcWUbl1MNTTmxN4OcyYMdTDzomQ/zI6S+qCBbqT1r\nPt6K5dzUVY/Ws3ptk/vyW770viJDGjTGJeraWfSlW4ot+jZJezwyjl7LL5z1\nZHXgGGm5fIQCwMOCc3tP9zyVomxPxxRfFh2291P5YlsAVBKBvI3NzcPZmiN+\nPpqjmjL2bRfxny85lYq2+ib8WgUmdVRHUaKrOjWezZEzt3JWhTDDg6W3Txi/\nUKvL5zqmvy2tHr6aNGxcbE3kNrHVaXWXqbxqaSDxFSihPaSzI1L+mN0xQuqn\ntvDM5m+WEVUYgarf7nocXie/wbItZIENvnhbxUzWj9LuuxJFoor1+Hjg1dVi\nCRcc\r\n=KJVl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8eG6doTPwIMg0+UprrXbae2WCDPAi9jP+LsrcVxKmKwIgUe/98tL1xAJ95b/ixA0TlnHc6GIe10XV8aV8gI3cH8g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.346a622a.0_1595461217473_0.9316988498023435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.c9e8a848.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-icon-button":"0.18.0-canary.c9e8a848.0","@material/mwc-ripple":"0.18.0-canary.c9e8a848.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IpWvGgrCYT2FRcoDtoh6ZGHx2sfJzhb8YW1p3mPPHWq7XFfDFcilQbNcYjGLSe9YpEF4Pccdyj1n+Q5FklBTyQ==","shasum":"84e968b012865ea68ba49cf7900e7e8ea0c584b2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.c9e8a848.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOTCRA9TVsSAnZWagAAKHkP/3+8INOsFXjnQgjJ4gtf\ni+p3eWT49yc7au3Z5gnVgt9YNihh14phwYb8z641lT0ri0CWEfmvGg/fHqlC\nDKYPxldPU51AoLUK6jWvEKz9RlXnem8C+IxlHwdlJSYxGEVVOL0pr2MYfDkO\ng/nxKmM4zjLzar0A/FTtQTlqENRmWTSf3RZkPYq0k7w84Ikq4NB8Sb1fee7z\nqxYMeEb3cF6YOIKnjqvDU6oXYl6QOEoNj+ZotYAl2b7cZVCxhYR3shHh1pN+\nHVRHfWaxL6Z2Gd26KPZ2Cn6orp6BLAOHfoxuYRbJ7u8cBHJw5f7MJpnfRTx0\nQRqhWMhlG5t78K4PSRK78PN7cn84u0jbPh0wnAWab6kuwnz/k1F+Wr8zt7Wh\nSo49Wq3Do3wJffB3/G2EdfhDDYoqOAO5xAys8F8V4C7cn6E8uOmHutwcm+AX\n+kRY//g9i+rusJkMD5oMVzs+3b5m79yjfdNXl1QsulGdPczXEy8w1KRwnDbl\nD/VdxloLjCsVYJAmAvIPOyYNCcmiJJYGMsTRm+533lPrXhH8NvcTxWErpDVM\nCuEJnJ1oNUVReRKM9+x50onmtfi2mdOKC8df8Gz0kg8zpfUjVo5rqPn9cUzn\nyK6dkAhqmHkDJjVnOgsLrmt1w5x+gc8CoPoCLfSFLu0WLHyz0ZMYjVX0FXVM\nmADr\r\n=pHtI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFlYr6TuTCKFBOz/JqfbdIQC8dZ2TzzWoK/yAE/MP9lAiEAi3uHe4T8x5OLpPxsJQlGoNgiamhKuyJu4lZlNQqMQkA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.c9e8a848.0_1595466643150_0.3917499769382071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.718c385c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-icon-button":"0.18.0-canary.718c385c.0","@material/mwc-ripple":"0.18.0-canary.718c385c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wwg2/E+K4RBENwRuQGSO/QjAtphBsqq3sMexyk60DiyfEfXrS6G1AtsqSxKx4u4tawCHCE3sGpKQ74ieO/dlXg==","shasum":"deda147628c2f7b0a8287eaf07c554056a76d3e7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.718c385c.0.tgz","fileCount":11,"unpackedSize":37207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3aCRA9TVsSAnZWagAAaGUQAIKiKI3E3TwShS7mUQQ+\nIGysC99w5X0AdRI+ugUp5gNKZPbxi6s9k5NhfSNEsQf7gqhCZubsXVtbcXCR\n6Xtfp+cCuvaepPhhFskTBZWT7KS7KDDYpICrubnitUZ/M3LXrifhAexqi9Jl\nHBdOhbG6FKBFUZYjzKvHHQvqMr9Oeyq5eM23Fp8CvYtRw7RbXHm7D5GIxRrW\nT6WnAFysES1DEcA1HaJHVxrK1j1xCrNwLTiHyBzn8LjioQTVfzhGk1tiYZCm\nwEIAbl+iPqD9Oef0vGzkzRdPXKvaHa1itxMsrIMb+f0drRLYaSN2vmk/7aOg\nz0y63uNWlsq27ZbYhlxXC61wL/aqz4IoCbPaIwZGcyIakWWgR0RnAYdWSq8X\nHLw+kvspJhhlLpc/TBZV9eitVnKKnEVFr08xaLxBrX5CGg/PnVfHDvapxXRc\nOr/KBEt4Qxe+vV/8t5DSZGNUWKmq6F6ta/LRdZigOuUqKB074w5k400at2Ew\nrHDBpKl5o+ftVawvjnvlUrtK6EHt1F7oRFFvyXfJIoh/1DUqeZKxNgC2T7qY\nC7tRQr5BbXQ3VYB1bbsGUZburP7p5j879ddLSkzOrt4VT7UxuGYv+mx7chRb\nLlszeUNuq1hgpZJu4mPmOHGk8GVFe1e4m7N3eqYxS/vabOWlg/nFgJC147VM\nsIBN\r\n=aL+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2MzvxCuTEUwzEXy0rDH9i4Q05mKJmNyUlUvNa8jSiEAiB9quB7ha4P87RKqhAnMUFsADFG1GqKuQAcSV+CsSHnig=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.718c385c.0_1595534810255_0.14197155742825562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.cd516a27.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-icon-button":"0.18.0-canary.cd516a27.0","@material/mwc-ripple":"0.18.0-canary.cd516a27.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WrH0khLCRMkaAuVyiwkyC1IpqM/HgPscTnyKHDQs1/m2eedbqHH8Y/w9WmJUBrvi93vWc1xR013Ett1jbPL4gA==","shasum":"15e3c9daeb633bddf7f6c462e501d4ccde253c06","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.cd516a27.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJQCRA9TVsSAnZWagAAMbwQAIbrBoEocrzOAUNR1r6t\nCCWqgjkm8pZSk6vfnoKX6RlPwLJTbbjxH91crZKidwfg0oA8CV/JH++breXo\nX2izgqiowCoUzK4qxEchzrq2qtIVSuyqpkFwN/RCr8btZzmb+GYXM/VCUh2E\nKcC1ndClKNrHJaOb+Aqe4F8UhhVDewB7KNpowjxdD6m8awzxN2Ba7uTygcXs\n3V7gvHX9GNWGPE0MYtCyhuXbz1A96PvaV5YnvJPGCJjMZMuojmTiQzYXJzXJ\nt0QOg2uDCqlm4LEaWSApAOHZU+dZsKLGTKzdKYjgJJo9eS5eqt6Ad/KMhnpF\nHUG/YCCiAGvySRd0LfmD4Ipo+BJvPr2zdIsjX4lkcQVLhJaGjBC1z69d4Cpc\nC+Ux5U4WzloCSH0c4dLhtc9xzSHPg7E2e5JIR7H3b4f1z5dTqM4oe9XKb25s\ny/6pmsbg6FfOmNR9hJjdU1/sh1X8nrR1MTTYVf6ttSVXbhRcy+YAJQWP5OPM\nPUeW6mos0W8ENAzJAtpoUIBOtHsglp9FC5NSbn5XnTSBGdLg++LwbGOrVY2V\noP24gAK77H/Oc9djJwKmRjwIdRC2FOeD+u15LDgvlQthrY6gNIIpBMjIYcRe\ns2rSVsqnsAOPefOjeIwFbZEhwRh2EjtkCXKG8fTK5xzKw8SIVfJMhcyJJD8u\n1AQ1\r\n=V/K7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB21U/1zXqHGZbORoAdMp5EKGnenWE26CgKGDC54ZNgfAiEAiOcst0uat0vs5gBolTT4yGtJ+H1pfjfeK102+eucOjI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.cd516a27.0_1595617872410_0.43647386936853994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.1f082191.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-icon-button":"0.18.0-canary.1f082191.0","@material/mwc-ripple":"0.18.0-canary.1f082191.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/+QwPoPQ3c1Cp2NV7JVxX+xCx8Z1M6Oau0gXYL0+8nxZZzFgKszOlEAPcWkqUbyraVTT3clGYkYFsitcr5ZJyA==","shasum":"a7edd46e9ae8fa3fab343cfede01b78bf963f180","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.1f082191.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOPCRA9TVsSAnZWagAAaHsP/RupU0Kp9MaFHhqKplCC\ngceY3OQqhpIPFFZaoNB1T6/G7mFzG0wuhUJDPCuCS6ixj3G697RTPNgXWilA\nply7u56nJ6sMsoGzOgT/Ulh3NQQBHrYqEMek3flU4byIIDog9vZQ3svyDZrQ\n9y8qt2aU0+mXBQhQUI8kEEgy9gNf/jf82OwldVKEf/emcntQ8dQdj/B6D0Xr\ngezl8j1vr2+GdK2XtK9UbsSwgtkqQ2praAC5FmqRXoY88uAp7QV2t6CaWnHO\nvDFe8DFtNUxd+x0aSIYBCNFCbaGpoB1JrdTVXj46/WlBTC72453iCIFKPKOa\nynHhlLXkd0LSSt6CunDf64IOlEB7LYNt1PNJxXgfLrkA9eZS6Um69ELvolwa\nI4iPBDadpgRxs42XJpZ3Py+D0mA/A8lP+0EO2fgSF6Djlglyyt9dP53qwGFc\nPGBOgQjtV6K6wBT8UucCDX4AA6MIEPihQmwxkqePq3YPb6STfHblR5lQaPbT\nYB4TIY+UIM5cdQSlGv8fFJkKxTtHFL4W8391L1AblEa09X7LFY1TRbiVNCTA\nY2wO3f+kYwLLc8NQJ0ze9FZRvk60taKsZuORa0wMT8m7yMCTZE+soXIGmcQx\n4SwtMgbb8Jxcuv5vt/vmez+fyO7w8kCZXY4XBxR8djuvx5Xu+nwjaqHFhXdi\nPgVZ\r\n=Nzy+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKlBeuR88Gv4RJzLU6ACmYqT4uJi/tnHgNCSC3lexMhAiEA70HC14LNkfevWsiyuT8lvYW/CJ2kEmaGtw1LIy4oWoQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.1f082191.0_1595618191096_0.2151194332511328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-icon-button":"0.18.0-canary.ea3e82dc.0","@material/mwc-ripple":"0.18.0-canary.ea3e82dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dmb1ngHQP8xsxpc3SgR9OCj54uTwtcDIGwEkrytzF0z+JrSQ2U3vXdGrFdqYm5ojH21bkT8u8eJHGtOgYR0+oQ==","shasum":"3c5bcf3a863f519e4906f6ce193aad5af5238ce7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.ea3e82dc.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzTCCRA9TVsSAnZWagAAerkQAIMx4Tk0pjqKFw5/hwum\nyKC8Pr3fUDUm0iMuGoAbuNBdbNhiuG/Rho+NyjobY6IXCzj9Gl+0c9STzQ+p\nQkEzjUT6eHNtVWoZu9exzbYAuWbMruSh3BBWk7kEZGwOwtyt3BnvDdMazePF\npBKAJPcJCLr1oUDNaxS22Vr43WnhQNXnGL71b/ffD1XGL9FyXYA/iC+lkkOq\n5/dij+bEu+VR89NLX/GW8TeG5hFfzG6qWE/THAwR2V7g8JTkZHqteu4stdQq\njB/2DUziKMkRToKQvYWY6oCX8FQD8kCfbLptsrUGZJx9J/i1IuIQLQx9E0D5\npj9I1CZeVgMik/rQYpPMoGH+E5pvyZFvvgaeRbX+nmPNJVBZl0+2yMBPf8CQ\nUl03ZKQbRHLV4Nfd7cMgiCHV4LPcaCoV36lvytfiq6N0kb8v8fW42SEJXBGf\nTVeviMB5Fuo6Wa9ECPpufCliVJ/RQFuWyAib6AXj2FwOEPKnPGcmGyK2Szo9\nbgqS8UpYZ7DQ1xSfIrl5tNMV29brB+El4GZgKGF61Emndzf9wkSxmBpNG5J2\nr93oY9BqX4DG40tI9KMVSh7/ESR5r156mWrw2Q5HDFzPB4GuTgWj0MIDfeg+\n2ZlyU/dfW3ImWMsNc2dMH4Se730VFUahj0QhVQesOE7mV0rZazVhnOhZFVMe\nx5Ym\r\n=jXh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICO3moF1Q9hbe1aO2/QpNirJyaDZowyYXmhTPsgx/zRAAiEAgiBT+fafxa/FKRGz/OQwsKLVUcGXGEx1HgB2uvZHNMU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.ea3e82dc.0_1595618498495_0.20752096663447506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.94987b64.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-icon-button":"0.18.0-canary.94987b64.0","@material/mwc-ripple":"0.18.0-canary.94987b64.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5kxz3TBoTWrqTWPXOR06zJTzwHY0egutxl9oc9mrNqezRV0NmZw/DyIc+b3fX0M/b0e1EboLonXKgPfobP3fAw==","shasum":"99620b4c353ea196d443721c3dc0b52ae790f9b3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.94987b64.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QMCRA9TVsSAnZWagAAAfsP/iTL1yi3QOTA1GFlOFR/\nd6ITR/MdJTiAPM42im7sFcbpXS+HM7NLRcg/Izzbrj2vSPyfRctyNvdssiAX\n75X9iEySjKrozlLRhWFAIg/DPVG/QFGiLd75Q//oWmX7OKJCTT7mY2Zmfke8\n9dP8ppDn5/SEPFp0zwcQFwdmGqHV6INOgFoV0xbYH9GMNrKLG3e7jU7re2pT\ngNt3Ko80fJG7eVuuSe4Hvn6KA/TuNFdSZiH92eUvRgk0Ik4/TyjcMPGBGOyy\ndRWNrMP8TrKVq6JAzTaBBrW7z7+bu+91EO7end2B+WkdjXsA8i5nsdgMuYDk\nLfh3EWURAsG0Naet3bdbKmo6QqWSAXI5BomBy5bH47/Ymz1dwutX4IL7HL8N\nz6pBdkQ4Qm8Q+M5d3/LOtxz0noJgTBVl9UE69uZOwy3JpkN/kqr3poCK1K/O\naUdqsf97psrJ1C1dOVYIV4mJEm7AWp3JQZ1pd2GmZAqRWLzlnq5mbvYQsdHT\n661RG7DOrr54rc7G8uRwQQspDJwYVGgklajLnquF9HNy3rnJqa6ZJLNeUnyA\nFXKDYTixwNNS9cJpLho/JkQM9IxAr7yOwajczHOJdALYivAjz8Qq6FR9yDOR\nAORjRi8SqhDjtDiIWXanjyyLBkv4IbF/Y+DSZjdoD1D1Q5lmkWs6l3VgF2/6\nv1D1\r\n=SDGh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeDeZi8hFl/XuhO+WpzGfo7Du3VftflMw0Sd/4r/Yt8QIgMgx2qkf6VNihVueLSo83GAKh2vEzGDc0j7jfXZ2QUlc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.94987b64.0_1595622412036_0.7737607336388772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-icon-button":"0.18.0-canary.ff49b7e2.0","@material/mwc-ripple":"0.18.0-canary.ff49b7e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tNz8zMZk5qgJWLR5e14UnEWQe1j/Zd8y820xw5pCOmVR5EY7YTojwYuBRiKZdExjdGhyG8XCnyTmvkTcTX7Xfw==","shasum":"6699f8353285ad2cda2d5c4f29651918ba01cd41","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.ff49b7e2.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVmCRA9TVsSAnZWagAAj0oP/1A5IVxAVRqEZWeF6ZwH\neltR7XF6/UEJyd/S/1P1N1w48HjW6nvaDnDEwfrVt39Z7lD9ajk14j0DMixU\n9sxrdAUFIyCwiJ/FPbvF+2T+iuXxQXYERqhRLzKW5zT7hXPUGUxbYnSbRC8s\nhybSryriZvUnWdkvRY6LQ3Sa0GkOeF19LC/vHC/HsCEgF2Nas5oDl06vEZLk\nweRKBeWz9haN7kIrnSBOylHjiiZQ4xmIAbTH4Psm0GgdUsYOhDN97WpApHE2\nNnBDkQa3j9OF2sg7i38p073jZIhAPdWmpvxOn+18JMy7WdyA+yuSwtFafS8U\nHWQ9YfVGCKpYMLqE+IQfNUFnooRhlvZv3hYQHvL2MHAPiOeA4Ap5/cbuXZrT\nErJ7Vna7pRbjSxSAkAbCDmE2OTbw9Fb+OcPxVWkS4CV2yNKhY/3RH+slYPq2\ngT6BGiLArkLt35MpxM8SxmdZcwhyUgFGcdtFS8IPOT+2g/SJlHUn4qTDbQwq\nNDCcELcPhxCJOSJVdLmMQTxa1+69jyFbOmVY9kxOFpSvgMGuxFVq2fqrTVd9\naOjzMpgTHTdUk876FUYESWOs1CljUqXEjL9HBpEXi2ZT3pgGBQs2pniZzuuV\noed0d1xzkePRn/WDDHZ9dX9tnXpQv4Ibo/7Qw5KdFEQX4LiuyNWNyNfvum/8\nzskt\r\n=pDUS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAE2NXrAFIkQruCdZq98wG9mWNQqJCEy5DwyojAb08zzAiAprSnWPTD3GRxqIM2XL6YEmFDX12O3YlBlq2CwKB6lUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.ff49b7e2.0_1595876710218_0.8184051847031297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.3d334ccc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-icon-button":"0.18.0-canary.3d334ccc.0","@material/mwc-ripple":"0.18.0-canary.3d334ccc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-u/hYl7+qi52m23XOFQUOkdT6isjByE7858ABba9vZWEAGDmKkHgZ/vRkaO+BhKF41nHV5i15C0HiSy/z0J3VDw==","shasum":"aa8bd57a99ed295d4b7914258c2f7623e3d2252b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.3d334ccc.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8lCRA9TVsSAnZWagAAKZ4P+wW0zBpFhZ1zNAjfzUtD\nAdIcKm/H8WpRtV6L/ewZ4zZor8umTLLv+nVJBZKA1NGGesZAXKtlBopXJzsw\nJUT7T0rbuIGzBf7g+I1hXFcNGIG8tmobHwMrRftPhI1f3ol2QqpGbasxUSZG\ngKwjo1Gp70DmJJNnrZE53XIFlB2rcRl7AZMPs2le54snsjUKU8V2G7ZQHM6D\nO0POcyebPbHiJdqR0QgbptW7FF1NA5Evpk9Joabh6WewIM08wN9iGLtqtrsi\nExqwupuhJZsRSKWGjXTOix+cXC6GGCQTHLP6JijPD83+Z7YdeXV8TWIF/66b\n4VE+GwsJcL4MCN8e89LtEgTtUKGYea+dz1c3VVgFrR4L43Pv6pMvCulsr7Hv\nfrh5UesJDFM95/hNIzjf813XaoBTcVOwnaXi/MWXyJCSgR9ALdlvaR5WOt/V\nh3VFNfYn3QFSrEEXcAceWvnxqMFSmwsR9i/Ca3MlZIWmJd9m1iGayVO6UYwN\nQfP2NnQO+AVMsRBCnvqHVF/8nOOUoMIR1hVB2MUwxNSoR3e31pyHt1JBZF4B\nHEPmo0PpB7LsRFQp8dVVeZK21BJsttbpOuCdNsvc11q2Fyz3cxNpWD6Jjri+\nKnlyMtTsVvBfpFsyFBYOOddP5jwnF6RCgxEBV/6lL+HPxtIhrcG+Ipjh8cYf\n7uC7\r\n=6F/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3y0PZ8KIs+u9gRoQrUD6BV84s3OpeP8VMls9BUl6MbAIhAP6XfabZDD13WDvQmR6uyvhm8EykDk1PHqTpIrMPjsYX"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.3d334ccc.0_1595952933285_0.9634027859793728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.82ac569e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-icon-button":"0.18.0-canary.82ac569e.0","@material/mwc-ripple":"0.18.0-canary.82ac569e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qEZ3ClhuSXfolAnn/WHVzQYjkjYInP6L78MkGUdKRdeU+UrGanQGzlyEn1o8WYj2wz6Rlbup7NmqzXX1dG55xA==","shasum":"17e18e268ac6cc70b72c78c047fe1d782d472b2b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.82ac569e.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGnCRA9TVsSAnZWagAANXIP+gNWfzEdTDX7hT2zlucm\njQgM9OUhfOaOL7cgUU/jtbJAi2ATFjJkYW1PPqVdlBXDC/c580+ZlKFJ3nDk\ntWHSzpPi+WfPUFhtM9IEgOC2UjaYHL2dbfsdAApY2fSrop5uhH0w7EIIYDPf\n2+d98cFAPuBuAPsZgd6tDZ/lLf7MavJOZVthOMVo8hWX9bD8dzm5H5fVhD9d\nulvi7hT7A1FjjgPktSh7u41HloKUcDYWhMF8LcLjYYa9MRm7iThWRWS8W8V4\nBrvIBGQbSkI0nC6BsTm86GKSvo3xBs5KCah7U/1lzJ2gx6tEohPhVztiKxda\n01JFsM6HvVv8sPxtVblg2TUl6/UBvAK9N5sqbIqMcofJ7AXbrkSYDX56h07Z\nNPvNkr/aYVWQHi4WzZ76BAd3w62sfBVRGEyoIKEu3jfAhKf+kuj++UhYd40J\ng1Kca81yGzjyIpDeNcNf+NMqi4jRqZG6UvEyzQdk6aExqfOsSz7Xw3M9HPMZ\nZNgXoVBpIRZRovuxA/K5sFFzEq7JDAQ7mUNxEEohqiGE2QbGbUahxkWlGzFH\nHHs9xLVU9XBZ3L3YIXwmdP7XomNm7/QBOBSNB3J5RTsfMQ8Thrsxv/fEs7NT\nUamZy4ydBEHuLqUac8p99TE38RHi0TlmSahA5IwLgkTxISvqXiDGB0pnQrd2\nhI56\r\n=tskL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD81GWoW/iK71NIruQEMEWL2KWHkDz/QTozUqfh1049IQIgExPH3gaoCV63lUKiJSJndQb2KO58Npk6RpGtsrDK540="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.82ac569e.0_1595961766950_0.8866672076920215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.99df7397.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-icon-button":"0.18.0-canary.99df7397.0","@material/mwc-ripple":"0.18.0-canary.99df7397.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kaC7pdrKzXHtw61yJzt6bAZW6ghMhCNfFXi9s2wsPNal3QUMa+bpB/PXUbWd7WRUTa/ST4UBxGDgHDsHZcCXwg==","shasum":"226fe9fcf7aed28d47ee005be0130f0d1121b480","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.99df7397.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOG3CRA9TVsSAnZWagAA4wYP/itVA33ZyVo5bntGptj3\nnopxRW3IEtDXV8WHkfIiXZLCVPd+FZdUcOYjRUrm1hBYLrwuafhq9Qe+S3Y0\n6jC01WEZeExLdcB9cCT0dDwogPscy0M3WW7BdfDctXalcMAW/rvkIHh52tZ3\n7BMzXVL1UrQiXcF4zpw2B9E0/pAt14CPlsYMC/i06IcB2BYUhVvaFPW2ARKx\nJEoIht9UAElUDQ78f5k7Nwh/RaVhn9C7p1Aq/6gRwuQbfF8WxVGKqvR8xBBa\n/xaGWmOOL8S5I/qliJWdCJs3eCIg3pY3S7wC09uhtQuQDrTpARtHeUMOqY5l\nxSjue163A4K/qfyoE290RgUqrvth7Aj8WCG6BeJm2wBqueOxHTktA5DBasHt\nr1i4iaNnyECRRFZs1lb0ffYbchJEq2zSw3lVtsOZcPhF1wiIkE1AR5o1xvuI\n+RxIdTzp7arEWxQFZRCQuwIjsR9BgaldMLFPmhIU8X/wgX2ftMpgQvbvKQVE\nkY7XOcBRdBdGDqRizILJHvXz0MfCX1P3hilUeG1558A9mM+cCfyQijN/8Vfz\nKfZTLqMioMswFbqy9BBTsNm2rrogUtGVh6KCmKDWpx/tFUh9Ehju/+o8BN/B\n5Hcbo40JMIzIBlScj7NgQHSHwFCSpeWcwoTEceorjTrB9En4bT/rHIpvZy6v\nGjXM\r\n=peYL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSVttqsjAg3wMaHZozwZI6McYFyzO7dy1hVWuE2CTX9AiEAr4ZaMTpnKh6BhgNvaGmxADD90Jx9G5R7t8QNTkvVQo4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.99df7397.0_1595990455095_0.7815672032716006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.45493e05.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-icon-button":"0.18.0-canary.45493e05.0","@material/mwc-ripple":"0.18.0-canary.45493e05.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kn38Q3FpbSoI7T0voN7QioDiKSBkjcoEzbBKcb/jymbVMtqrBcdtgFeoSNXFfl7I1dbYQG/6/tPZZJdnr4TiMA==","shasum":"64173e6268481b10dcc5c712780747b583151e1a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.45493e05.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8MCRA9TVsSAnZWagAA/NQQAJsUSXN88D0o7HVa8scD\n+ge782nP+1HAr/G4EK0GtmyXX+SU5QTavB4AQg5HnfYg0yTZSSbYniU8fCbU\nmq6m5SGiycel9OJjO4VNRp50Om5DzYsRphGYTi5IRL10xDxaGIuC8AG5DW9n\n9eCK1VtbUD6FE8a/TMhOhCLj2phqPnWFMuh5+WDGkEzgvSMCRntmdcqWmgqm\nDx8AGph5jP+Jg1GBXmN+mgN/HzPK/DF4ybAgbYHqpPaijQbGkzmhlfw3S05O\nvk0+QhTZfShSHXn5F93nC8QgllcspHOrHLV6X7Z27VPXp3HmEB6+WJg8xcES\nGuz6YnoH0YJAKD9BehW65+T/zkZJ7stFb2Ly8QH3pn81rlpS1GaxhODueNjB\niZ7FSnI969WQKxeJMfyf/hB+MJH57vXccP7U9p80heTb+yow5+ca/6wysFtX\n6FjVUHjBcIAUhwU/WFPfeOt1lBwHU0YfU2tH3buVOcdnjII3M3d9w+jn84nz\nbnWxSGOQ42b2rWwHqLQBBhrZ/wNzxsaFeRUipvIFDLbguD1RNbY+2ot1RokG\ni8CYs5s43aQZI8sZTiFHPNVLS4l1xftvs08CRcTlyTbRSpgjHuchuY3/dfz1\ng3tVkIH5s9bn8WsqIoGOotJBPQDnCPFVp29kuNZziUn0moLtPWuA1qrhxBlh\nnLsn\r\n=qd4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnoYQubDCWjYXytTXB7n/ue+M1oGzC44Hk8gWJukd8kAiAwMnpT/YLn10rpYyKAOdWBD89APyD/GLj/R7oL+VYG5Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.45493e05.0_1596043019573_0.5504163783272475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-icon-button":"0.18.0-canary.f2ab0a95.0","@material/mwc-ripple":"0.18.0-canary.f2ab0a95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+D+jO4h0Skw5nhLGjtoDiYIcM7yAY8Sl7E0+JM3R+yynD/gYQ/N619iIQUq0R5RzEkZ3b+tlJjau1Yi+CXssIw==","shasum":"2dbd92f6de57b558d943b5a06b1e81a9f1367563","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.f2ab0a95.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAwCRA9TVsSAnZWagAAa2UQAIoPCo7VgjgTNnuysSw/\naIB58KMe+fYovm6u2BCxdOaK6YMs/oxAC/vS+mSrld2r+rktt12bvGpCo22z\nngMsXzW2jCj2X08+qCGizEqs/7CPdQjBT/kGrfAgMmTxQLI1wPAZiX11zdS9\nt3A/rQgUgBOkbwCeJlJoa+8RsUTIqDzgg9Zrt+Iy7RZY/s9HVrTAbtDrxafX\n6uEhfkZytotRVQF/VSKYV4aMqSMWECdDHXPlEH4VYArs1jSIScskeaSG89Qn\n2JrTklbzO+dp3u0gTMa8r0dFday5v7j/1URCPHUBMR1dnnkInss8SkCMrfqf\n9eTzwQQsDfpM3gh03bTHFIYt8zxxCGgRkT9yaoSEMpPCThu6D496LE6cm4uT\njaIoi87USNI27VscFwAIn+4Q4tvQah+0yKzniRT/Xax6n2Eo/rSpNMhFkxeZ\n9sg+v3WejJjDBRzU/UOmPF70qwKrw+53YW4NojepbPZ21Rwdf5hECjKB9kDW\n5U7DGzkAFO+Ij0yYVc0B+8Td08hPMRxjfDWGgMKqU/X4oNxL41itMqXYpxil\neFpHan8yxyMunSTBmBI2TNFAoqnIrhCc+DSrr5/8ejPxYBoEfnb0ps6pkTcR\nYU2IA6c0nJd/BCHN5jWeCrMVC9qvhS3SNqGKGbIhmryIa9BWNYWUbRewQ8PF\ndj89\r\n=JO6H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnfEQImkQJ8Mg59ombVEeG7iM+pB+uZBemD8JCznE6xgIhAJrkTq6qj0jqWYuBa6nISyBTgXKKwRMB23XAh21IaUZ0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.f2ab0a95.0_1596043312261_0.8074703614261574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.45f9eddc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-icon-button":"0.18.0-canary.45f9eddc.0","@material/mwc-ripple":"0.18.0-canary.45f9eddc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MTg8W5JmcSk8vxf9EvFUE37UQk+R+jEQ9/ACUo8KpVtl9/CvRAujP8RAAKQfyKwSMmHjgz5CurUE0X8go5X9Og==","shasum":"a5b2ef5160a6ee211d8e698a7403c58da7ec39a6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.45f9eddc.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpvCRA9TVsSAnZWagAAHgsP/2P6kMcia8eeTtPrIbPH\n7Md2MI2U1GMlcVpuUaA+iTaHMyVnkv3tH2BEaEnN0JTEOznKFES+gutrurI+\nCF+iFtnLqxddkN70DAWheJmuVSJOzZCyanqqJpWt8dVZnIuSp7UceDfNYOc9\n/EOP5LnF+PJ+esuFtTjjhIsKJDaaB/hrLfPwdtNQcMK3ukF7YnWtPekMBxer\nwOfsBbURWW+1C/JAXd4T6Y1v7sz+C6jAo0xJjBuNkcnBFiBeyEOHwqgVjGxP\ndrfoKxGDK3/dmYemHXe4cuDfa7lORc4twiZda2arm1xDwNtBNJPpGwrRWqnz\nJuYxEPoQElgymCNkXjbpRRR/cqWiUyQGXiAWOwyukanzEe/NztobzsYZLtZk\n5SLSxYeho8FDzlLFEqNSrt/+VNwXXHojBZoeq4wYjYQt0irvfbyg8dYQWJx9\nbtj4S/AoYDeleWls73pPEz+VRbM1ZVew0yhKCcPyeNACIqRErsW0c1KpbZEp\nZmCBCE+CzEfc+9nnD14HeJBa5zz3czrUdm0H14rsborgwi3yFe94SeG6sj4f\n5nvk7Dtqyi0V2nYpaEkey0dYvJmDzafrKq+e+l3ALJqGNcmKMB8w7zuajZzr\nIhY5aww0l+IwqzxD01mGfVb6rxY1bf8aYzafakRdWDgs8DNcMuzsjVwxud09\nkhh8\r\n=p+MS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTX/6gaeaL6tuc7vgAePOzZgU60jwGxc/PodFEbo3ipAiAy9pcTBSa5ax+SOB5SM77YFXTDAcZghnEp8jtIbJZgpA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.45f9eddc.0_1596070511461_0.09389779509895901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.b64663ea.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-icon-button":"0.18.0-canary.b64663ea.0","@material/mwc-ripple":"0.18.0-canary.b64663ea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-p6CNhYKNJSJlcwKKLjXuDwxgQOR6NPmyr4B8HQfEyjNR7S0JR7LJD77CZ37d8NyjUYdZFlpo/SlMalF9bgNMGA==","shasum":"7604cde55f3c613894287a312d06740e592d175f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.b64663ea.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwbGCRA9TVsSAnZWagAAyNQP/1keSMrSSFSHxUoyNMNP\nE9OwdXReKzfJxBoYnDhD4gmW9Dfs8Vg304RnI5HOmkeS/EkKKyC8PmG2xaCv\nYs6Pi5JX37PouFdNl3WhgLrLklCjaQycewO0nrL2Immnufayd02UhwwLCHBS\n9EhyuGNhlXNF+3zDomLEWo2Vky5U+9mrGWq5Y5wAwA2adaZr8oRC05y0UHvs\nBTTV/U7OmFtJEvhOuM+XPY0NhJBKuFeql+VXGn/5jCWxlzoApyx2ai/iJEG+\nmYxFbbzsAy6uHVnRcgjNPR1ZNI4V4bFbLM/z2VLKsOPj2neUXQdzpl09w1ET\nsT21MnZg2PSisTT7/2s1aUt9dUgb9qTvgP4EXlgS237fxYs0YfS5mvzGyYT6\nDm6cVNq0msUHylT84k5BBuLnt/p/aLtNO1RxMXojty2Xx62+mTiIxZpNZtcq\ndTBf7Ryf0FwSuMTwKm0zfSkaV4ta3VV81lXA+T79pdONX0cVmo/km8JK2E6C\nbjMePbD/l8T9pF/LDxjl3atGm9fkqGI4C4zc16t/G/HvQNNX3g8VfUqyA8Tf\n1jzwCtnYXwa/JvKUiBTRdHuWaviYoz/5zF412znlA4mI2CI82+CjScbG19ag\n+Mj9OwE5ZtlGeIwcwgQHPictfOB+cBNU+UM0pciKmZWAbosM+1Nd8pURpl0i\nYbTo\r\n=531k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxA32eSmriLXVgYECR+m8zTG/0n2fz8nDxUY9wuZEWCAIhAIZDdDdC9Bu6AyO2lom5z1z0UYMc3awEp2wRU24STqCF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.b64663ea.0_1596131014505_0.1780095888947184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-icon-button":"0.18.0-canary.9a1a4d2d.0","@material/mwc-ripple":"0.18.0-canary.9a1a4d2d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+bdp0I3TXIdgp9diIby4W2cfMgrBIKbJ6knJbCtm0wAQGC/gUkG6NXChenjAKY7nESgMz5BCC6sv3TNoeARzxA==","shasum":"c9988a0349db67916e79a0acc8ba8b74545b3778","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXlCRA9TVsSAnZWagAAaA0QAIXjeuU1ZZ9xEru03iCJ\nlFVYP2Z9PRDwsSGWTtt4JF9wfJHXn/KwZlig/kGRG6d/Rz5MNzhbbYSpcIFv\nnxqia/N1/AnzJtnGyqXP8EN6Kn5l1evEnG1ktUnLW1I84ZPKDdEIOzhTityo\n53UtUXjp5UbkyQ2NXFgFleetSGA2EbXc3nFF3E9T+5zIovV9HcIMDtXeNjIe\nic6KocPHtmtLZ0C3QOLMr+es24yxC7Ceq5n2v+EXEnE0FsQ099/P6ZSVuefB\n0w+5Uo2KnJs0h4jbbRxa/ybsiguuc9zCsIrCLbsRe1WCSmIj90WTrj6KNGY2\nf8feqa1EFd5smXFmGtQi2GtnsrwjYcBciyShXFaTiMcFHBd1XH4iIt8e2FHk\n7sHntbkX/fVyJD0RjeCt21zNl462xbor7FetSfSj/+jTqMJTZsrFiQH7Tkw8\nHHQJAIAkdkD0i/mcV6h6LnhFIdDX54JlUrOJWD29p5jvmuWcbMFfx1QlKRLH\n0VkYXg5wqSB/9aCkKaVhoXZgbEBpJWoGdk3QtDBDptTjcF7U4+ozzJ5VSDMA\nOaC7QdMWswwa7ol/Ggx/c+bLfInJ4U8H9yoE//OinAp9wpdgrY1TtqPp/GsJ\nAVIP5v2D70BG9ZUldyYCUB4eI1lTBGi2AVCYYTyKsKzSnNIMQWZwHWZyi/nX\n+8nG\r\n=qJiN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/Mds+1p52Gwz8SBahOUiecBehmdz7YWP8oUL6rIEsbAiEAzlcAtT/uV149BOYc3gKr+ANsT5cG5rXpu7RWKfsi+zY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.9a1a4d2d.0_1596143077517_0.6662841200885954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.887c2848.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-icon-button":"0.18.0-canary.887c2848.0","@material/mwc-ripple":"0.18.0-canary.887c2848.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WT0712XVXXqfQZhjoZTBXVuzMhU4uLWVOnwZeVDGNWwh+d/6hPQgx50cny349XGb45fMuPFKxj9nRwibgbI9GA==","shasum":"33d1d61f00b08e0a12ac067bb7b6d32558d5376c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.887c2848.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0RFCRA9TVsSAnZWagAA4nIQAJFek2bcZJJSj1hFH5Yz\nw5P7Fkh9djAVLYIwxjXwFtBhCttYfYVigUHkD2tEIZiPSJXsjYSpdv4v3Cbe\nMyyXCDEzWXD4fsEv8W/anu8v+C6U3N/Npb0IfdJS84jSoLqXWfqde3HbkB0t\ntbFiWIxstyEKgi3C0v2uXWnVQ8V/70zHKflh6OlH+R4N17j0nBlQLMHMNmob\nqiNT4le8LJI147kNJt0eMbUB8WYOsO2tvPCuScXwszpKR5/7Gst27G+dCpI4\nANMs8O3qYLvb011BZOmem3aFWDHsxGN93oMa8MGfYHi+ZKS8VWliRGshDBRG\nT2VENaIZhIwL1f3XSvRJLlXR5Yv26tz/Wu2i/fWdyFFT/qV3VAcpcBFeBsye\nB8jwlN3SOszb8EjJCbX91MQU0U6iJnbQ7IJHHJLyZT+8O/u3DxuMAwpCxAm6\nj0vmeKheAEjSmeJD3uYNEe/YGygIV78rlUCiaoT5QPEmdW80uKbYfSxFtmMg\nwcEihGeuQExebVFTTqql0sPi0Oo5WoN/AgNY3Az8TQE+DxMhCUAq348TaYCX\n1ecpW5Tmw+Jw1BkXyDSBaoVoaRTLVo/PvcEwyHvQKkBe5rXH7FlxpbG0ZYJU\ntox7ZB92hTU7JY70eghvV4e9gV7VkDpoz3qDR/xy8JLaoT3kPUr/TgorKLWo\nNtWa\r\n=fgLf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrjN3zPRkkiGSWL8LY11IxrZZrnGJFNq4aMoE0baSJfAIgFVz0jwChRdD8lU47huFFYkVw18e5vZnIQJRPEIbKwfs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.887c2848.0_1596146757010_0.42609618473223887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.354eb695.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-icon-button":"0.18.0-canary.354eb695.0","@material/mwc-ripple":"0.18.0-canary.354eb695.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6EfPyDlil8fDZK+G04/+LRKGOSw4lB1NxD3h/QogpWcz5T5ypB9qRBebNEuARYRmIHRP1MJnQMkeig2ulC5RKg==","shasum":"f9fd6592354debc8ddf93654288d1076441e59dd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.354eb695.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16VCRA9TVsSAnZWagAAYA0QAINZPXN+AdZhzsYzPRLn\neFFS0xaVcVe+g3yziaTi9llBTm6UIlkoffJVZwIrr9ArmHJ5YUgZfZJi3uDv\ncKDDPmFDNYugPD+HM4SVrIosOewolGr6vyeRJ2j4SXxFEk2WW0Q4XUyxGNGX\nA9XXxf6Ek+1FNMw5VwO6iJfX7uPWUJaOE221EfQLGw08GaJBNa67C/U4aP1C\nrh7nrUPmq3BH1MX8I0gwbZdxkXRtF+GoSveQAv6+8ui1/paAoJbIfbDQ1nqW\nUuh7IvT0iWekNWhKhkI9S+P12c9e2SV8ai1Pe27Ob9xnk++KPYb9mo1Fz7SD\njB6Aj/PfXYLOBLAqSXhjB7J5sUq1riF14NgS7VHVcIz4I0D+m1YD6lRm2e0P\nTXh9T3g4Pzq+U9hx5DF2jMUgN4kNLGfA2iQOZMerAviPA44vJvqYK5Rfg4i9\nbTlyczfOEJMilNQzlWY+r2BAhOgu1J9CJb9Hu5bfrrZMFcQ9XLJP5T8kmdE/\ns6Yumn690fGrPcdl8+kNV8GhcmWE0hNN2DqB3Yb3kfeCXEViMek0kNyZXuTe\n4X8B7gXSiN0BmWfSo+kbWGMiq7RLssUDjgumoatwYfQ2IgOfNfsmwE5ygvoy\nnNYQShczzlBxDLAa/YriWDWgtcBuEf2qCajihon2wuFm2aTbTqxdwY3XzKtv\nCaPe\r\n=PBVW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnUa4QUrFRHmuyND9dGH7B+kgdX63y2T7Vp7M7V23QWAiAjVIy/CjYfu5mSVGqKi0mrhy3XQI29BWl2gjuizDhW2A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.354eb695.0_1596153493084_0.13300537611879504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.7beb236c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-icon-button":"0.18.0-canary.7beb236c.0","@material/mwc-ripple":"0.18.0-canary.7beb236c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3nULDlkzsnDi5oGszRz8w6mi+aJJxp9mV+B4JRr8a+fE7IDFu2ev87tlRVEYfxqye2t4+DQNAwESsxVENWOVow==","shasum":"a994aa917a088aa4265812aa82efbcd5defeed73","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.7beb236c.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFenCRA9TVsSAnZWagAAfb0P/0F15yL++UPAJoS70Umt\nrh6YX76Xzw3FealybiSMAMJBFjunfH2rgcw8IU4lPZIYnbZ6n5wXFl2PdRcg\nxoJtzaTOAJsF30nbG6jR7hM+WvCnCcAs7lB3wq3elNumaRqnHLcM9ubUefpQ\nkgm89rNpWLtZxZonca5YpQV7NV8/9UseRxBELv1S1908hYHmg71ldp+sOc/b\nshVh2LKfhlzKcScgDlAMOvleq2sUdk8/2H4CFKDzI4EO2f/S39s6fg4z0SBD\nRpJ6TZVKfq5Fktgd5DZgPSV924PBkxurc7C1ievBxZiZRx2kvD8kMNhc2pRw\nsfmISLALc+qA9YBAZASbBN7pFW4xMJINYWggttRKuvIBqvlx0uso9rYUBvAz\n4M4qmWRSVf4cFz5vEbX6WJgT/hW7ikIKRppymcNFLlm+kpdIEBZq62k7KbNx\nqpNc8o3nQ36kqDcjV57hnpx1ad/uHjPeDkX9OX9K+F0RtXMm562O3lgMhpG6\niMXIFICEiVx7MLWNOS3VyMa6RCecuzj7G9WLazsDUAMSkM343ySKWa434J3N\nx3I56rwiaMPD89SCVt1L1SwU3fUPSlWHXd+kp/hhdx6XtMx4floQR3Yob5wi\noOrQty6KInV7uWrMkdAzMM2MVhbBu8JbHtAmP3DBNkIjSGvtmx0/4HULeDeC\nyAuV\r\n=jsl7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCWFWjZD00Z+EEtqnhCgc7K8r5L6Cgoe6Vn7pId6vl5AiEA6u7IxHoxgNgeqoSs6Hp59HYYovXIUIDyUQFEM5Knac4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.7beb236c.0_1596217255331_0.6320007780406629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.c44acc0c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-icon-button":"0.18.0-canary.c44acc0c.0","@material/mwc-ripple":"0.18.0-canary.c44acc0c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hKSvhy0z5WEW3jH0NSNvdwBgXM7wlP3Z2Eb4YIf5Gjzi/H//RIWUAFgVPUTdDrWox8GPN8exzpyVpr0MvFSjMQ==","shasum":"6184dab293480416e70a61f9935757c25bfa74f1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.c44acc0c.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIkBCRA9TVsSAnZWagAAcKEP/07VeUN5mUDYYWjIdrsU\no5jaiLAAGoW/MTKXrklnhNN02sda2bWsjwNiD7jb8eU6A564tFfjyzCp38Yw\nvGuim8BKSll64xIB3Sjoz/L71M1WiAN8HMS5DDrSXzRQP1RkijAn68wu5EOZ\nHhuUA09xJLMSlUP2gmI/p0Koijt5QUw/zU/l8JfvY6oACQyMUl5rjIPbYquC\n2qtBUt5TG3K3fJj4jQLBn1ReVZknwLPa0BujBbRaQ4AEewqLSwBafrjsUjiy\nqOVzB4AUo1N6omGaO0148MTP6WFjZzoiWvVoGFJeW2ODECqTNMzy+q61UeQa\nvd/WdAuyYCgrmddtKdGBsF/LazJcnDUjd809RMUovuv5WEtrYBKGWMWYoc+k\nWR6oRBZvTUL6LZD6K/K4nUMhaWwFSgQdko/1dWb1BFxRp78CmlkRrb9xXAVH\nKQjDPs/9uFFZFV22NGF4Pqm6qyZZ9cLCyvDsfcjITYm1GJa2tjaZFpjg7Fjb\nP35BeCGYd9OoIkvVKobw54vwu6my+nDJ4/CGxLA/1es23QVRNk5l9iUv3NWb\nODMjdbdr9BJhPvQ9BXVuxT+kPMw/gV0Q6Z2uT/RU+c9jfdQJJ+ifXwkRYXFF\ndjpa+4lOGQt+cDYg+mNrhK3VOtnRThu0y4S8Nh21+flq9lUlntZC57BlFxY3\nKnA3\r\n=kQXo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEf5tqzv62MqQv1c5GIq97Uk4g0r4iawsTx7u76Gj+jBAiEAx4Ghx6eGCt3toHTaqF2E/pN287sgRZnQib6iEZw9Ttg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.c44acc0c.0_1596229889443_0.9314295244928152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.779853ff.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-icon-button":"0.18.0-canary.779853ff.0","@material/mwc-ripple":"0.18.0-canary.779853ff.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Jzcs7i87RyFQGZPpltE1lAmGATwjsliDjlgnDDI4KRRn+BZcpRvDh6U+F/pl2VSNgfPbL/ALPTX5zgAScsScxg==","shasum":"996b535fd5d09a0d886a44eb0bed030e6e7ebc69","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.779853ff.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgoCRA9TVsSAnZWagAAEEMQAIJ/iuW8tP7UvNI4Z/Bm\ntp3+DhZBG4DcmGZj0mzRWBUcTBz5uyvt/RKLIcOSn96WE7qSH7N4HTexnT2x\nwtn0TASnRFbp6Gk5PPTy3KjBcF3qVaH3SqkxqZGnse05W160Ho1C5Kz7CHxn\nDmfMIfSk807aSXlukCWqLZz2qx6w1Yut8bRi2t9qQkCd6J6FkhIoMkbpp/3g\ncvhsVfMB15wxuC2qBqOtBC4ntPLoOws7j/f+lc56GUVaXP59Y9DC/EO8HrP8\nq1TNa+72zxmZ3wmEkoCqn7+S2mMIf6qnv0XE+SlE+h/W/Jbg16aTA1eFh8UF\nO905/niCQ153/td4c+YQtJD2dMTVlEos3KVLsMmmGUSOdjQInWAnzl9V3O8d\nCSeOr7iD7a28KtFeM69LMkINv/q6zdjZBx3xC9NvAfQvM0EaTtFD0M9Sgktf\nvXhM3kiZHv9qBEj+yekRaLqaQpRhETPx/QloaVzDyfeHFSLkFWKkMf8sckwN\nWhDGbkDBBK6hGsZ4FK5vEUPiBRg12uJ67P9Nw+N42R936q8LLv43IQw8FRkD\nVszOOepBBDdayAVCaNzkjqbSnwFHQectPJzKlKIZ7MjNv0TO24y+02p6oY/E\nmtyHOnvFPidP0C6TIGMUfJJX/GAjTnR8v1aUyEckMoH6rNampATHNHiSCoWS\nkKXX\r\n=DIWP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkRDP1gaxeCCvFc9Y/e6Obj8HFrmb3CbuHbNWRqI9uogIgdliqn42YK23ch7t2/j2T+vCIR7xj5/SiLW2K5K/XOKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.779853ff.0_1596475432317_0.11658777484123317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.8aaf270b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-icon-button":"0.18.0-canary.8aaf270b.0","@material/mwc-ripple":"0.18.0-canary.8aaf270b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vq1qOXDN11eYbLcm7gKArKXW0nipLiBmFEbODjESPLV4QWTXr2mmWYfM2rE7F/GcCP01RNzyHzIHVQgv4L7rQA==","shasum":"e9808d674946b2f45d4672e193de9a11b4e15db0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.8aaf270b.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFpFCRA9TVsSAnZWagAAoCcP/2YfV/qT8kmq67TvBKA5\nm1rsaPEdTNJeN4Y3hA88CtW+xD2/Vjg5znMN9vpZMX2gUmgREeEG35+Nk2Jf\nm0DecOcQMvFrR82xVry4xMUqWixKrMN01jEPsqUNslSN6UFMGX8ioHHt4ZVS\ng9sd8Ndn+3hU6Q8Iqs5eQm8cfsDWgJ77DQkJ8wKFvN595e7xOmrTQletneIX\n27tm/iBzYx4AkxrS9msHSwN6bWDpy4z14WiSotPdbh8N70CkC6DBxboT43w3\nDrHXTl237QfVs6bGhRaBQV0N1KROPH3ng9JVw0sA0x1MkCcq5jeB81HCoE5h\nOnnHoTPAaluyj8nJ5eLc7CQvi4JRIHqwrG2M/aiHdQpDzVbt5YoNowWz4qfi\n7ySC+MeLpeePMzsmXVQCtDNTprnToZoHMoqJSNtI2DNnsOzWYINzpMFNUrGs\nXpc5cJFxR4kG717b/8bQxuxTH7kARYyBuXbewPguPPhIMq6OGg4BAbO/3luK\n4EUlTK1/Y2oDAqE+5uc4GpQ58/fzQ7IZdmy8Qfu4vCnMr+jqqWyG8qvsauFO\nauGwUsZK2E5z7uhQJy47enU0CSC0pyTo1fYl1XRBMI2/UNhHz5hf2i7ZA+ij\nH0HOSBOjFlMjjX0psfix0yIBcm4OC0VqKHo1WsCaa68sYEJ4xni7D9tuxiuf\n0VGt\r\n=Jz4S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpKbtw3bpx0uh5VzSQbBVSzLl7Oblpw3OBeUdkbrU8kAiB26QBhTsBfpG5ZnSw7FQ/Qy+6EVfudVq6H89m90Q7WfQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.8aaf270b.0_1596480069152_0.8016045179536027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.5cde9f12.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-icon-button":"0.18.0-canary.5cde9f12.0","@material/mwc-ripple":"0.18.0-canary.5cde9f12.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-To44tlaeOLsAvyGPN14txVEl2nm9/qbJq7crXdQJrZuhctz8e4fGe6RuD6z4YXMfNfIxd6HCQDKnFVZSsVMiDQ==","shasum":"d4861d41315d33012ec31b2926c64947e3e097dd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.5cde9f12.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8NCRA9TVsSAnZWagAAlkAP/jH5SEsZBsnRzpL+iy71\nc3Cf/5YPnIz8BXQjSDw4cDnb55G1RTSI5+YQdBaHQpShPFdsiXAuw2UMFu73\nfi2+YGWzZJNwcm01iygDDk50DWPNU0soSHYk3K8AvPFM/0eF7Hpb7MZuGbvE\nx9xbbzHnRlw0LV71KRmRfefnHK94w8eYdRwAc8qNW6LYIeiVOVs6/G4yMG4i\nZw2ec8ByhgkhvzpWIAG//wipL5JYDWCPNpVybb8tgZuosb9BvA54K3uUKDSi\n6gUASZ9iFrRJbmcNd59/QvS/SVRDyt0Z5i2G8J0kxc1j8Z0fU0NYb4dQdwfC\nSk1CRfLC7j6nGpF0uwsPkxgEOwYLrbH6OSgx9RRcSTZsUI2NGazevbZ+kvPj\nBzVnONDoXcED9p+GOZ49LNhKT53OIip0yl4yv6+YlwgI8QlkLACvRT0C6LUQ\nIDllp+0ltnKeDgkkjkothwqj5S4tZx//ph6lYxXz84F818mKHhLZcs2JuzYC\n0X4ISU1T07ehzu6f37GwZXRDYSMRYZzoMLvNKCT0yBuZgndSQyGNq9bdddx4\nRjBA1bMd3i/8ebIBrS267oJXCX9VwNUaljXIXBCdRmM+dN/1s6bjoMhK/EAi\nuUpnjji8dyFZ14WSr4DlA+zOUXB6plNvQ3H1dGXLGH0p7KXh/e+JdXOpCC7V\nJx7g\r\n=tkbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSr0tTkyOn/VP2ymsPgsMr7xCrlKbTE2BVakVaYcICnAiEAuyAYj43GBA0fcqe2J7KgyR3J4dk0weYY/SR/mtV6gx0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.5cde9f12.0_1596481292860_0.5848515160190122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.1607ec53.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-icon-button":"0.18.0-canary.1607ec53.0","@material/mwc-ripple":"0.18.0-canary.1607ec53.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-B8xFq/vQkZnvM+mxjcEGqlXjVElWASOtBd4MRtHqomrBLQ9PBf0TTl/c6cC3Q9akv1wNmWxZuDJKZIwONqZWQw==","shasum":"950aa44d412fe6de755ee44e2667f0e3085872b1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.1607ec53.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGm9CRA9TVsSAnZWagAAEjUP/ieRE2aDbz63lEq4QeNo\nmUQq+WvnZW/tsoDKzQUJTiZqeRlL8k4itfW8hqMXWTl5TBKXvuTAkeJn1m6A\ntfo5XfpioL51t9NdPXHbesjig/0BknzpgtHrgbl3VMYpnToIaU5KYfKiu5Pq\nf/k3Oo0RWAjqK4HrNJ/kBEZnytW3dNvyoHpGNqlhMGGbnEFIswUt6YGXMSTK\nAV+D1gDdyjVPfs2ewJ1gAmiINCa2igx+nFqSFiuTcSwWS90+/Sk0LZ589T7N\njrsQO2Y1LxcjXQBIvji7rSbwn1jbqQcNJzJC8Tp75MnX8wrPvJDwOr529+Li\n6yolLgpgv3/M5ZfLqea8H+K1+WzK/Uxr2q9wHombdPC0y0Ba0PONHKWG/gHt\n2a3WSFUeePNg7+jtxcCnZ+ztn1uN3hpG9UGUPffYgAgRX16jkTo1IptoF+LU\nEch7PV0L1TxIX5blKIPmYdpKX7bDmYuUDEWfvj2fAFECSFVT3ptren8C8/Ju\nUxP+CBplZ1GtkadKaBx7ZgAMMhwNsgygcB4g/Wya+cssRl/wLplXs4iCUyZy\nQwmA3+GFN4Oyf2MYKWdj2srAdZQ/obcaDfle1ty7k6ikTzJKTdVOqWW+CIat\nktoST5C6Goyy1OT8tf3cYNfYDjMvs10TsyBMvmwCkBk0K+XJekHGy6tIYcS0\nIIBT\r\n=0vdi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDliA01wZwvgKBPimf7obEyAo2NFc067VAeaMMtQyWqbQIgM1XE1rMTPz3y/tG796nE55qY/H44HiQH1IVJD/M+TvM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.1607ec53.0_1596484028903_0.6216573647502461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.678b30e3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-icon-button":"0.18.0-canary.678b30e3.0","@material/mwc-ripple":"0.18.0-canary.678b30e3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mGjR497XLSih2gwgaQnNP7X1EaQfzz1uhH0T3RzVsSNeovUEpOznPS9a/A0rjpBfATBmZLMXU3IZ7RrpQsg45Q==","shasum":"fee432b6b2738bbee935096b33023395adbe8588","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.678b30e3.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqkCRA9TVsSAnZWagAANk8P/jrjW6WAhutndWWOKpms\n8W4hvRHz0u8dNjqsvitnEz0AckrzpsfS6VO6n81/hdmLGN71uOPqA1H1kfZW\nzSXWDYlnz0Lu02Ac7m9+m5KCqtHL/+S9CqDNrhHLKW9F5Magwrsh8Z8YR+1O\ns3ovr/8tGyzW6tWjIIfmCeA1AKClI+Z6XPNKdkkBAv5gU26kGoLPRzEAvj56\n5LMj11qn+/UONbtrCjrc2iEZ0SaP1ivtNOM9060mXPbawNFmP9WXgs2qEI5h\nvVY9tLOD8yYLy2ybUHx3okSlSO+7pppu/sTysLmxCggg81k0eHf01WM2lg5W\nNkZhqzlqHr+zB0M5O3tnlbm86yuyQV5mtW88qk4ewKkQl9AQ2KQx7k1RfPG7\nrqFmpNSmkJmGV9mhixb0PZ17XgQbvUvflNo72gVm+jSFV9POsqLr05+TCuX+\n/hTD5x7rnjqvZUfm123ySul8nYPnyc/a/DVYYl4/0DMB537n445Q+pC1wpSK\nfIp0Akox/T5C7aguiBmWpUyDCOgCiuFHKOfp2VkLFs0Tp5jxnKWEh/f7pmFN\n9yo6nW5Fj6leFw+JR3z1A503eFVdu2NMmKFL08PDlQp9JNee7ZJjct0psgRM\ndQLpCgK7MOgRFLJHAr4LHWdkHOJ9zBuA3gmnQF1AcervqCtIirYS68x44rqM\n1hJA\r\n=IQzo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3QgwfwQYmzEqjTvQPs+NSHlOk7u2XmNdFIg144MZooAiATmoDfoo0c6HEnTu4XxlFRHcYVvW1DNIUTOzXL3uwXQQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.678b30e3.0_1596484260492_0.1119343170511089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0-canary.21c55569.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-icon-button":"0.18.0-canary.21c55569.0","@material/mwc-ripple":"0.18.0-canary.21c55569.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LzNQTWFXVv4uFpCaPrAcpkxVMLoSH//q5XYV86gUwyRSfvm7e7K2MEFykYBwNhTNFWAtg4IjO7jN7V/RvSQgaw==","shasum":"e840b27aeedd6ad1b4afee6580d6e0ff975b792b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0-canary.21c55569.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwSCRA9TVsSAnZWagAA8VkP/1ZrWbb/IEy0FKSgxy7P\nR6+ZCNnPMvZnRys3WmlQxMJtxiLFKAo3CgPl/kLJinEfAwzLYzZygLPsuh2C\nLSKLQ2cYt4s4x2RuZloW1EdoSj1MBCXsqiPMY4DEkl1bqkXlRfLnJgCoDq3a\neSnM3TsUa9+RPqapwRWhwQ43h90XcWQtBrz/JL8IR2gzATF8RWvVQPhJKVay\nsrkriDrI2nMgog8BlzQoYm3S2Fma7u/Zi227x2vYTP4KKFHV891s6WQnQmHU\nc1U1hyTAAzq8bwgzaMw1rdzznGn6EyZHS4Z7z74nj7fxm527z8jU85aLutOD\nVN9LTaqpvJy0zsZSd8zJrJEL8oPcuSmui5WwUNnye52bHvepQTpNwkmftx2I\nDQf1GOqMrCNpxWP6Son73eSDfr69jd/V/DYRUPFbgvZ5RLnVj3gKyB1YSPx0\n3J6vPZU7YnmtbfRmQykg8wPaambmFEQMbbQpNeFV4mhSZKyBs5HnO7aLvrqg\n1zWXk4oHkwMqth/HtbhazIDlnCxn8fqqXk3dM7H3+KpQUt5X/kUI0z7X42J9\ntZZ9PMcdrW/I6F9IFNw7a2Lqf1JZWl+OqYs4yx6oXY7PHSQPqjqHNo2XVKfy\nw8RBTSwCOUVFZ3KY32OQuMRhHnYAHB3RW1rRmtcSfivO2rmTYUkDL4Mq1V0p\nr5cf\r\n=Yhn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy+spKjbg1CK0XIqGexUxK6z1y1FXVGhohBiUn5reJ2gIhAK62VJGaBt/25QVqMKtifo9X1yrq70GTAGjAN0jJEgjN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0-canary.21c55569.0_1596484625914_0.1673462600748885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.907d4d7d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-icon-button":"0.19.0-canary.907d4d7d.0","@material/mwc-ripple":"0.19.0-canary.907d4d7d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-x28INo9YMTs2RiHDGClBIoYIZw31skvE0DRBXBCDbCfr2NYLlI1ypsd5T/Zt/bXLMt1AYx3mwBuA6RHQzt/fvA==","shasum":"61252110c55580a457bcb54fbbe6c92ea35cb3e7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.907d4d7d.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAqCRA9TVsSAnZWagAAEwoP/2qdK4k4lrLzICkA7sYr\nUJ0UmkWrG+x+ElaEd4jEg4kwrwYwf4HiQxa3hDwdhNlqqpwmmmMvHyte4PYf\ncv+srbwFtdPVWQfG1cl9QuEjKFcPfCv7RUZZtdfU81t0E8WIKiTD5oYcsi0N\nsShdp9ypK9q+HVYWEeF3ek0sm4MvDE21mm7p0rVJX3glhAjU9FHqtPmJ6S1G\ny8nOL07skptXTfgBUBlgnp5GOwxXIw2VrwekF8EjNtKnlUp6anvMKiS4bUGq\nAEvYylpiptZpRhUdzYx1ZY0dL6gHQFhm7ttI04xZSFytbqP+aAX+0lC7iHz9\nNzHQTc8gKglyDDe1att4r/xs9ysS4eELH0/4w8GUlwcBpa+gDv2AN1HLBuO+\nQr3Faw8OyIohkb1IXV3BD7kGLJx8Mx3JCNiVBTalJayKe6vMldRGRH5I8Tnz\nmsSaYk+cIYxBj8z5OCrih2/N0vsoGoev8fvqpcakQ0qQfe65HNynFBsOrRyk\nDhyW5Fp9JCMgCRV0AZtCNqe7i9M/ApC9uqF/Bel0LikrDe571lVanN/wlC+f\nrIqWt8v0le7+YqiV8HnCdTO4Knp7P/ZaO4UpRazXSpJ/Ew/nWSEejmxg4Ykt\n8PYy4DWLx6pLFRiJ7nu1NaLJKfEa1jz3mZmvSejdZ9IMS+/WgwYV+n5YJAux\nSYEh\r\n=9/Jn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHUy0g0sJf3pJys4/J+dPoKjmdHlh5ChLbQ5AR7mH2MQIhANNL/oms2xyFq4gruKKj6uTb+Vbu9WRoMQtXPZeruiSw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.907d4d7d.0_1596489770161_0.8131121051914785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-icon-button-toggle","version":"0.18.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/mwc-icon-button":"^0.18.0","@material/mwc-ripple":"^0.18.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-/WhTVml70289sfgo+pBVB9CmHIZHP2V14cvoz95L1DDgWicD/VfCb0RybIoSgkoRH6lGU9czON1TRJlA6/2TsA==","shasum":"fa7696789bec6bf3185e26c46f1738fcc6d8c88b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.18.0.tgz","fileCount":11,"unpackedSize":45926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICSCRA9TVsSAnZWagAAr/cP/2wbJSiz9v7JC0+PaNnA\nzRM5TxrK3sAz6pL3KshM8jyb6R1XaGVKPoqanbAVNgc1p+X3kED1yHGXllD5\nw77zT3s9OkTYBBAQBZx3lpi8wszWMPkdrXr/qYRVe6eR1BlRi7YeVZfPfKxh\njVNevO/u6bEgsWVr5RRwqZ3o53DkKptBNjN0XnzkkVrHLki47tIzy4FX8Xzx\nfYBVfGrC2LVoH4tn2mKFEgJ7A24mL7lMe6fiHs0kNOarRkHMIB9UsJwoFeXL\nAgDUCQgcpRVOGocopOQp797Ya7Re6LLTYRyp77cltsgXQx2+TwEBG6OUo99u\nJVuex/dnsvXTs3VKsn+R9r4ePj9HDe11iFgzeUcatvV4LFbMDAwY+ooO9YN6\n0Q9pLVhUzrK9sLh18hQob6i/UHw0eUgyLoTymGaIdcV3BB2y1WpvmqyI/zrA\nLuxYVPx2qb4lEtjvtKMAfNhb6Q597rdHbxwI+a5fYDt/fiOl971HZP9q6UpU\nwj6vnhMhZ9dcf1I+yzrJ2ryVqLI3f85Hm0VXphTK1+wVrEbztlT/Xto3GPog\nCxj1dSj6cGqInPPDux7McT5m0XOvnh+IbQjQJvYP4KqZBE7lIw+7S/mgz5K/\nywMwnimXvz8ZHx74ChVmHLJ/VdfS2KMny5dQMmRgjxcDTu+g+vyWdAiy8DLg\n0nxO\r\n=PMP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3QfNGIVrsVwqXkQSHS+WFRpFKXBYBLTRQ9gdQUyhu5AiEAs4ZRjV1l3eSNAkq9H8IoHXzVVM8zFYO9MhFQNNfTM8I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.18.0_1596489873878_0.5626305481476157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.f7958e4a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-icon-button":"0.19.0-canary.f7958e4a.0","@material/mwc-ripple":"0.19.0-canary.f7958e4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P+izclGuUhKjWGJ/10YSdcxkD3jFVCnyOamVUzgdvVlF/+6xAIyH7iwnCBN7lsPMK0hGdVB3kxL5ucCbMRbyQg==","shasum":"ed1af201644d678bbc4a625a128b823858480a69","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.f7958e4a.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLVCRA9TVsSAnZWagAAeTwP/A3mipK9h570w0A7Z+cs\nV5mx3j/FN685RqoVy4PcE32ZGyNZjWR2eb2+kItcYZnzpsdXJuxiu9dLu5+/\nGY2zYsNne/v0VH/R8OD05p9MogSVnpdoqEL59nlQIS2uqlwG85oLDffjW2LM\n/korJQUfzLIryzpBnSMrzPacr0vbk85HRIia4xefr473TJWwujcnlUrn+Vpi\nEINfMIkNTWPrEInx4pWSy+FgHiUDIWgycOo36UVVFKP8uSWueWZpdiPA8ZX3\nKBhySgXMqtKfHsAG1XfNKA5U8yKwECXRi6Xmil8fSneIGSJul5wiiJb8Pzu0\nRNCPqlqYjIMn3+eIGPhg6OyCGbYfcniAza/uDNZpRyt4uGLyqtdr76riUqK7\ndWzLjcaXX2b+8N2r4qkjs+yv3O4ph5AqBMs18f7LC9iVzFqNwxnTjWUSxrCP\nGnQWo3l96/PIcFtCCR9fV9E6cBP8EuB/SqsQGjbRex7tS4E224aZmN/57tOz\nPJ3Trdn2x0UZKveGJZHK3QJdns2EBHBaHPEXwN+mSffeNpzyQtKrbdfLHszn\nVBeowKY835UufCg2s60DRZDpeM1oUaIAKDOxbu0htcIGk/A/7Aa21hN3Daxy\nhJDDV7BTMUlmxlMw5t3bQY5QFZEg45Qa8rPrtFvxJyLoBNCECuvYsOVEp9cw\nMGw2\r\n=Nb7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCasJQvGd7i+wB5Wdcii4sOVoOVU/Tf7eh9xT4aDLxAjwIgW/r3PzN3RV8IB7OoqhFdKdjwecD5hLqBu7mgLwD9RDs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.f7958e4a.0_1596506837549_0.10859917334790614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-icon-button":"0.19.0-canary.f8ceaf79.0","@material/mwc-ripple":"0.19.0-canary.f8ceaf79.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aH1ZIVxtgbe+GAOoyAi0j+o/IwxjOeBrbBICm+e2HWdJyoMy4B4R2cioSyefS4KvTHNJlN7NKCZyZF2K8zBBsA==","shasum":"c29be1fea96dc534c54aa3ac103d6927feb70b7c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.f8ceaf79.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSJCRA9TVsSAnZWagAAOt0P/RhA4B8TI1Lts9Lu1pm7\nikEx4/xWIkazHcrWleU9yn6s+ROq8vvr6re20Ql89beDTuLjG3TpSlLObipl\nIjZXgTKP9S8EaLO3Fh1SfvKPqynPnVAtfm8+u2OWDRJgY1ISTXncGB6Ip+HS\nS/LW8pkYEm2vf5PrCqZumOYH7cv5eqyKWLvF0AdAl+6Ue2gBoqULsCMp3fEE\nVkCdzVWr3acpl+MkRSLV0RPruTaZpQ7PamSesQ9/izzToBlX+lxlQW+Irc3A\n6K0fyS5trH5vy8E2HOhpOr3B3uvbWVavFNg8Q6HujS3CC9u5Gn2L6Uy2Hfpf\nFhU6p5bP6ZSdelJ39xFnYVbmiF8RYoNim/Nu55nPzyndThfGmyA3RReFUpkh\nrGujz+DlLqvp9GhAi08zM2ojFY4WBDipdB1XHL1YomG2bPsWbhptbBwb+X0Z\nfxzzpgAh2oMASkfbat7DFjH5bO4Q3iPifiyD5MHi24RxFECItB8XR1zaMBez\nAlP3KZf/FnIjLxmgg/PWrOfFgeWlw/noB6ua3F0/bhMIg89EAyDgscvQLx6U\ncCOVAUyFGI0bNK16AR+sxi+T8T1r12iAzqKgMWLNJasHkVPxfrVKG13Ra14k\nLYc34sCqf7yZLpSBIaOyR6anDkL9VSIpzFOBx7eyF9+q1ugGXFpIFx/ILJ+7\nYscl\r\n=YNLz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpCmWHwuhJ5FsRVg6jmI3Bo0FmDiou3EKjKItWmiPefAiBeXCdbdMAii53Yx0XNkNJYs/ne4A+BRu2ejvZlr2Emxw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.f8ceaf79.0_1596568712651_0.24517057115414387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.6b9e385a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-icon-button":"0.19.0-canary.6b9e385a.0","@material/mwc-ripple":"0.19.0-canary.6b9e385a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jbTujVX3rQ+K/rBATx/JmgbVpLrddrzIvOtzuukcODGlmyi1Q9tflfYjAF/QpldCa+xmxGf6Z9aqI8R1ZJ/Tmw==","shasum":"cddbde16c900d2863184935f852c3c7f4780c55b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.6b9e385a.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNlCRA9TVsSAnZWagAA+b0P/0uiDByufjb2LTwl++uS\ny+xhRsZZ430Fc7y0fbean0tuyCZQH2OkVFQsPXVn80aolAxOmqOVHK5A/MlN\nyqWJ2S4hPHdI4Ewml+tBAq9XBcVphFQVLIv8zmA5nqkDGRsQjvVgROpd0yX4\nPpJv3KOyKk7mlDAvUo3YxzM6tiJKG2Na28/yVHVKYM2ufwJeR23sKSpXYk4J\nhNk5obmyVbT6oBILfLIPWR7ggtmoxdpob6xq0c0eSGw7pRA7RAl5H1qyOUr3\nFSGh2gUtuV4j1VHAxDwkspIpJlsjID3wAkSAyzFPuY6c906L6Wl/tZDc1Xt0\n9t76ac5akww/ChbsLGYBd/6d6LvKLtmkS0yqXI7jH0Wm9B86D9FOEDFp8mz0\n8fqQWxpOpG/UK8kEWhxzQvXPyBzd/kHmSOzWcmWqPkcyBLf6EfCScLhBgthg\nOba1jklpE+yylPWLF+xH+FeQjZPWyApmD0G3MnUJvJwhfiZSJY5v5uPX4Dn3\nyVMA8s3P+Bstryn+luKVX/9TCIdX3q1Gto4CY09JxnbBW4E8KRDnHiAODg9h\nTITXr+2m3YbxFCyv0ckX1MgIZlOJNQOqx89gBSBjP1AqotkWfP+wrCw/HXl7\nQNVbGemjMQNdXRJzf7Ne4X+qUhkm2z+F1C2LbH1shdQVacs7njcUhJDnl2iQ\nid/k\r\n=Yoar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlmfi1wEeD9UaoWwphM8k+AOpwe3BIVc0dOHLPMG4lyAiAvLx+Qfgk5zvHWrT0lWp7L8maOfNQOnXkShJa+UVMfQg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.6b9e385a.0_1596576612513_0.30036306664176426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-icon-button":"0.19.0-canary.9a7e6d2a.0","@material/mwc-ripple":"0.19.0-canary.9a7e6d2a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BrHUz2tA0pn9aLYFqa24+chj7FBg13Nc3Q9uWafP7OtV7ARgTysgGHDVMo+saBHvI5aX6Unj9Gi6wE3oNqX5mg==","shasum":"9d58652c42fb1f7d3bd37d6b3e6ee29d11c6408c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuQCRA9TVsSAnZWagAAmykQAJ2oa8hZOVuM4AgBv9+q\nR7MMJJJYHnPSzjsEPXdkeE19PlCQaA3RqS1B4mfCGKw34TigobkLL74U7mcW\nFQjpuJxG9m+cN2Myov+BR+3+Rpg8StUikZsgiqPC6Mosl7gQZMprmJrwSfC8\npT9AtCPxqtGIPlCh512Q7f79I7L0HJsNpY8uLZXJlTSIYSwsBfdO8vU3FUlw\n1fiNUdc3qrpLevE7ToxwJADxXDPAl/2R6N1Zw128ZUyAwmta8xxDQ3pvtyfE\nCq1PMMqg9E3+IO1TWTcyM5SgOxXD0B701UU6OJ1+m4OnwddIoObbdeRcCuvN\nrUBol4TAWbemy59GJJj+f5lhmRardtN+YoOK/aDBr+aL6bmnXCcU8UozGDfk\nOH9hfPHanPUT3eoBKImn0j2VXcY2pLyWafErMWsL9+f3ByXEO27GymtvVz0U\nSIELSrr8N4IhnDoGiO/dh2TTIGF7v6mN8bUdlD99tLvOj55HmL6seM/luOOw\ncp9dmUgmzUkWYdF4dZgTtVlbMJbRXX45hU1T6V8qwIIYluYmzY/ufrWBmyA+\nTibdDwzck0QC7AxwgYkBepk0/TWsk8c7+F+8WbtF4mjyurcYG7aqK3BQBnHw\nuSGABfbCXte0JsN9uauMqUgDO3vCiRMSj7hhpCKzXxcFT8DPePQ2Hx8xmszr\nAobd\r\n=AAbk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzU1pfLpjCgyvKqKX+K/gOKzxvY1o3XytH47TAYXi8CAiBeTQ1ciQ2gWK/fr/jR4hfY0Yi0LtbbgzP1t7BU3WHN2w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9a7e6d2a.0_1596599184112_0.2976022792603801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.188f3f1c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-icon-button":"0.19.0-canary.188f3f1c.0","@material/mwc-ripple":"0.19.0-canary.188f3f1c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sxVN7im+ra6Ak7buVAHW2TiZQh7DIPbqJUPQS58eXZqziTRuAn1OKTzomGW677SWEgFOyIoo2uylY0b5Wq1naQ==","shasum":"b7843a213f00398add973356ca0d0db09a35318a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.188f3f1c.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbeCRA9TVsSAnZWagAAshcP/R/M5C8uYeb6JY+BORC4\n0tDFpmubMJ7As9e5GtjJJIlMxrIYfpdSjPoYNpi4BwJ9yhlqzcsegUxCU9JI\n7LZkp7yamx78nNWIImw0Ke+sszg75bKq9M48RaBj66yLPPWlbu0+GCMEkYe/\nZ6ZuKoo2c6d+AXSKRyjxOEUNJKzNwloHE8g1yfODppRHxE+JtsJxB+ojLmnW\ntqoDLFzUBG853aRhOr9/Zw/3QeCcx4VNRGA941tkKRiPp7jniBiBOpwfXxDZ\nBo/938V0amaXtmxCZk4YmNq6ENgljUabRj3KxNTS0Rh7UJkwf+/aE+6xhEtk\nKTTb4wOzj9ONqhXGI2sFNjqGpfjn27jATqPy05mb65SEfHSGrwb+15w76/lp\nzxvrHxUrch2CxsARhLCYr7S2pD9LQF2hmWZvg7ecI5nTAf9r6kvI1AOYrVTQ\nSZd8xCg3PALXYsy7mMbrZs+mSkGO2UISujWT2LGK7eDyzp5HbYAzSQ1wQkxY\n/lMXOov8l5n//8P/q6ndqDms+zhyiNcYxoQnvjh8NOyy66Z8wWLoGX+mJWAW\nkG6ua7G8iH60/xBHsPSA2IVEZGklsTKPUkrClaWypw8XL5gMxTn4PojHGHiM\nMiNma00c62haGrtGdoY+0YgMvJFuYx4RGGORkv2Fp9oAeU/NibHPh6soDCwI\nFbTI\r\n=2+jo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHSSX0hZakbUxOI+3KFE4i7zgg3TkuHnHowKsifCm3PPAiA5JEGKKtgbbmRZYSTTc0t3k5zb9OO25yQPshu04z8kaA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.188f3f1c.0_1596651229615_0.8368978788759083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.b6106add.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-icon-button":"0.19.0-canary.b6106add.0","@material/mwc-ripple":"0.19.0-canary.b6106add.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ekCjS8IUABbBeJUQokxWNnytIwMCzP6xFTnb6HqYiLVODCvfzO7UGVJKO+k840HWhjVPwGxF12/8qmlI+ClPZw==","shasum":"15afc9231ab696a025971cbc7def9dc13461c073","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.b6106add.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtyCRA9TVsSAnZWagAA6kwP/12947dHHHVhG+ucw+Z2\n8PT0aWkHtyIVWziWQQqAYqP6bcr/h3ewAQYX0E9RDR35/yUDuKquYHcz7e94\npATUGHz2KvC9Sg35xTZBXpyedQmijHJCwUFERu5HiD0vyHkQUm3LXBmONCJ0\n/qMUADeuSqm77rdDKwW7GT/jcefCNqyQOkZTylM+CbA8p9CgPeoDD3rb8bfY\nOcLcW45hnM7656NWTlr0P3I1LZiVjWyHM2Z57aIdNDMhER7IdgfgKJIua8IH\neZqMtwSvP3Uc+Z2+PjKJfpFBuVGRNuj6yake5BUMvzVNPO0PRAM5BTMezRZ5\nPtOq/elOk84KTVLQRFk4txKk7DmrKggl272Nz+kIb5P23IqRJJ4TQmagRwJH\nGH9HUGWdQKlQUyDFcTCykBGZ3e2dj05MqJM+RjaiEiB31urXbRTjfmAiBTvE\n1u+bAuCjSGey99szhFE1mhkkHBT+YIYchHWt0w8k56NOW4fUsawcZorO0Oph\n1gOKD+oo2OhNKt8G2f2wGSv5xycn9XSV6Ln57TC0DxwnDrknZyD9iH9s71/9\nlyHdD0N4BNjqUE5BxQmCEHU2XNanoYqkxJ3Fnv/M4od2afbFOjPTbvnx14wy\nKMGd7Et4FFuqk9kWK7aPr4CQte1DlTYTqKgbp2Hxfb7n0QX494BemDvt4N03\nhPxe\r\n=yPXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJ18NiQJWNabovVARZYGEOT56OFlHG0xPH3Amf0qW73AiEAlBqNyOwmV3MurbViN4sxPiGjIYKGteIWNQR93phgsGk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.b6106add.0_1596660593634_0.39812253041001044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.ebb4c667.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-icon-button":"0.19.0-canary.ebb4c667.0","@material/mwc-ripple":"0.19.0-canary.ebb4c667.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-In/RRvj90EzzYBJ8jV6B2oKqOBtG8Ez2xYHouNzi/5yXx4wHfvklhouGinHN+oRLBnxPy6Kcn851H5obJkCjNQ==","shasum":"16a21753f1f39c4fccc8b08dea120f260927c410","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.ebb4c667.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0x/CRA9TVsSAnZWagAAziMP/joOu+b74ZufoRjmO5BR\nMGPtDpqncaOoKzjEBxaRJA36ueEY3w1nMl316OvUnwprD92ovcN8P58DVBKa\nbDrPieysXbULoo4LWWvZo01NhqJGiqvoICiia05F+8NVNRsD2TIMvPQH6xtj\nuwMPgGfYMQgZbPF/XJoA6MuctGOoXyJ3IC51g8a9y5ouKAXyupjhJ+s9nm6I\n06I6YJTkRL/hcG2CWdZCtGNEEqkH8iniJ/AOmDaXD9gqY/oUoL5dSl0+7TxX\nf7RoskY41aFLMbS+pwqLnI70y5Ekc2bd3A1SI1k5FmFVzv6J6kH9LNl0TnyS\ni63ZYXC8DSvqxtVHlBvNTUbHusOVf+JLQC2bS2tikmeSqD1gFFAEi7VBEOmy\nblBptLbqM3IMpgMKVf6OzPOFJeW3FIfrMOizYLzXtrFWZf0WqFuu7pRVX4wh\n58vheUOz1sVzYZiDfmmoqBWwgwTNg04rAbxptW32kbJ6H54jkAf8MYdkXtVa\nWSU9l8WWCE5rv3aG50K3G98WG601gQZD6fjrpTnlA7kVYxAM9/wtzTlS1usm\n7YTeG6YahiTThuVsdrOrr7KqAe9UWoDn7NOSOp/3AndWp//ps5696O4vpTna\nsDgVcCTbYnx94J32jferknvwGW2+VQkRU8jJUD/sHOgyXnE8pnEo2iH08GLw\nFLxk\r\n=yt/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjVVmdP9ACjqejvpYOS03VxLq9QZLNJGKT34TR6I14eQIhAJy02nuf7oa+umEM53Km2dbREDOmxqNWVf1Y0LDiJWWQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.ebb4c667.0_1596673151265_0.28590414679131704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.aa44289e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-icon-button":"0.19.0-canary.aa44289e.0","@material/mwc-ripple":"0.19.0-canary.aa44289e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-d+YSvqqja/0PK2l3RB29Bf7bpm9+4YnfPXLQSbQXCvr0zC70ZnPZzCFHWEUlSkneTO/PVlfkzsjxyfBugesNiQ==","shasum":"0258123281cb8ff1f84f8a1d98f83347952b2b03","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.aa44289e.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEukCRA9TVsSAnZWagAAlDIQAIS7q/UW5kGRr+t9vgnA\nSU1HLWjJB+Vx3J+8giXxrHzWs83wxTCVeu4WMX9uRMAmltqAT7khdgKU2dm7\nhEQr6v72aJzGrh0SUobqxI4MB1ZorrDrOoc+Of/7rT1nmeoNs75atha+FtJq\nE7yTVFOhRHuuSbSdfLatECdqu7B3VZvfvVI8FyT+p2Wf9G8HWtgOSIih6U0e\nO5ZBv3o5YTe9nBglrKt4rl+iz9X6QG4rlFYk5JUf4eAhNNdeJV6AJxE3l9Q+\nQ0QnxAC/QEUMBuaNx+Lm+0sBZL7AEk2d95235DiMOkExmmKi8M0xvfVmXS85\n2SjCD7DUn1aIKiZS60GMSHTK6ggaGJoUc/ij8mNqdmWnDOup+QVcnukccNhH\nQJN+e7mBzmwcD3EmagFwOlJxwhy0xHeqg6ywwDesYcWf3xZ/StfDqfGCWy3Z\n4jxDpMacfGroM7Kfk+tyF8aKbdmOmjxVJ52BHjV92rS1LkDQ1t+UEYT+3b7U\n+/mrahiMH/UpbL/nJWFoim/hmkAEmZs9N3iYdyBdBpJoCeImHf+Pf5pwjQ56\nTv5tQsCWnTRrev2hX5/ahiT5ZG1hRn/0sd0WEEkivgemeruo5Uvh5rucZdvn\n46OdGr0E0BRvG/kYyiFvMSkgeALReXaVatGNUC/uYHkwPNPCXLTz9gxAcLoU\nM5rB\r\n=qM1i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/JWU8ulZEdnZHQMvCpQtTZqra7KIvC5UsT8IO/6TejAiEAuXXwgryZMgawQN1/5jXCFUhCFp9kVdLn6to+Nhgslwo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.aa44289e.0_1596738468271_0.7798076122845392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.e6b0816b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-icon-button":"0.19.0-canary.e6b0816b.0","@material/mwc-ripple":"0.19.0-canary.e6b0816b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OqdDgCtolJ+SfGHvL87SqQuGTZ2Fsq/lB0o497TQ6XwlVn4h1qT3vf6WAb8oz6pSjGXdsGXEj8g1Lp2uN+T+kg==","shasum":"3204355874cf0a5b53af81d2bcd91cb15123e67d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.e6b0816b.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaD/CRA9TVsSAnZWagAA3YoP/0H22uO8/RSSDHkGw+Jk\nQy9VQuvZJrgS0bDwcnKLoIHCFpVxkpzbj7soO04Ofx8cdxhQgbFm/c30xNMo\n4pPUY/R+Xy7W4VboMzil5Igtn7TESutVsOA5jsglHT7Lp3wMG00QjBWZVSmV\n0u+4rPuAtMGn8IJGeHEWYdHZlnCvE2MOJ9uN+saZk09mm+IzkQuknmXxAOzo\ntgDlXdeXk0RnMAUFooOjLa2NlxRgzXrB5U7mzu1iKLPHFHuTOqtZJMXswB/o\nTM3cTiZykj43w8da62Hr6K3U9G53eJC8csl1IcA2ZrT4XZHD+uGSBg5LNTgJ\ntDsHaVOdAwxOXU1Jb4DVxqBvkM+qzDpKRjt592EyEf347F+413/q00s9EOxt\nk8w2treljQvilp0xR/F0qn2P1pCIyYC3G/6JmUbfGYDBfYUSxJNOp3l4OrGv\nWxIb11O5DUzu3GoL8qUMBt0WhjBeyoQQ4rqruuK7enh/ZRsLlccDE6PTD3Ib\nMrQ9PkwxfSVvIFCweTdBWjrUzPwdWTDSo+tkUMrio4n8sUvX5d/MOj8POyy7\nB7BKvc77joVP6yd6HTzOjwlVpXHV+NRtFya8WWB2Wj0Inu29tY3Id/p07I+b\ncVJhVKcIQQ8Rg/a+mJ8uBjoEJb7AIN1+ALvjLD6xxJaD+lBFQeJmoIN4WvDe\nmjeq\r\n=gkoU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbBmYHj7aP7aHN2zkqZzT5m9KbDH4eMOK4XdKRyBGJwAiAtgU1uIIwPUakl6M+m3YESXWyWjWGkAOpAAlaav3uAmg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.e6b0816b.0_1596825855050_0.366245768236966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.96d15938.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-icon-button":"0.19.0-canary.96d15938.0","@material/mwc-ripple":"0.19.0-canary.96d15938.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-n1UyMN0FHHsHYUc3ygQZq9CCy7Nqa9VbD0no5caqgH64xhd8dX55yx0wdWWU0PqHN/vllSdaYzIxuNcRh0xf4w==","shasum":"84879c13895871dbda6309f0735b76015d2b51cf","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.96d15938.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmnCRA9TVsSAnZWagAAVncP/3PYw2H7P1853nWLf7iv\nlj4VsEVnU2orRkoHZJ5nNal094zCOY0T5zZagtzgv8mhxMwJyzUyMNWRO/5J\nIzMKgIAe4ykSan7lUDWy50B0RcGpaWxjJtM67VXbimUvTWPt/upnxV03vKSv\nqcu4nDNVHtlMteKYajfLTceSfKwlm/Zx7Z7SCHbzRkNtRGjPBPkXQC1QC4h9\nQmau7r/jXiG9AETTMl1P34m2ksFkBhdj1Ed3GY/pMWbiRbROnYwV/0Xj/QlC\nk6RgrAGFujYT6VjmE7eyxLFoF6Z4IDjyBq7zlcQP6wdIQEoILVdhswEo3DbN\nV4dY7O2+YzYGlBaJ1EdAOUNgCGo3ktR04dfQ24JS533WdYd7xhhaAV24i8Fw\nzMTXdvpso29MKZr1LNyCbUGMdKzidLxng9DD7vAZjZmBiF1eLnuvuDcB+tKZ\nn0KZ1bxsFfQh7OKjGNshp+mYLvJX70kQvjJk1hgDTWYqa8z2fj82f5YWy2iX\nejlLZcVzZmfADNyyikGLDp5ZC38lUSlGmEjtAdH8GNCz/3ON9d2yao6Vs9DM\nV4c8IS0OlgXR8k+g4Ax3e+qrGxpPRX6RsYzRNGgbdKK/Bz4VOB5rrtmVc80A\n080XI3pEW7Bm5zcUGD2NbCe2jpOCiP6soPkuul5n0clNPQu+MESiSHtAE4VY\ntLj/\r\n=Liaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6rzfiwF+uYmEo75ewgvpQPza9VCUULVAL0gM4a3FaFAiAd8atWwe62flK5rENgYaLd4ouh7muM/cNnr1UZDnJl/Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.96d15938.0_1596832166573_0.08047306135086907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9d991c8c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-icon-button":"0.19.0-canary.9d991c8c.0","@material/mwc-ripple":"0.19.0-canary.9d991c8c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LDxhEa08vdednUeuh0pvFAwei6KVeikBOQrXLye7OtzObU0quRcGJHc7iZWDiP0zbE3dt4WFLCqFdiGbE8Wevg==","shasum":"6f14288c1dfdc8f39a86de5ec94d7674a9c9c364","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9d991c8c.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdD5CRA9TVsSAnZWagAAN0YP/R3LqUngCGjAfEpyOaOG\nzGjtP/nDLaHRi6m6ikMg00WAyWjFxfcK4XVVDULyvwDDD04ZBWQjf4IzVRvt\nFdzALL3b7P+vUKHdXxXLYwAcEgH1iS1XENZF3g1UMrs+dTpmR7kC+GjGEulq\nm6mftQIdCj8L84FOJuxDX/hycLGU2JPCXYA5ejCih6NEcPNrOHuPmSpqdLpF\ndoeR2wwR1vdU4FEcuwdp6ujq3CAlNAJnPgRileyONcl1C0+Jj0rShKYhT5J4\nPSO5QTmI4o8P/vNfUG7Ls5j0w/EmHrCh6lOC8SEB3z6Muux77+8WErj24w30\nsvzItUqdRQzOLdnWxCJ5kyUB+VJ1FKw9b+UQACHeSvnQTx5UzwHmpl09rAmW\nTtS3ZLvMyAEU5d/6DFK7F+smYyCEKKT1vPYfMfUM8jWfOHbmstHS6aWYsoKw\nwDLCA53/+LzQ7OH53LHUOiKIjXaua5PXmu7EdJZWtz1SRyVN2y5FvjHL5HTc\n7ASL9xSHZgjundVFITOhBQ82NXiVZwi2HUy72njSV7KBBweGc/R45P9tdTR0\nho4Zkt0X74JQROayh8ce9YMLD9J/0UViZKiu3JYYYk88BkB7GhNBFHuwcpeZ\nbRfDRygYO9++NX69/bOF0sU5HmtXEd7lb00n9Gol24Jn8aZyjvCKw25ob+vj\nXvU0\r\n=/K2Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT3IIuaBNsembs+/VXtwXTq4HbgFOvZeyli8le8K0SWAIgEvvmJylSGKCcMKJGnX3Jp6QOk9fTUs6cAgqRG1XCsfI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9d991c8c.0_1596838136594_0.4781676447611183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.13bfbd72.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-icon-button":"0.19.0-canary.13bfbd72.0","@material/mwc-ripple":"0.19.0-canary.13bfbd72.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YXt9DHQWvjggQ/QZcSWcM/yiHhwAkeJ18A/rAsZrKWa4DuZQnyFCYl7A770igtFAp6pMGb09PcDKhcWc9YIbyA==","shasum":"386bb69bb03b1b044b81b53bf4965182063d1951","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.13bfbd72.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+0CRA9TVsSAnZWagAAIy8P/RSWP5AkVylGQi8+WrUI\nJWSX1GIGCmjgWbKGXtCw2kCSecZxNIcGub2vMDfut/u2zr6yb0EmLv19IqV1\n5kp//AxIsNO33PqIpUt24jRp7+sNf6U/lw2k0R0XgdZhdEyq67S0R53ZfHDW\nk+LKkZgb+djv8N5coH4sotmkznkxHQvDX7bN7P65GT5rX/gCc3Puvoxj0GI+\nLMzhJP76d/iJr96k+pijr+6IS478pvVyWtYp7IKV4MvErHopOqvXjzKdfrnZ\nd4RXd7ROwn/qtoh5mFMrdFusdFMjkQKGh3Sp2B9oOxbUW3Uf6FYs6KDKbicS\nVZ/DN3E7S+UFthp4d4VDb2QYSr+8aeI3iqnvEhcrjavTf9OCXGyUV/bxnWtP\niODwuTDhJBDIeHvtVDJ3FyP34v0ZmvHp0mKMW8EtMYTmf7twsPhNyYp4AdE1\n3PQ/sk1tOPqbLKF9rxhJOafmtKgEmpZJahUcFgK1T5khBRym5OJCuY+Ow9iG\nAb7UFOZ+VlIexse0QDf+nbbQ+dXdl7lyG8T5D7kaQW9kH/dLuO8GV4RUEOJf\nooXisymMWpTWotsYwRKFo2f7WaaeAajce5QM9ifQ/Xj8JutJlLSPK/4Mo63J\nd0sUu0y+eMeFF0QZ0WcGu3zF49tfULp9hnwgr2lJ1GB3Ib1Yf09y/H4IIURa\nIdMF\r\n=NROc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4euquGRuD+I/DqMF6skG19FZRSYFGkHvgvPjBP5EjTAIhAIaDRBQFwTxBtb7Y4Q7N9m5kGvVR7HuQEUk8ywY44QvP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.13bfbd72.0_1597087667810_0.5978963569219067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.30b1b258.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-icon-button":"0.19.0-canary.30b1b258.0","@material/mwc-ripple":"0.19.0-canary.30b1b258.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-18GieobJahni2xI1vk2iu4gOVlzXgtB0wHsqFDdoRjM1+A3nOWB2WgvAsSum/Ne7z7kkj1me6cOPWcDkhN/ytg==","shasum":"17afcb1fa7339df0690d8a3e56350071778052fd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.30b1b258.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMaj7CRA9TVsSAnZWagAAupsP/0pYWkWf8xY473wTtU5D\n+JosvSQ3Hb05GST7kAkvfYYc2NMFO+5m16AkkflGlS0i/GVqQ4Rh+I1XdM7g\nVPQ7wZ6WNTiCqA/MRy8ikbzA/fB+rl8vC4XbMNpW+k+KI/sIpVq3uxEttvXY\nGHgsxhsIjv3TRXcPkdZlfDLMezrvcjGeeE/LBhvlQ/X1v8j7UaBYmVLM/9Md\nCiSIw8E0lwpT88hpont9VsjWsrT1uwmQS5BYYLfDwAuQFBlhVGDEkcgze6hh\nicyV9aUjADsk9+pTzCfoofy+/6BkcwzLuH3vWJPJVDctZUYjK6IKIXCGlfxN\nlHwoHy6wlMJSKTsrbrYe2jbUfSRNzBt5sGEX90G7lw06BvInhXJi6shSmtWI\n7ZnkfI04tSE6ufWJV4mZyZ/VAj2ccKzhy0hTczdPJtPxdDH/w+1HDbmULH6s\nUmnXywHCwDftgiMyvpHWpwa0oGdg/M3ukKlTaRrPTdi1y2t2ehVWFfMN+dLU\nEtfB6juIcBnsXPzMVLdqj94fVNnpbebFrycYr8WJUulkKSW4VE3gRiNaTGsu\nErwAk3j2sVah0ObdjtcIe68c3UXEivTjw4Cva0YfxcZ03ejJd27jHptT8HJN\naU0JOteq7475w4zzSZrkT3h6FKkqBVDwkdb2QqNvBu0IHS4kAIsMCBj/eQuB\nxCsM\r\n=2Bul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa2W5Nyub+Ue9hlY3VDgRkPjWQbKARLPj9EH/8iixugAIhANG0ce07fGQdCVz9wyGeGOZxVMK3ZQ9W72QpKUHYgCYl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.30b1b258.0_1597090043179_0.23423649438619676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.1583e263.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-icon-button":"0.19.0-canary.1583e263.0","@material/mwc-ripple":"0.19.0-canary.1583e263.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IyM7tyPuCuc573wo4+xU93++l7ZGHU0z3x8qWhx5M5qYqsU/KRRRF1EZK5K0r0f2wzCUaHUXJcYT2A+4zL8G8g==","shasum":"52b16a0ebf59605ba2d9eccbfb6994f81b0976cd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.1583e263.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWNCRA9TVsSAnZWagAAiVIP/2i8cPMgCViJgpVdjdPB\ndvEUFYdEhMaUEk5G+R0B9/fSDN27ykcjheNybtiE07e+CElW3nRRFfX1Scov\n2iVwTps8+aI6wkIz7g/5fQhF5rIZm4EiHoYJwl09O/UfOodZMEUR5TwHN00a\nCvNw0hfMsu02W+XgB2EsJhnLh+MaNc/0K+W4Jb5vQQGAJI7u4gVdOzogUnPz\n1Kvx2rhwRNhFTs/f0cyj5+CMQcbBSOGYr//v7nqob4Ey+/dLzw8n4I8C0AIs\nd6Wu9/WJnNdrtb6RXj7lrOmFIDsv3MFEdeXcpVbjHcUvt5mYFWFj1JjB7wXl\nB9KBf1K5qJ7qCiYVVrMrHhVbC1qDM+BgD/GC3/l/EUkCh38zZVmxFSWf55Fi\nJClv8PzojjMILYKQTEhFxFPtx2vrdt8qlXtMfj157cAd/O8CfkPpxv3GUML1\nqk8aWsJlE9ADIr40sS6kmd4HYgqwBeaBNqti4THazkNtwQaHdO4hV7Obmx7b\nSRG1rDQed2veXpgGaIN0VC2SFlGlYAU+rATdtC9x0rmKJWiEeb6zI7VzWFL0\n5jkiGTx32/df74QNvMSzd4zOz6USTsn2jVJEXU5CPlWasLzRuD0ku+goNNp/\n6wT5PqFww0mBjK4yitOp5vWbQLHrjtJ4iTPuCo/3HFLKYZWOE2SUiVHYqd12\n/7ZJ\r\n=11vH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQXv871UUFFBe3ecaX+KldzUtCCZOiaHpve0WcLfUkNgIgNVkxZD9yIRHny/3eoietQisKj2J+R/E50pVCDAbAy6s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.1583e263.0_1597187469182_0.3953221592495404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.fefb1a93.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-icon-button":"0.19.0-canary.fefb1a93.0","@material/mwc-ripple":"0.19.0-canary.fefb1a93.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fUqaiVUb4TVZMqqr4sDXbPGNW4WrjOAvmgkfB1ALDs8VHd+tMFpYqnq2vwqddKUoto/DTm2QtP27JwPIW3XrXQ==","shasum":"73acadccb8f18d45ac4915567fd78e4e97040f50","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.fefb1a93.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzb9CRA9TVsSAnZWagAAYfQP/0EgaCktoTe4zfolwo3c\n5PYlKfJ8ixlzwXoqKvNL8uaKWlel3NgIY8zpyXhUCD2Kc9TxZX5yyqFbMMNW\nePq9qZeXirLAj69v/HHXELafPkuBclM7NysB00f0KjHvYC7h8wGqIJOI0A5m\nvF6P+C56I4eOT9Bb3nXuUL+V/PVDVLcy29qq8mkMwxzYwjJPeDe4bfdUK2J8\neQVmQd5NoGwSTn+YQ2DZwzfaXcEIRLETrBbj7x1vnUnzwlOjQUycEL3key7I\n9J54YGW27Ia2FGXyiG5vaABqEwk1VLEMlJ5SjgVOaAFwO+CSFKVkAVmcRk7q\nG6yOpVzU/ji5/jfJLusr8Von0xfZDd0y1l/Be+bA1SuZTeb5HJOE+qZAUNlQ\n8H1NazYRH8igupAzAAtW2x9sTuW9UmNr7/3qfHA6pqEXTAwyRLaQP1bmLwFi\nvouNBlWqgLcSVxtQ6+5c8eE/LA5N4qSy4AMCyfkiupS+Q6nYZPOXzGJudZfQ\nqpRNRVJchgY/pkLXvnYaapKemidkKLiSCQ2e3U9J/Mct5VtD1cCgH7AMv5Fd\n1nvpw+cWaT4VGNinxyyB8y3lCvmNwgZRw7Pq+KZOZyI5LFPiaexP9JmJ12+g\nseNo9USFNKv0+2gzgJ/5Nr1lszNa5HHzI8dwZ1/4px1cZjQ6DM7dPnkABv2e\n1CQw\r\n=j2YJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9hnHQAlueXnrSOfTS23qr8HFegMJGR77uc1Y9UKJsNAIhANZ72CvoyuJlqZKVl5Et4tqdcwllBTsVvw58dtfPIaUe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.fefb1a93.0_1597191933178_0.19668428466087318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-icon-button":"0.19.0-canary.1ac5b9d4.0","@material/mwc-ripple":"0.19.0-canary.1ac5b9d4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-An6SEKkPjrWYS4ILmjutNT0XW11V/CL1PuY3LNvVOqpGcakRzLo2Nv6C+V+BGrF+BmIvrDWm9D2mDPnAQsCgoQ==","shasum":"5b4f3dfad10e8d645d2083f0039d902e46f751ee","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSmCRA9TVsSAnZWagAAJigP+QA+gFo58Mi9DbuYPHC3\nBLe8xaEoInKd45YyR+6SzVlr3xioVoZh1yNzCtJdAFacZEaO7RVr55dk6HaM\n74UA2Yi8Cj8e98c7XSBpcUX4HDQJD1URcoG+9Yz0Lob1otg1+FOOxB7Q9iPE\naSX4sT5M4SNCo/UZ82tEyYQsmFDggicQTZXTFAIH7l6+Mvcn+7FZAv99BMSs\n2eaWceYfI9/gmUey3yOIF5Xwn2Jv7b5RiEdxvifnyDIPIiLAaxZK3B/Wg4w7\no7Uq+MTN35flMcC5cmDfKF4W4EM26I5KhOUdP2HScczNimZW4OiAqFKPPIo0\nssthzH8RKlR+r8LOMDxKPEn4ZfN2hf0iJHDgwatJYZ/JfDb0LxOU/bqZEz6f\ndVEgh5F3jhKGOJmW+swurj7pYL3W/xilTJQdVUbyfNDpHY+08/HklIK5vASS\nZgS5f1I8yemvYWwPKGsmtLH9xNqZF7R9P7ZuZZr668egwMjZDJrteq3QtZKT\n7CfpNmL5zkZMa2Mx4kjPb9WfpdAw+NSWu3IX6IB+uUoGPVaXD6sa5QVU2KkV\npK0y+fBxayZiJyD4X+HU+Ww7N6H9dYvtAQHrlwphZdwFFn89CUzdq5CmVZQz\nN5eqnSWbjrtfmtvpl81Axq8G80z90a1GD4S2mnwIMog2BFMJrICrF2fIopey\nk43u\r\n=YmYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfCxKu5Xn0CKSLk5Yj3KhtTbNY2I8Ae4w0YtNMKVtudAiEAw9X3Cs84uAjEDNbLE/ufGm5iUxbQ1zJqSvsXgmsTq88="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.1ac5b9d4.0_1597256869935_0.6291340990554759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.f17f5052.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-icon-button":"0.19.0-canary.f17f5052.0","@material/mwc-ripple":"0.19.0-canary.f17f5052.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6vX2Ow99KAdn16JWInR6wrYDdmvHBfQkcj8YM6VECyULg+REjUh7Max4GLZkeggvxcHqLGsBQCv4KQXXzoiy2w==","shasum":"b5daef9dc5840ab15d76311c834591c05d80ec31","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.f17f5052.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUQCRA9TVsSAnZWagAAkDkQAIsMKeEFaCjKq/wJBTk+\nMjvUpLhHNl7zCcKorqclr4lIHikJTrCb8Dh7E2SRqK753UgkoAo/1lvxcdO8\n0zxLV19IuYXgZoyR/7BUd/wgCIuWX6Aj/d44oHm+CsQUpLGVVcI6lauSVH1E\naKEXTTA57bDwCpqGy+zqDfGdKbUQtXZRbWXCpSZ6DPQJzik62Mzx5uVfQee0\ngmm3LgAVLivpR7sMa2N5E+Emm81SndYuqFXE2yvs7f7I4ACaRZoDBN5FZi2X\nQgGuv/6mcob0ZQUVM0ko1ESPI10eUbPyQkNpxwPISZQxKIxX+DsriXGVfV2q\npnDyJYKVa/X10vRubdPbXh+asl4IkNkQaC+GuqI1v63PJgQuDgFGsfkVstJH\nirzUHCOgy8g4TsWRcL6Bucaz1bK3qPilmrANbeI9DxximRQ8JX839sKHapFL\nBCnGjR3Lbky4jvNy7gN3O0YPerdHjBCNCa+17Y3Mlj8Ozv8a6Bla6mWQQqDv\nMJOgAsVA9u1K5yRpXdoJzWW5Sc/kUvbbXidfSCZnW6ZQGJ2TFx9rlpiggruZ\nzsGkBfiQAP8ZyDykDo/ZMV4DlWvmgrYPYaT4s6CAu0DjXMfrnx4oWr+sfuNa\nS0XqAnAAxI/qyvSqbKx3cpBUPVuMy4BHn9E12BcZqKjKj8cwyQ0WNU4kQ0mI\n9EKu\r\n=2GfT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZMcMqVUM/3VY85qh8yVGYKu7Jr8BW5byphTA20Zue9QIgZBGASOrPnkQOiygb9ua44p7Z9TlN+pI4RzXdlhtXsh4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.f17f5052.0_1597338895632_0.8506704413944954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.80b5d20d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-icon-button":"0.19.0-canary.80b5d20d.0","@material/mwc-ripple":"0.19.0-canary.80b5d20d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uXeCqT7WLrT4tW4wTfMNM7pNI5cjU8mrgrYCUWclWY3AswFCkoUxcXwdMx/51REbdcA8QmPLDZ/zMCmE9Ybpdw==","shasum":"77119827926e3fea0fc37e336e6a9848158dcdb0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.80b5d20d.0.tgz","fileCount":11,"unpackedSize":45995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYPHCRA9TVsSAnZWagAAU+AP/RkDnnCg1btjr5iqjqcj\ngcD1G+yAJuPQjc+0l/XaTcHTwl+PevxqsgbcSj/RERtGB9jN0TmSv1wIeIuK\nur2/+FWzyfx/Z1QkWT8fhPi311yTErjEf1BYmH5X2RP7ojcG1KFQ11bH5Rqe\n2UNgd/DJAzJ6kADSVejDLX5BvrBXWuKQJMsIXzDYuTUvElDHusP4TF5Xdhzj\n1nLQj8Wj137bJ9e7tiI6i0O6QUxHa9bXYOjx77Pcwkf+0LLMFEdphGl7GX8E\nKDOmz741cG/ZcTTzgLmxMWCK1/amSgvb0hKg5nuZ1olcg0NMC9XIANIY/dma\n10tqF0lMWZTds2qSa+rm9bD629ZfoT5a4P88+XjENuPu3Hs73vae0XIB08vy\nFMySbZHDlMXLYUUVIDyw0VLBL+eLAJDRHHhgAkve5rnPB7pX/QMoeIulQ2v/\nTmsKwOiHrff/AJpLSJ6fJDKor7Bll/ydVS9HBXyEHcN7fDBh9/WXq87EKTGT\nzpCSQVzvsG4O9EazaBfcD1hZvfKUUfZz/TvxmxDGnSYOy02H94xE8p/d2zb8\nJjW/1ucoC4UrpAdp5gFDOHjviLggRxmtkn5Sn6DCfagJNwHcZhizrHF3UKO9\naWVvyVEvahRZZv6n1rl5LcxaZdXd33ffh1BhAKs4n+naSj0F2Jpno0ZxhDZ0\n3sXF\r\n=ZFDI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnEkw6vyIenBBhQz8TulnCDmSOC5PXZLha0K7wZlYXSAiEA97PWyepD3dXo3TaxKOF7fmP4E7TA3XnbuXwiHjA8S1s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.80b5d20d.0_1597342662829_0.756066368505196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.758635ed.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-icon-button":"0.19.0-canary.758635ed.0","@material/mwc-ripple":"0.19.0-canary.758635ed.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vUsd64uPZoxyq9IPul3JicJTddr/7O2dRp2uy7/fRefUX/C+aWLKZnLFmKzPErYrW5MmSaaXgu44C8GvJGVcfg==","shasum":"6ed2edf51c65a53c8cc0f420124c53bf24c403df","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.758635ed.0.tgz","fileCount":11,"unpackedSize":45983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscYCRA9TVsSAnZWagAAViMQAIaxSDEBOWx6Qn5sgE7q\niBAvS0TjwMuz78AT2KyH43aPuXbDzcHUf/n9bi5Nkc+TbHiHJ2VCAitZ2T2D\nzrEY1tsTpQ+9PGMCuOpscSNTiDCMvnow6YEWSkW6CgoWJqomOp5VD4t63Anw\nQBDvXVteJphA+wZHSyI9q7EybzCzMx4r3KlvCsacG2ZXQMbO+3/RGlOPBu4D\nWkDmO7DZrR3BsTWtPYXYxWgM27d0MyRnl+WKQjAEyVvN+pKDROJ1HtHzqSQL\nOwCbRoGQ5O0KbIvlnQNCxcpXT+EvgES528mbXWaHhqmdjNusynPmm4ljiEV2\n/5XpsjpeIfqbI5gnp0xsS5i3wUEdfUMYYf6wFlp9N3v8K5XpBCiJNf3lSRCS\n6OOpA/yg1t7ItZ6aB2reAPYdeiaPdlC9yPehLIeRdaOqZKDj4mD8iXP8rkCu\nvIpQ33azCVjb/Wd4LTEHBYjIGbCCOyNYzNAz98bLSlQFonsp1YRi2ZY96G1z\ndMLgc6/e8RFfKI/yIGroKcT1AS4swq3M+aoueuP1lSQ+Wz8rKmFlmFb7Wxo9\nmgGxHSAaXUYO/CjmS5xxlNleIaD6uoILD1e+hLkBvK5wVx5AEMdu+Sxhkq4h\nz6YoSid5d31oneMrIRvLJPYXApBm6P7CYxUr6/VperUshUrUqNx0+X0djBHz\nj0dT\r\n=9idS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJB5bk/NXRHYaBPoV0J+QmJpPjUnkFgfkC7JniiB2xoAiEAqrTeNlBD6u2L7zAAhLD17lH0hduMsHkuD2T/tJ1Sikc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.758635ed.0_1597425431959_0.7239371014121392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.18d6b808.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-icon-button":"0.19.0-canary.18d6b808.0","@material/mwc-ripple":"0.19.0-canary.18d6b808.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l6VUMPNFqeqgTsrnMruTmZsI9zMNuhnYjhHQ1nM6xtw8nbWptjEbG52StuGALkyExXq4QXNAbXVfGl0irLLEjQ==","shasum":"bf26cc401ae3a8ce82efc8447c4ccf22d43d5dfe","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.18d6b808.0.tgz","fileCount":11,"unpackedSize":45983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlsCRA9TVsSAnZWagAARfQP/0G+D0lzUsY0/T5JNHlG\nkcZWIiB80ALIXGy/C5fLEmI2yeiIE8Hi541Bifm7birubQdUijqY27wYbmFo\nLTR4tZEWVvwZTpcLmSuksJbk6Csh1ik1GP92e90h70bfmLuufC8UmZNo7eiP\nGIhVNZeziGBmBp6+z2YoHfBxlXNcj8SXLSIwv4jS3V19a5E6WS9xHcTu5hhD\nEpEQTenc/FipYyP5V3vM4+MVEbWUnoprf9oXm7kty79fM1Hkn5ZlzLpEVJ1d\n+w5zHZkpEMONj2jlIEOEPzAHQcC1T/pT5yLQxpbiUPjxrzF7CT3+eySetrAa\nDR+6fU+jr4KQiAvDnpG4aUHd4jcz1NP3MrmM+2FyxZSMyM2TGHz5KYwlAo7G\nsWzHpXvbP28s2F58pdOihSzt6UWQ2KihDBoqxdRfR7JRSU+ZyL8QFdOcX/WB\npIN/YwDf9ogKXC1RKGqg3mcXdjJH4unvyF/Qpixka7EzNIhs0DJ6Fp++Cy+K\nF2xqtKL3k1tktz4XAnFBQAxJstUv48qv60T2UBa2Pvx7CgZZmmIRRy8+NORs\nIaQIDSjPcMN5ePRaHkiif3rRl7mOzBoZfADvL/ALsG6wvRvT8h5KFzbhkUcQ\nBp2S0FrpV+PsZlMpdSxCMxeDvvY8pMZvgiJQT9jF12E3mXvvTj83cvINJClY\nuPso\r\n=ZqbO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVtKJaniAgugmCml8OpEpXIzJtfIPrKgp4KAow9Sl5YAiBIaqTmBRoHj3y27lPFX1vg3bc1h7t/XbZvRUzQluDLQw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.18d6b808.0_1597446507905_0.2616095767046782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-icon-button":"0.19.0-canary.5f8ffbd1.0","@material/mwc-ripple":"0.19.0-canary.5f8ffbd1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/X5/VjK47Mt82aBnBvjKqR+iHc3a6VO4DmPvg04S2XoS41ZroGxQPOj3G5T3GIn3BOd7LB9ST/Q+w4/7tVu6hQ==","shasum":"1b05cc86ae93d590245ae7cab4d3373998a64308","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":11,"unpackedSize":45983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGjCRA9TVsSAnZWagAApBwP/irjux9rm0AQb7SM/0qh\nzHsgdIaT36+Dzz2C0vUbMkZC/HkSItrJ8490Ix5uiswr8xCSO/GgLVylh5yO\nRzpAeKCxNMVZ6UnDag2zzNY2U7jHjHwJfaR3huBoeF3QPKlIQKUdNWV7ZNwa\nFsBg0T6GQ7RNWu5Ni2c84sFpjGkC1mdwyipt6QoOzQb3h3f7sH2OWaDesTNq\nRCxKLtQtfSaAPMwzyri6l2JwY44LzHbLMXNR8xgudjeVu/xIe82sco1rEXt/\nhOl8Kjl/qyJy8oQW3Bi7lxEVbBmVDwaTvkoMHQByWau5IV4K6IDVgCZwMNh6\nZo0YS6cb7XiafWxnFlP/bygcr8GAclXtPa8AgIHPX/LO1W9PtKD6dDrXfkjD\n6bl34Azmfop6Sy13po5u0AcnlyIprY00sdwRKgRk8aXYqlNOCDtRxPXrw5EE\nyQoygD8nTCtJElQWA1lAQp+hFQG/A34ppkIXrUnQ6tCofnd0W80DHMD8iVNu\nTKQhvFz8NoqLro2h7U10gYchLW++dGeaMFeZ+5iVS6W12avJokBXvtRMFBuQ\nxOu574ABQtHP5Iix/AvqpRQjBO/SNTEka4W2aUYOOQwhWEBFlieVBSjji807\nrwbUksWLU2HMcbreuBym0qzbncQByI87dllKIRXUL3VMXlgENbJUoGUvbRy/\n5RIS\r\n=mGQT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiBKdrPCP36sczktLPcnn3E9IJPhOgijteun7ucnGwQwIhAOU113OLxcUiMVCLGHu6TO3UW2CdKOSskhHDJMgYcINU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.5f8ffbd1.0_1597702563261_0.11257043880852446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.8604d59e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-icon-button":"0.19.0-canary.8604d59e.0","@material/mwc-ripple":"0.19.0-canary.8604d59e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7vLrWeKVDuBEjDaWkWaIWnej1SwKVyCvEY9nZNn6Bd1bz4VyR4Fy80/1N79xxPxClk6kG0g8ZfJRJXw3rFZdgA==","shasum":"e19a89260575dea556321f67a7f93507df569b39","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.8604d59e.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyjJCRA9TVsSAnZWagAAxTAP/149mHYkTQnagTQ51y7d\nhtfrKEV92pf3alEj40bj5+7vl4zkmu+y2lOIQ1RyTiHAAp0a4Rtv5nGxjYmk\nTaN53v055fG2rGqoEwBZsVzGRipp9aCLRop/p9dgm0BQJwulnNA0FoHK/ApH\n65ZoyjFkcVSdV4183p85O2myFa1Q9ssYo+wWi978nYyUZWifYf8AoM3WqWE6\nx01VlYEHQdmDiv/HSXltBB1mQ0qRjf9adSOXMZh+5MBuZDRC6D3Ak4eqaFZn\nEQ3H3Etbv854Dsw/dS1JwRWmKGmPkSAlYVSY1iuiXAjxjQUyUYMfQbeU+bJK\nd6Pwb8oowwEqHsKrJwHo6xb9D29u61IEC24ZTWYrCjAYvr2lrtmqhyGQkO3w\nV3zVuDApRnnN4Oj2iICMIzFfw6xv8tO7LdWe/FBJNztijOZhF3Qy1LqzNyir\nCwgYO5JsCk2mcV7n5l5deHQSxczyFLec31gGG6qiDVreNqZ8XKd/98SOtGKn\noZbwyyFXbnM89nvz6brgBT/MSfuQXDiR33PhjrvzwX1MTKZFuYKY//T1jAL6\nwCgoR5MTR2PF8wHe0wLJav4BTWLOysONyMVmjACMlCnJqkQSNzWRSXgJUNv4\n3GIqbFRJh67ulj3ECOS1uLVWdLTFNwuDjkd9y4aA4s+wTGev/vyfSlO+Et+x\nku9B\r\n=jEPf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH0ODD7OrXgldZgT8p2PMUeg2I3PRu+DEejj+r5ZdA54CIFT7MsfsdSBHq0IKy+jjDx0AUTCA2mDYtc1++B0KbvVS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.8604d59e.0_1597712584687_0.208159509426586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-icon-button":"0.19.0-canary.1d7d5e34.0","@material/mwc-ripple":"0.19.0-canary.1d7d5e34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-thSl4J9Y1XSOs3V430GYN30/G1ke9gZUAb89H8yxxitVdSglR427KDvnP/xuprwadGo262qSHy5svHpmql4AeQ==","shasum":"b2949eaede3226382f9c0e91b091509006096721","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.1d7d5e34.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOypICRA9TVsSAnZWagAA57UQAJdnDZ+0P8hbrfDGWfVS\n3NqYbzqbvWNJTJsu8NDdyYG3NZQ/aeFvUe0FKQggQE9xf12JXKMczpZvJ/L3\nIO2uxFzlYcBrELXlvDQKSjEsosgX/z6IDcSjpsLbVGXfjv/mYu4oosv6N3WU\nZ02WEb2dICs+UCbYi7bstPYLgFY11MUljbCCy6X2yswm8ABFMIkCZhnljNT2\nfzBBfBYY9muBvOuDhGR+dCASQc7J4Xk0yk7jiKjbOzh3Bkau+Z28B8lkeQ1R\nrfnU4maX/DwmepaPSiaHzf84qJLy1uml3evy6Fi9IRoqJ32Hc00rMQEWcYYH\nT0gdsJwmKG5qD/6dZA0+3RBfYHrOkibFv77EU2AzBHSPJNHRHhac1YLEsQXi\n2h/x7hdJiFrIH5AVpAwP1sg738sSTY3ulTmZtmPYPS6+Xy4hbtffIt7Cp16h\nSODa4TXMzikGekk0GcU5mBYhyxk+OFgWXsBiAQNEckbN3PQzQSQfcWnHgI4v\nYCo65TD4TwmG0imMr1+bX6MkJ0VgGOYzM5gmAvqK2eQNoxxgBliPqJX5CfVe\nbOC0+9PeqWL858XO5etdIRrFeDKplzza1oC0JgspUN0J91vLkHWOwDglETdf\nmXcoytqRA6s0ts56Y0LLwf7ENfkXyo1lVTG8cEyjZhPKQ1ItfGI03Zs9FpZ7\ns5nT\r\n=vGfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+Ap0eYDSGRe1KMlF3kqOQR2pCjqiUuCVQgneaw6wMgQIgZBDjGnLc8SYa0c5hUdF7dImkBIsKkIxLxyJkWr72G40="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.1d7d5e34.0_1597712968440_0.15676162914339575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9cc95c07.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-icon-button":"0.19.0-canary.9cc95c07.0","@material/mwc-ripple":"0.19.0-canary.9cc95c07.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tPiYdR0yrrfdIz0VIVu2/zVA51vZHuvYv3TdLf0NHiZHlUOb3QZK5mJatOG2tjWP04eGxvi2u55d28e9+tbhkQ==","shasum":"b2a7b0bca4d70e337252089f3f0c814d534b4592","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9cc95c07.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywQCRA9TVsSAnZWagAAEt0P/0FdEzpT5hV+/uaUCliU\nvOLtTC8sGIqUCK6CAm9JHa6H2nc8lr7a126/VAYfIZcfQIQEcb0icRM8nSva\nXIvNn67YRfUa0hBMQmowjOBuFIXv9wkUr4JZDM8rPRfElfdGoii5NNh6neK+\nsaSquXkhMKL3YuMYw628OlpCGyrJ82r8xgpk5GigE60SXtSLmvUF+k0t66M6\nkPmx2YzdxpWZyMnGBItlF2JMq1i9TfHEhGQEkJjXgA8jk4VSnwpCrM3nB7ot\nxIOM/BLNmQpjJpp17iKmvikRTfSrBXYugbMDo693Zx1jLfhuQK0f1xWMsONv\ngtw8v0HE3L60hBy61N2FcrAixiMNhaH5f7GynKN5QNfE9+AlySfg29/2BE7c\ntk9ARLhR1/Toet6xDukeoRDH4+BG6SW4wOiEv1Rg1CYiRa+KvbKEcY/XWp/2\nge+v74E9oCPOLXBmmTnLOn94UOiQhVxtdX5pl/hO3ro97v7OLsw6ZO+t+l+8\nLVlnkqqQUBZjMJWQBt2M4irPRMeS4/bECLTG/zZTE6OBAYpGjCIT07L1rjjD\n16j0s4Xxz0n2fWaLv0kuFjtlFKtUoOII0MPbro+VbLWbGzDOnI6S7zhugSeF\nEulNHCUJd4VcHjWIbnHrCF4jGvaK9Tkomc7gGyzu/uBgIrqc/Msfe2R28JpG\nDsv8\r\n=pTzM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMPOoq+3VcVdIkrcnUDIm04F96+Rjj4ybh885Rs5eZfwIhAPLcc0QcYOeBcIMzJPpNcw8HDXVumxOmhiduyAmbdt7a"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9cc95c07.0_1597713424004_0.9131058012574034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9f65ced3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-icon-button":"0.19.0-canary.9f65ced3.0","@material/mwc-ripple":"0.19.0-canary.9f65ced3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eawY1pqRFOZAdSRKTiBNFVF0P3PVUZ+KhWge9aQre6stZuL8YmPx1iN4ndZQjLzcXQ8URk8S10qlOq0ZBQ8AlQ==","shasum":"77ec59d308d623600664b825f43843ee80a5e5a3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9f65ced3.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDciCRA9TVsSAnZWagAATg8P/3dxOQNrCbH8d5bHvQC6\neCGqapla5kPIdE69vsHxKNL53HGzI5hslYPSVTmmBHpsokjT5vjcFPv0DNYN\ncUbcMuJ5xlSgqNCm95+8PSYUdEh4LDllw55N3JX1TNb+b99dbux2MgzOsyOF\nO1/l4ucVy4QsLwqc/lkMoVH8vQVstkz9SnheGx7dt5zFrQ1Fq0316Hct8eNM\nd64aSPWNm9ASSfWfbA4lWFl5OKHinL/3Zh36Gu4J7+9gQWUVTxZ+tBDGIdEe\nQyX5kGkm6ICCXK6YFpA3hycAJ6x36aTNB9h68QpMrd9p4O85II/4Fc830moe\n6kMCuyTH12WEqsUIo+gnfCQ8CBsnkAlH+1fqtdplrBe9Ys8JopDyuKpFcDsz\nZI1OZ5xTXis4OncxXLqJYDpOjYsyfYjyUNc8LoAJA81tSTHQZhvH5f0jGCn7\nEvVL0i8u3wUB57By4JpdSxOYjN6z/IYY+vhavA06aVu1qNtZSa/84zhl2oSl\nAr1XxQl7Vr7GWIQ1mMXE7gr1Hf9BCYxwcoW3yRAsE3Y2RcaXghgnmVr6r/qe\nnf381Oz0Jxiy5FevHHulMv7L5lzEOA/mS9Mv0Vf4mdBnhsp1GnJ3k5K94W2E\n615tSs2RV2V1ocQhy1rCmMdpZc/notv8sJLdtzwLKqeZ9l8ez/iShePbsLlm\nJVHS\r\n=CbhO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuek8h3H0X34OHmoCZ8vZKmLrQ7D29ViLx2PudmNtjAAiAXxYDQzsr7LY3wEKLrQnuINBvXTbPEX9V48b9ghg/w5w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9f65ced3.0_1597781793893_0.05377508135243425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.5962b365.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-icon-button":"0.19.0-canary.5962b365.0","@material/mwc-ripple":"0.19.0-canary.5962b365.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NCm5ZLOhScDxUGSEGiuXhU0TR7YYcqJjkDfb6f0066N9ffy/2oXPG3n7QdkaNeowsGpfs/Kv5mI0O+f5jEM99Q==","shasum":"ff3f8ea32ae75a03bc34164e935aa659a5b517cb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.5962b365.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYurCRA9TVsSAnZWagAAPbIP/3LbbvBVuKh5zF1/KTJs\nnsaMGMwhD2VRLlUek31qlT+DacTFzk/jmZ1I3SWTL8GXsWO1E3b5OZDp6cMZ\nY59yhVmUS4kNx8XKAlfDFBLOO0CYjeBgG2TOdZfC12C17ayQO+Yj6sQDIQBp\nESnIJRoUOyhA50dSEJkMuga2kthwbkOFnJkHQ5BpRvIgCO/OHGq7SWbgC9p/\nOEFHB9sOtw7zVlxLn2leyk9jBkp4dRjfAEMKVEnDXeqylX4g+45+M3MqyR2s\nRYPFD5dkuGwHDcisw1feOIKsD31fTtrqHGGkRuEi8dh/pJ7+KAQNO+/zOVCD\n5p2TyKidEKa59sb7ZAh+5gfpGq3LSGx+fdwoVYSo+OMPZWc/6+p4HJut/IeR\n5cEjMhwZ1Xyq7bvAENsG92uQ5o579OHfEHha/3hFRSmresa5A3Ptsg1df4LJ\nQa7Nzbdm4Q2s5d2frUnvfQSuaqc4tamDpu63U8WTlVKHVsF56vg+KvVeyMex\nSA5IksvAFvdIuXUIwlVBCsMVMZfT0O/qi53x8Dv7e91dKRs8SPJovJy+zwZc\na2rXgbuw89v7mZNlJeu3ZJyPYXMQrO3E7qN2NkT6GCNEsBNSAytgGaGapzN/\niz0IKtowHmtgqGfs59Hn8ToJvtMiSx7Jbb8SC6XnTbc/ZT/b6+nfQeDnkDus\n9Za6\r\n=NMgk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWf7bdxOzLz0tCrp4qicJM/k8IlwdVRRykZ961cSJMgAiEAv9ZC/SZAjlqCbqaCF2EPRJUaSc0w8Yumn9+mhQT0rQY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.5962b365.0_1597868970984_0.6476217125748291"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9c9ec756.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-icon-button":"0.19.0-canary.9c9ec756.0","@material/mwc-ripple":"0.19.0-canary.9c9ec756.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OQAV16xISQLs/+la56VwGvnu4EN7rkpcYhwTPbmowrWb9HlewLK6d+hCO/+Tt48iD7CqIfwUeieu06zTOZaY5A==","shasum":"d11171d885f9ca68e9b06cf627cd9467bf3d229f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9c9ec756.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdUCRA9TVsSAnZWagAAOCsQAJWEN7+5Mb4UglsYPMF4\nw1GetQ5Lmw0PDtOfdhf93Yrw0xCg83zQKG2GN+dC5dPJjDQ3nqjZrb8ydybX\n/Xstw/5VUJDhSIl2wo3/o/4MzGq+jjMC9Pauc5xDaQdslWlgDCnTzFbDjMEB\nlu6/8MdH8bJDGsOLyOcaPXp7JrWkwMPUDVe4ghLsMkUB9Sc70LDN+SF7WbE8\nogrUCvWiX17uhWC2q6ThvbjaBBObp6ao/V1K7dJQfyn832nE+tu76xGZ7u+D\nY94eCIXTyl4VnCN4Dy6ckPnHBsv9SAWbWfcD7DNbTQbL1/EBdaP0krcUTnwP\nCYI+GTgl1CQsFdrPHqxWGHwC3sgdORSanDlSrfiogicyHuiBH8CNrOPcDfBJ\n2NFyxDXN8tApf2t9gEGCjirnL4gJNZwUZWbfw9F9WtihJ2V6h1unznIkPoat\ns7P8kD49yMcC5Aux93bnaDImn5f3kludZ5EyjkuIBhFg4h9ZYTxLTf+CpKvY\n17IlzY6NheNTRVzwNzjd+STGQ71pZl+6vdwcnlEhIRju+XUhIEeQadF0mEhP\nljiilmH8teBK/bXGdexMOwH4uuYvSA/PfEFlM4+a1rSCR1bmrJ9dgOiNvkzq\nsXGm62S9OMgLq2ZiOTA3aTAs+0L98LkvW9TPFxhhvav420HcQnsYyTqsoEiM\nKTaB\r\n=BtTR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFUG9SAd9dhE3K+/mudbevzYgK7JOneYkdsB49CP1qGpAiAroc9NceV8fJSC2ddK57ks5A8ymAUWu2t5fFhsWDXRTQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9c9ec756.0_1597949779857_0.5164249621450805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-icon-button":"0.19.0-canary.fa0ad66a.0","@material/mwc-ripple":"0.19.0-canary.fa0ad66a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TFcDXRxFsVHBKaAwpCP1z+G6eFKVG0GdjJD/gVSo55RxL7GT1atkIDyyFFAJlQpUVELbwwd+rQTJDCNyDECKng==","shasum":"e282087631c98cd3a7d224e586b037e90d6e353c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.fa0ad66a.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6OCRA9TVsSAnZWagAAB90P/0d8P0Z6RSq7lY5yAtQw\nF73wf+YTF+TV+KvZbfintlYF27uZALXnBm4r6U3HsjozE9J3iyGN8N9mbfu+\n/Wk9TN8DFe4S8vACM45X7Bhr5xXlELCWhUFBbScsHoHSNSlTu9su9vp7hdQp\nAqRXvdUB1Hy9h74HnzKgYhT0/+n3CY+s2Jg0Eftv2KS7NozykLXWFBTRRL/X\n/ap2G+HHlDg9lUOKhIAwymwILt+r03jHM0aYiLbGX5ysJ+x2QDXKL2g5cdFl\nMJPI9Kuub4LxzTTIh+mQo82M25RiBvuFGzqVYLghZncve6QgfoaV5xSr9JgN\n+Rtm5xsjWiYUSk6bX7s28U61W+I3yWG2JV6VXYVhPa4MBMSrjMsQsw4e0usl\ne9PQJNwYKRUaGUIGmhRIS7a/Stt6PPWmv8FV5qy6Y7lzeVBNaLH+d/+KxVlc\nvYW7r6MVGEuCU8VCPbLB/nZ78XSQx5X4m+HdFBxa9l98wmt+FbGGWV2G3rYm\nOXls731dRTlu+aa2uK2pxSOVqgXoq9+I4EDae4ljR10IT4kPRaAif0PFeEut\npQF6IlJYG4hBsTpbLCvo9L5q5gkAhkHPzdSGLwZUKKsol6X6RSQ+hNcvB9Gt\nmJRIJQGSqvFGatU5847JLkGLKlOXxVAHuUHx0WQpGjCBHv/ZBSh9cDEDbO9l\nFQ/E\r\n=kS8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFplcQ4lVVMaeyKxFKOzbOmcCxxNSVEAiEe1Gbls3AGcAiEAjnsmi5ONTM8PmUdm9UrtWlY1nl/6gv757VEJIQ71/68="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.fa0ad66a.0_1597955725719_0.6317990884450846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-icon-button":"0.19.0-canary.06ecdd6b.0","@material/mwc-ripple":"0.19.0-canary.06ecdd6b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5OfiunACBDXcXRomm0j+v46QegrNWIgUhBWNtgccuCKLE8t0brTwP8mlqbf+8Doy56+SbFDFKXmLtuH0osVkWQ==","shasum":"371fe5f92000eb0819f5165a1beb67eac8cadc5b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.06ecdd6b.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxfCRA9TVsSAnZWagAA3BwP/1xhiXadntHz61sEWj9k\nfqXrqTMvaYFi+pApqbB0/xMlAkTbZiJd98AkBTNHa9imD48lWYoAXP9b86hw\nRDvMiFMMZvanSsoCWKcG/fIkqBkd/WuXq8MNLtXNg9EgyS4hiGGWkXWzcOzF\nLVtpqT0mMbMiG9ETxR/c7NAEm8WCW17hr7h9veqcqWxGEs6XrJaq88uqUatK\nvUoKNYOWW8U5X9H4GuQ8YVLnabB1SeZFeaLBOyAjykv4fnfUgUR6rsKkqzET\nUbil6tlzLoMVSpc6S2sIunPovzjl50eNFyNG8LSSkBNV0234WhL+u81ceSKr\nEYVvzPyCL5l2+lsrATCMi4nXsskyN0c00Q/JLD93zLVbIo/QYg5mEZp3dOrg\nFbZzkbfGV+pg8zdye3pfmTTWK/sbDI3/OP2WqTFNMNlm8q8YLIEa4O2Bqsh/\nTCkBBeiGLvql+8GK1D+IQ0gufgS0Befn9Td6yiyjKfSz4exD9Bv/mOcLzYmP\nbdg9OL1TmgysNAfGjT4l2XxF4MxJz17QkYHbDbDDLjUEXejyNAdRZIjtmtXg\nSSH4DdJzbs/Suoxp3S2z5kSQbKrO4UL4h4WATpfQcrpRlE3JLz8LMa6gSxMH\nDtiCHNEvd43UHKskNHZRrHW0jHJmE7LTmH9e3+1HF4i4WlPZ0fvyWjKAaHkm\nbW13\r\n=4xKW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5xz/mlaobNKkT/fC1Ec/yc3F1151hFz6/dg76YbI74AiEAtTBHAO3FFO2yGxRiMR/M3zeTcF9Djes7QmX++UMHksc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.06ecdd6b.0_1597959263420_0.20160505935800432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.2bca2318.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-icon-button":"0.19.0-canary.2bca2318.0","@material/mwc-ripple":"0.19.0-canary.2bca2318.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-drU6gLfjF+4vjmvoFJ+CYbZwXv3Wkx6/T/AXGAmNEMBdq4B5bEKqych8V0yI6vKnn1EGBJ4Y5eOwY9YeYLZ4mg==","shasum":"c3d433146b421b71045f8c88178e1d0fb2c2169a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.2bca2318.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAn0CRA9TVsSAnZWagAAhjIP/RgzQnYlYFeVO1nQM+ig\nUO6C+lCv/nNCG/2KIcUOjzTgtAygGvWeMrueoxsrnJ4mUWXWl7Cg2on8+r1e\nX6gXg8ZiuUuIn51ybi4f6bUh8LYlySmb+o4fwlo/zH2fBBh5NaZurZBZajFC\nLTo1hvpkl+3sC1cgOSgXUrCOJbJiUmazqLHcVszbM/rv0O67BaNgw427IVrh\nc//5nte+ell+93CmaDuwu2Es1Hw0JlxRZBlNXm7D5eidc4Uzhu/1O91vyUwd\nvGD3We0EIzCXEebSK0tWHuewgz1yj8VWp8HdeyOwtaK0nnyIewcIDgn0Hipd\nsT0Lq0y5oNlKTy0cIP/yZ43owDmj+JFT7bmOlbeLghODaInoqnB874iFqnah\na9iEOx2q5ApFe1ke5A3We/sbyEMSwT1YR9jKVfQdda90GC78orh9msiIGGkL\nzQF4y4qFYbwHE2NAbtcofFTf7I3x9cvdNVioiaml4E0dJfjeEQC/iIiqxAUf\n/CmbTmU0qOObG1IpZ3ajW26jd9/2odJsgLbhCoMWk/peNY2YA34EjRixQZ/8\nLa52R+vr3/kYcERDwjy9S5pjSiG1gMG1cAYH3s5nRbS4wylWsrWFIC3DrL8C\nHTwmHEf+6BSrR/qxlNYQqkttteY35KzXc/lz3OQHWMs/Cj3JjOVn5G+E3t1q\nWEMK\r\n=Xecc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBh+l3ALhiY+qyiF8okvrUHSDI6hIqrTaHiiEbE7ZdtdAiEAvIPotJd6QFmS350gptT3v/8XX/wp2pLz29jTTd6tzzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.2bca2318.0_1598032371830_0.6555460877367107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.6aa47265.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-icon-button":"0.19.0-canary.6aa47265.0","@material/mwc-ripple":"0.19.0-canary.6aa47265.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gS3db4YTtTuBCJwJNlzJT0cpHH6RDjfySlYalL/R8Zab7EUHajZa0Ex2bMcnMyNmqhAJEMGu5swdMFL8DRBvGw==","shasum":"55ac0e710ef5fa74effc86d1d8d02801f19f0e99","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.6aa47265.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA+KCRA9TVsSAnZWagAAWccP/31nTUZVQXWu91gusXbU\nareGhogywPMGlWhSzZqOr/QXYHjCtBzlh763w/BVj8Y0elnfMFND3GP4adYX\niRvBjH03YehKgcAcrtrA9+PHj6mWFJpFRpq6fC0OAs2GiPNSBF9EmD/hU9Tp\nEF0MAdM6HRAw1ryU1VOK+UAkOzN02MLa/FHgPWVXDlnOlNgx95f9us7aXzEe\nJdswbWEWNs/gB0FqneSATzN9WfIN3JirLfhQZqph9uwCBKS5pILbY457dqCI\n0dGMQrbRelIyq87tqloNzwfyOB993joazS8cY21HCXzP21TTzsuuyaJpmN60\nzb9ttYoI1cdpYMSmpaO/TJS1qbet7tK+/kqx+FTUQgg7EJmLevYaEJ+gndzk\nNTmRD0ixm3uzjlMtabWLgNZ4LPh006YTByqJFLAcgrTm5BzgEufQrI/CnvWD\nA/5++UriXMtpCllpMHfKwl9hWGh3855uy5AS5ZSV1Nnvtjp5AQ5HSGECOhMW\nhjYHj54qqRggPSJftTXdDZ+1VzcoocxefDrW+8QgbhjbxPLLGMYBKzp0wt4m\nf0MHvEnSos2RcCveFaGDU/RfoACaJQXplOU0JqBkVHdlAuiwwxTH3Tg4/u8M\nfHHOorS5zUQ5lPCeL4OdW+hvpTX9XCc15iMfz3okslKRKwHkWrwt3ADR0wPf\nUbNh\r\n=hJ0N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID73P96DtBCDkY8TFyU6Cm5OnVKZ3iTlBhJMpbow6etsAiEAnxhOJln5+rK9MZfbj+Xy8CVBk7wmapCG5MFcE+j1BDs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.6aa47265.0_1598033802123_0.7830649768030209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.e7202a07.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-icon-button":"0.19.0-canary.e7202a07.0","@material/mwc-ripple":"0.19.0-canary.e7202a07.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7q73eB6YgmSIxvq+TPhwSqhM12RVxq1Pt8vQMChw1zUXEpqm8ANS7llwTZEJXq5cpvyPlKCu6UF05TVU+HQEew==","shasum":"32e75341825c024d6b56660c0bb61dacd3b7b57a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.e7202a07.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9WCRA9TVsSAnZWagAAzPgP/RObBdMHhRQzAMlg3b/B\nnHYbLEksBQsH+eMHs1V3R3C7Q0a0SvG1vIJaEYexthLgL//HdrxW0hXdMcp8\nFqtjjsL8JBUUh8BIohGMJwd3fRtsow1TPCPTuwNrwzU9bAGUkrDFxZbnCCX+\nGwF0mDPUA0OgFi9Sk5FRk2HpmCbhzXWsUED9pSYzKe+7iCQ91bzxm406OoGY\nsC2TLxxK1LjwS0FdguKYjLuc+gbPyOEl17sNjMW4z6Bb+qmfF1NnzVAavK2u\naq4y2EJl8I1uULUmh+3yknFptV9tUFO2EniGmusyQUY5NJuEzUePTujgvU3z\n7Z1flV5Q0wP9TfoyVFteYy+SQVIEC6IBHIHxCmYHx7kCvvvwlgyzgmAUshKc\nLQR4KN5tg+CdPo26pLiGAMjqJi2kp3BMQUTwe0IA4ohN6BMuc3YSZZHB89eX\nF+cl3w+/MPBy+ZxdNtqIr7mkwSgvVUdUThftQZWf2CUfiY0ii3MYhk/9b1D0\njsFR6+Lu6ZLIpemBEUVnuTIr90jxPhQk6MJTntneYkA17iOaLRKFTuSqmXoH\n6yX8p05BIOrcSSs452f4fwWX4WDw//A0o/8nsArnffHhmbge3u+X2pvwrqrg\noNve01psO4ju5uIaAOOva66z1bxPIovt/oEKvMoSTd4CoE8kUYnap/xRGDQY\nMmsR\r\n=2v0y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYJAhTDw/gffh6rMER7QZDFdsvo6QdpYwQCFRdCrBTnAIgL/gMOjXRK1AdO5MO88qn4wk60+M8bylhfkcJwqMwbpA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.e7202a07.0_1598037845964_0.15653394929314057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.f208201e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-icon-button":"0.19.0-canary.f208201e.0","@material/mwc-ripple":"0.19.0-canary.f208201e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vRyBtcMfDU67yq+oCN1baA2Wabk7vQCR/8ljOKeWioqWSvrPrW/pFwW/J3AK7kIdaKe6TxtB+nS5osujpORVjw==","shasum":"63831c7b42015296e6eb47d51234f8447deb43fc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.f208201e.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8KCRA9TVsSAnZWagAA0igP/2nABE9zKUKSoZhL5re2\njwCG32zcumSK6TWXusDDi5SgCfNQ634RMmuToLNnhGk7PRu2ECLwf05gBUpp\nTvkfHqYqbj8U01xDmER/cjlGcVZBZElGhUm4SWJ4HhQGdofyid4VOEYOkEoh\najJEzWnJrs7CRePfWT90BP0JSv4M0toHPSg3+IuJ0InZ8khwkRnqV9qnOnkP\nf2rCR5vwEU/Z5a+vRzECpuDwWEEXIRJNV+Y0qEVquaa3wM4euWdFYV6bW1Ij\nPzPAJ+WZq0cIYGKzJO/uP1SH55g3+kMLSlwVH4362sfnoJqUuAe60bh9Wrts\nFfDNO8rctsAZR5ZfAn8UY9r1ZQKT5b/lBUwrfj6Mq1S5PFE7PlAj6yS4gRqG\n+ZUL5HgPWgPxTuI1czmwH5G2YhZ9jG7/+RhHm2I9eQfWPP6AQSNZEkqGfVi4\nm4gavYYqQAB3L5wt+kSJi4q+7XjTl/z7TKA78/FbaS2AREpgAUC4lmkGbiTp\nrvHRijt03RRJjvHbxmuoMDuWa7qS2Kr8N+iJI+Ya6sI06U6BULBYnF3nMqf0\n09EbSxuIheWAzz1mafmGD3txlSGX19JfweesGFKdNpBIRSf+suwgpG9lNKfs\n3+/mptHqNy+HMyWk+DPyALh8FNzYMTxXDtmUz9Kstubxb01eGC0yIozLKrij\nlnRl\r\n=NN33\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNG91YPXGNLAboGJ72m9wJ5c6on7VXVtOVaUkT7V21sgIhAL1akqAOrbBv8QaSpRMrSV2Vt1nttvTUopsEKiXRGoBq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.f208201e.0_1598295817845_0.04688335065844207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.14a172db.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-icon-button":"0.19.0-canary.14a172db.0","@material/mwc-ripple":"0.19.0-canary.14a172db.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rLAsAOeDZDyacQV+BADglj2hyi7csluM3zdmdpsP51bbIAGW6eV1NYavQ1SYWes6JwBox/QtJlVbF81rdvEvMQ==","shasum":"6dd8e24aa94e1a7b51f0cf818eec4dabe021585f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.14a172db.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWsCCRA9TVsSAnZWagAA3QoP/3jw2OWu9TjUy7YP6/kv\ne9gDzO3Y/Hxt/K12RboY9YPUR0/UgJMcoU09znUYPmSVNXzQwUCcDKZWrgyb\nNOVXNunQmpiyzpmaQbnZMLncp/lhnb5PytUVJAcrUiDKP8i0FtDb60eI+bqE\neqZAq/MTDoXGPBh5FOCRS4YKUJ+rL5k5ymR3kv+4GCbHWoFGSqdJrKSrbevp\nzh3gJrqUadC7C2yUpprY5ITFw0Zhn2QOYi8OclEKRjgFQHH0LRiMiZCnlqLx\nH+bVibsOVdImGya5Hl7Qn4chXFMtCVPv/ynEUWGhk7N3tS9b0dmUWV2xJ1Ko\npNdBDIKHuCQivD/shDvbImyBQiH1M9IYGAEkliK791COHNztaUI2GRZa0sJo\npEWTHMNuzqbV6k8JVjAW0ySSvDIMej+6R4ktLC8F2YQQGnRSJ2yNHz1UcjVa\nE0CyL0KARKDaYbnU1FPoRD+bIbdQfdxaOa2llgKV9t5/pIzBXn6jFdWjmXQk\n1ktKXSZ7qFA15hbFglxSL6wF3OEMa0PERECrBIyKuy9YeAzib/oD6l5HZakX\nj1p8nOh4cBF4lkS/l/ct4dgwYFSQpynMp8LuK+J8YWYd2b5/aTbRUfPlE3J0\nEiF6q2w2uD2BRE1E3M/tvhYwJx47Ja1xAnTiwR/JWmbYGBxs1jhpCqyH7UH7\n+XQr\r\n=mxsV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEzpprvkX+xMt/2/XkxRyJYEdIjDrXWScolcflNTjFNPAiEA7xVlAsyvtEKjt7WTPSb6bLEMvy16RA6oEo0mKuAdnYM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.14a172db.0_1598384898591_0.3669533446763902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.e6c1038d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-icon-button":"0.19.0-canary.e6c1038d.0","@material/mwc-ripple":"0.19.0-canary.e6c1038d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LCFVT2FtDwynfDOC6OZ0GgGER9NyyFWpuO23CTKToVaBBRmOraXzEzAvugjRIJqKaVPi6mCnmca/28ews7xYPw==","shasum":"febb3d0c8d3a33ec3d60444565b597367298a72a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.e6c1038d.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAt8CRA9TVsSAnZWagAAG50P/RynvRlBFF7kmPuFCclX\ndDf9dIFdNLk90uUvMh06OPNqZOBhYVK/MIqD0gDnMHMkGt/aOqYXDDX4rvHr\nXvw6TNszVtBse3afKkCfJ2Outd9cvvVKiRuffZD2EcStN68oDjIMig1mrr8n\nKnXxvrCW3EGe+bNel1ZbFJX3xM/yGuAYzWXmEzmjTDXUq0E1OVHtwLzrJQm6\n+XTt/4IIa+SSBAgE51N5kba0S7bp/H7tzTusXfzPfzybEKMfXinMn8WHmjTf\nlKQby8whSTi4wbVXHNG2lM8Kf13Ti4ah4kuIkuMtgvG9s0/uvx24IctLUuZT\ne4G63rIT7+DPXlg7k85BUnICiC4sEneK0U8GjYMg6mjHIvgabr475LBEzQnM\nfafHP77+SEXk1EqcCYe7GSoDoqM1F58m7GFI5tXOTw7yPhn9/IYKIlWTgnO9\nTgLdFIO1rz2cW1GdaTiTZbFr0ZZkdENkNqRBieIlL0PjMned779cgCWNZLoD\nTI+G2o+AujoAb8O0xvt/vT9CoNtUdcz2vhTE9LOvMgcYlPlvFxUl10NPQ7z9\ndAT5c81tswJIVsnRxgoGvDy8di9OE3pDVeu44udySvEtlgvY+RTm8kAHX40R\nnP/6kOBqzn/Lb0bmowmh8xEX0uP6EhqoYLE00oVRIY+FeO3hAoUVgQ9n2OI5\n78un\r\n=+e81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkW289jBRNpQzLF0TH9mk4YUGd5f4ENLtekFOXlT9+mAiEA//ufi8NdfgpdqsvaU4FuEZbikHSUuBsI45iDqoYcElM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.e6c1038d.0_1598557052077_0.973295100592102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.34012082.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-icon-button":"0.19.0-canary.34012082.0","@material/mwc-ripple":"0.19.0-canary.34012082.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-c01IyaUdPpZXJCvs1YrFIl4nlmbALYbF+iR8xJRBywEDTinBEnWKwWGgMPIvh8sL2o+T0C0TfJ8YdFuQOmKNNQ==","shasum":"d641085032dc1074b8558892fbe221358f908a13","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.34012082.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4kCRA9TVsSAnZWagAAK2EP/0nYT7w5CBNLqxmkp+bh\nQUn9GEFodoI5S2OdpwesS32MsuLOgrBef+1JSal9SYmGdMZl5JKl3AhYCnqy\nLGIH1yyIMXNKxFz8HnG3ZqBwsmbckbvU7hNFVVMhH1DMorTYC8QiJ4z23grJ\n7aES1pGGiv+mFnft2BQejdLcq8R9d4OiSIbN9TB8QyUtNEH6piAFdzO9WgS6\npudJpdCxMMQED2veHUF3huuAolrI/URQ87twlBnBUu59tV32Bg2raX59vpsM\nf6XBTsHiChTZPCC0DOjz5Pf71LNrqTjTWXsL5OKouZd/nk8aZTLx+pU0eeyJ\nREnlgJ1SZ+mu5BNcDz+4JvnHv1jtI6NDn2EWaG3dXGwYj0QwPjMpqbKEU1tI\nDdKM+exd77MnXD2Cn6YAd52mVRyqySPvlgWkKVWlksi3+t51JU9KWp/dq0ZB\ny0BmB1U3lvPKR/NbjV9gffFZ73p0YExeih4knUa2nOSlImIAgnyFfpLf3zWQ\nrZDVwYXnMBxdV2oYqa4IydmMbpbp32hKzoRqBHUnJuzcECkAxWHpZTH/YoST\nINAHv9Ukd7TfiRQ0srZ3+hOvCNc4/HKyCqlm2XYuMEfahHz0ctlUmMbFGndw\nfjYWJ7qE0esdi7LudQvtoZYSQyi8X826+pXevq5TL2l7m3tXAWqkkC5pzV9e\n8cE3\r\n=QcCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCogqm2ARHA456DORGlXgfWbL3IlQQCEqThxQF6AR0aFgIhAPc9I9dIjBwwBGLGTYjfkv0OofwAIUpCWgtYiOC3YNhL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.34012082.0_1598557731895_0.6243010325382392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.c073f7b8.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-icon-button":"0.19.0-canary.c073f7b8.0","@material/mwc-ripple":"0.19.0-canary.c073f7b8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KvY7Zl3vNsktuJg/9XkqueAeE5Pkx/PE9HDnD9/g01ujCFI64Vg+xR7xhgFqvgO1tGW14oP6/WwlI50WUW9YeQ==","shasum":"2d0cbee00e71df5534ccd1456d7ba7606d1ca1b0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.c073f7b8.0.tgz","fileCount":11,"unpackedSize":45975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTsDCRA9TVsSAnZWagAAhJYP+wd7dBaQsTY4sC19wTpc\nRSN2YF85ePVzlXFXdE6FwCnb6X4oWNIGvrezQEbaSzU36FaBVa2fBFMvGQmn\nRCn/LOBZjJAVUJjHmPpyesPPQNDPnDFYuDMcpBzdBMQDp6D1sil4WLwlbjCk\nlVgOVKdvknc24G9XQ8jnIogBCiDzbNdhRI2gnJ1mDboQJKhzsEmjX7xjUsDr\n/TbWe2KWlcnbfkrgUJy73LHTgJKJ3vAp6yXWaWKsxmfJWufVPjrMrMpdzkuu\nhLo6jeGlCXqVvGfoypwEuJAaoyYnnR1CD2irZIf488MIqHAS9cc7ziP2ET2v\nrtLDMBSHovESeeV+1ZgyHepPmw6VpIDgAEHs93d0+QTSVsYvRcYw/6i/lUYH\nVb3cSaaDepHthx5E9RG4tmIX4B7y+lwgRYnfhN3xRrVBwpHsrCp4Q0FpqySg\nRhI5D5JudzIXcTlgJvnUbJBlVSuWs0mBymmtjEBRdCru9jJli1YJ28Cqq1V9\nl7OolgoGv+aujYdl8EuSHVfGo53mZCSwxJgAVtqkB22+1VYPmrbLxksrkUP7\n70PcdlMNhLRFmY7cu0Z5Gwc6V8rpmD/FhMNCcr6+YSjVjma+xv7j3qjspCgT\nCpZSFKR2FQ11YyfjKLEptSL/Xic1M4F2zZ1gNa0L4vyLTym/F76+nlhYC6Sh\nWJya\r\n=VLwx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdVJl4J3HLzucDnAHjvPh7VtDXJuRYBLwTRJBcgiJMdAiBGnONEneS4cF+ZrwcTBurApESF2JQ6gCsJzbaSco8W1g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.c073f7b8.0_1598634755404_0.9720389323496323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-icon-button":"0.19.0-canary.b7ae68ff.0","@material/mwc-ripple":"0.19.0-canary.b7ae68ff.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NwswKop/8TGXsKLiFFiiuKhASIQmUUYvJvAABiOuIPSLwWs3E7C/GfwnCrxiyf+WypSQkYp3dX0aEuUiaTXrdA==","shasum":"4c42a6ff62c6e4d61f00b2c2d2c623a7a68ea51f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.b7ae68ff.0.tgz","fileCount":9,"unpackedSize":40016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa8ECRA9TVsSAnZWagAAM5wP/RtoA/Br0fill1DPCmmD\ntR+BY+a4RQnn2u+7/Ry8Q1BRnZJ26Scn0EOQBVd5Y68K5j/Qvd/TQhwy2qxg\nIVaqX/iCiKUzvTPmflmKax3j0yATN0fvl/ca9cqeLkGXXygVc5yC/fOecIkH\nmQZ7t0f3o2nJRWRQhrvzgcLnX0y4t/PThDnAnxlzLdKQXg2pcblzQL5+ryKN\nVXGgTJOYdRxWPjmbrDVzlT5KiyUARQiFT5mcbiCdOzFEoUHS4Sl7aIUyc8HS\nmM12BbESwRrwKfA+TIWjO+lY44pysR4FPxs5J1CDDQTcysx1/nBEgAiHsJhB\nqUPBnTX5cIu+Hn3z7gDZ8wE6AptzocLnPufIzcSmdVfBymulAGA+f2wCysKf\nPisvpFRfNU9UXtstCZyOJXSPtg5NybEp62EWgCN5k3DXgm5fNWLudOfA/Yn/\nYbTxM5DJpdFXGJNR2AiSPlk2oPSqBzdPSZ54yRxBrJ+ZzYKcEI6bc4DuAhO5\nYkNmBhS/0x3v/fu25P+pNapvzv84sIhF4KAdWWM7laI/QkPGR3CWBvdTvKDv\nnWK/MaXXQQE/IzD+EWUuQMSJ71IXAUpt9VVHPbDmpVqByEqbEEau9+EjTmyv\nPhRhV3o1wAJq3nIRlH6EE6LaTOrYOvF/huvv7koIx+8eQdtPye4d3fYEeWvA\nTVt6\r\n=FNGE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5qFPp3T7BjrhCQYotwcycvRTm+hBScY0lqoZh7P919AIgJcd1vKIVLcltiMxR3BZK00MryYELXSnNWXB2wyOF8QU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.b7ae68ff.0_1598664451517_0.7955153022968826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.697e3879.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-icon-button":"0.19.0-canary.697e3879.0","@material/mwc-ripple":"0.19.0-canary.697e3879.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-x/9+QYwQAVRy3ks8SmLwRM9nQw9GNvMaacYL4Fco/64HwwEu/P7KhVXqxl57VRDx+/xo+sWdVCdUIDob4nzyaA==","shasum":"b576a1f150b926f754ad7c5659de8d3898feed6d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.697e3879.0.tgz","fileCount":9,"unpackedSize":39954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuO7CRA9TVsSAnZWagAA6ZQP/Rv6cJ9PGWSpucfyPi67\nmfsvqm7QmEhky8FEqDkOnrKQAbEaQZMIeqtLDPIdsy7xrrMzMULWBo1Hr5Ob\nRbUJ09qzzmCHL3ZpBQaPixk52AfUxbwHsVW644W1fklrTJttYWl7W5RGGWUn\nyIeCQoZJf1lJ9mJYdEMiaDuRibDxQ1uBCjtObdyl1b8S3OZZEFNYWdOMDi3N\nuVijRuDNLU5k0H9/zj1qZI11slCvU2mqm5l858yyRt4QpINH1eITPSnejwD3\nNCevPM4zsMmQL2Q8Jyo3lQMp5XZZXIs0kKJVsuUuf8UsjdO17VOcRLlIxCX0\nhbn9hRQ8Meaj5pcrQORCBR8dG5HgONOs05gzh2o08B2gdI53CNR3YHU2K6t4\nF6CHEXfP9/uoDZwFBQwXrCGfrs8KKDj2rO6RFUShmFPx/W+80Ym3OpTGsfNU\n5XQN9lNCLM7SABgqkaYRnYR+bii9IMU2Km4DAtF6xzSjs+T8NWkbe05tJ39H\nOnweOOg8UWwzoiT3FIkVJpjNABai790e87Jwm41ieHS3EVBTH9+m1jJMxMp3\nSpWRhbM2JS6kYlPQhEaJKI32DDyoPAcSDWMoz2szY+ilmf+6rkUZMJdNrsXM\nYBJO2VWPh9OaEVPFLjJcnopNZF7iWTyLJ+HmiJegySo9gfFPNIVlNqXTGgq/\nTQex\r\n=vcBh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE05yLqSxcJTX10GQ5oFwWbA7Uwx+cinUqQpmQobyopGAiBA2cQX7FNrWkJx91ygvwLxsWAqGw+jMX4E41m6f8aKRA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.697e3879.0_1599005627278_0.3096406256982158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.eafb7991.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-icon-button":"0.19.0-canary.eafb7991.0","@material/mwc-ripple":"0.19.0-canary.eafb7991.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | `rgba(0, 0, 0, 0.38)` | Color of icon when `disabled` is `true`\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jCwg7IkhPv6S1QfOqaHrJycrLK4RKMOKZhi2SLTdOcEi6SocXOql8Bwz1mtcMYAV7Vhyy2koDXADxovjD3m2Zw==","shasum":"c2dca2081631433ddd765591223688e075cd70c8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.eafb7991.0.tgz","fileCount":9,"unpackedSize":39954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwEGCRA9TVsSAnZWagAAe/kP/2c0C+NMf33Mc1M7bW3/\na7FwffS+WQwvd08v1cH4g8l2YhAk7hPw0q8SGsJuI0nJbRjHos0UngKttjL7\n2PkeArF1r82A6a46Pz9QAEuagOVmULqvq3krkJXrqWbJU3ZYqMCcKjQU80GO\nwp2UGvVMRwKHuQ48Wc78pIxco3urk4av7otqcg1dtBPVwLRfyBBBFJ+JHSqP\nQGi5ulhNcs89Xt2cjYyo4H+CTymdHcdHtL6Rk7ouKMA92QgMBpmXLhXkwg62\na3nADnCfXciDzWiTep0hqQypAptlvbb6gyoKE6JEnJClQj69NIh7uRGo5VSm\n4ORzPXoMRcU8UiszbvIAMebfuBvpxY+rtPzSyh93Hpw1z7y+Xm6f6Lp+z/LE\nVmnw9ByHmvWbSzwHAdoJhT0iUxostZVdkt0yroTczNbQ3TX/A29M/gDoDRzM\nsKm1n54gYm1MBAOwXot8XfvbuEuF8jUym0hMH8lMeLGpmSixYjfRhnkr+gRs\n5+U0TdCc2ZFDYt1e3uPDh9kqQ/1m53G2dvxXGszGDB+FdkYPYn1r/9lp0XOX\nT/n31C4Tt1BD12aAP22XyyeYVMQMd/v4WQiFmaODiTG/37aRqyUcqk44eOl3\n6VGgpLKvlpvrD5hLNHu6DBAaRkTnDOJjlhP6emkVM7lDxMFAhSih1hcu2T6k\nWw4a\r\n=60o1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICf6Wosg36j/zvKmNlNLBOJEPs5+16EEer/qsOVzs1EHAiASxW5dbk2rw05RccXsh0d0y823tDIUN1eRgxEI5klTyg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.eafb7991.0_1599013126037_0.4452853868362223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.606642ec.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-icon-button":"0.19.0-canary.606642ec.0","@material/mwc-ripple":"0.19.0-canary.606642ec.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1X22Jt9Tc3ltAG9A4WxCaciSGJ7RbNRN+bBQRjaftlk+UekdHaXjg4lhCtL8hha1WnljexcVs3z0gTr6IEDLZw==","shasum":"eb6dede49232dc5fb05e41a559f26667470c3db5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.606642ec.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBBHCRA9TVsSAnZWagAAx70P/j5p/an9RbDumdKQT66M\nhN6lPknIRU+zU5I1QND9A7wJ2SH433f7Bv+MkCB3r2wIgygxZiln4KuKq7/0\nDim1uqlgeJ+qISak4HovYp+Tft89ig6MuQEFcc5MrPqh60XbX7h/FYuNXF+M\ngzIoGlaKxX5KWoU9VVKnZ8hqicFmQID1bwqhKP/fcVkh6yiM3LXfhCs+HKXa\nIvO8rvaY64RVcpKMhQpW4IweZ5j+ZT+V+EXWxmFvw32egCfHzbBE88P54Mi1\nhWejx04BJu8TNRza9oAuQxg1IpDOueRu+bofKjZs9xLdJo2cEysGMr3cSxNz\ndtAxi+MnwT1Ktq0UIfvgXpUCO5S/NUmsRQGQqh0rGQtpueR124tf0XBp1GrP\nFn4LZLXD4Hwlb5zKxmUxlXpFbVOEBWk1Oaqfl9aGoJDDRlYokSOkCjF1kOgg\nQ21KL9UziVJYFJw08jtzSHPcK5/c+3prn1U/rDmZyq6KfiLznYoPfgAlafb3\nDAPtunt65j5Co7rvgj25CZmrs0wqRIk9S/yaMxib21zaap1pQRZbQASQyRoY\njLuZwtDTOo1xHLftF6KtQgX8FL1SYb8wZgtFG2iTTxlO5WRuM6cpVpKI2SqC\niz78Qi4+RZUEqdxKGlMXi4og2f4qAM9nqxo2R511y1pqHUqPynsaRGKov/OM\nwcTR\r\n=sbmR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4DyQbm54ruczfU2XaShy7lCH7h0dVbv1qEMHusCIT+AiEAuKyeQoDpyqm9nyV263dBMxo0Pm1JCIfGQVNkkvU1AsM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.606642ec.0_1599082567146_0.7714378786469815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.ddf05c42.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-icon-button":"0.19.0-canary.ddf05c42.0","@material/mwc-ripple":"0.19.0-canary.ddf05c42.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PAAudWTGZ4nWI9F0NFslLx6hQI+DZQQ9f4RFWqc18j6b96w5dYK/A5YMxsQTXYiQeF9514gJPW4uJuQ0IY11Nw==","shasum":"350060789fd54b2b974c662732e492f296a43672","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.ddf05c42.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVfCRA9TVsSAnZWagAA2AsQAIgd6oEnfTORg3GqDakY\noeB+YSwuz7kRYGIq8kRJ57fZdHhznI+0XKdqNbfMFWJLQAENrgbHyhkghmLK\n1M4sSfK89uhVuhZiDNjpk428WHa34w/gcJUr980ekzCf4BgheUfK4ZdfLh8I\nYr7TZKtVL32f4rfELbXkKNzG1/zS0ToViYwHdjkpEJTwBxMWCohwmZdyNW9Q\nLM7intx1Ihm3zGZ+WRBcS0RIYe2pSdUNmsBNdzgPoiIDW/UvJN1B55GsW/OD\nhEe4mW3ICzBYzwVOu3zHh2R7To8P1ZfRRq1cjqs0Q7ANZJ7IXAalM1p1AxNB\ns1qYbVtbcnn54HHn0OZLE1+vp7mXTc243eo8bpWqhRIABSPi7HivbG5r/SMq\nkpR6Hn+yGXqZYV+ngS0eIXYNq/+pZ0o1CZ+BvtJG00RSFcHVysP2UMPss460\nrOkkrDYJN2aPGhABdlm0USw5FtL+ibPtr68p+8TCpQGI5qV3np20pnSx/7p3\nDzd4r2bezqcK//DL7MVCTnQFyz9MqJgRES1gT5RCgej3pXpofskQGqmv0Cmj\nCM6cZSHpRiKIZ1oYE5onMB0hnsBQLFeuFlUKNQJ18diYXlqz45Bf3a9uzGQ3\nQCW8AN7QBxuIm6Qmizgdfg9oRv1QwbwCMFF1LfmtiH8SchgqnETRz7eZ4y0w\nPe5p\r\n=XrpH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAff3hOjhcnQEa/YBRVYgQuWW/ceySwOGgsH8OEIPLBSAiB7G/VYVLmzaDIy87i7Whs1MbqTEfjMXsL6zwoYiFtOpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.ddf05c42.0_1599141214790_0.8948483764120614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.b889e6dc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-icon-button":"0.19.0-canary.b889e6dc.0","@material/mwc-ripple":"0.19.0-canary.b889e6dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i9mzy2JbX0sHCHL3URM8Ity4ZN9cLyLkgNZxBbdFFWoZ9IBvzejy4UX/RafctXLby0VFXuiO1sDGuDh65mN4uQ==","shasum":"2ffe7997c4fa406ca2ad2d687ef396507022e32c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.b889e6dc.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmiCRA9TVsSAnZWagAAB70QAJDVA9jOUN4ZRBmCTqhQ\nRi0JRIg5DPsfm0h2jIGVrdHs3/DK7jayGj7tWrIfxJZ8b6r9Mzc1TlsC8PFQ\nqUMJ3cD2myVWbVTEpL9lKSkfh1U6m0q4/qoZ72sdMOvsXKT4EGTWnsUr0QX/\nXobOz+cWjd4ferB4sz8unLfuHT2OLSR+cG/oBy5FjXfxNt9NikmUi4DyJQKp\nUanfXXlWw2tCG9MVP0KaMwNJ+BLaSTA25emMNFMa7JkjK5euHFIZTT8eLOxk\njucpwT4KuuqDS4BIitNvtfEvnTIjvgQyo9aB8xYStD90ugYhrrK1d+FL4S6Y\nTivk9bvgHcNsn0i7w4An5ZOuJUcVPIOsCG0QZzkJgiZf06qau8lxM7auD0Ov\nE8PsPgyRnJZQwUpVCqrIDqnNVbPsgOwVH2ztffDsaE3PvAXG118GCio0SX2n\niuVFj8D9vUAfZaUledx3Fobzk6Sj8QvpPco4IJmFp2cPH+IgaAuKwEbcOU+7\n5JG31klN+HKPIde21UrPD9mBhxsbq511mwhnCbotlryj0rEGZXju/J5EH1E4\nequgSRwxRakhvA9MEvZUMcfv/9/TTKQxKERW+t9qQPjQ3xJurRowaFQ83w1o\ni8EoTWkZ/IYWB0d/On/h40tovvz7UH8rNQFvK6rfohZ4gbDRp2a+3IMmHCvl\nircy\r\n=sCtl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0EDozv7aQ/K+A560kpepuKA3qNKSGnVBwF1P5zbXK6QIgZKG9mhatQBgu98uQwgG9oKWc1r2gQK4ePZlYVb62fm0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.b889e6dc.0_1599142305816_0.6402806018453207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.aabeceb0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-icon-button":"0.19.0-canary.aabeceb0.0","@material/mwc-ripple":"0.19.0-canary.aabeceb0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DiLA6ZYlwyaadEgucQLl4C3uX0v8uBD2OcsR5/m7mRoEaassiytyg4JlAkJ+w9MzP2+6Y5Nu7CTW2G4NOUZa9A==","shasum":"d5dcbe8787fa682b224cc50eac3cc8842d45edce","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.aabeceb0.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrNCRA9TVsSAnZWagAApmwP/3VjOqwZpW4rvpKrPGC+\nz147A7yxvv5E5ZnCl9pZ5cIatGUVyOVignjUPuaInpYU+nJn8Hs+p2Q2+2fO\nhQf40zRanvNqUTyO6h1caNd1EOQaKP7oN0K/ABM9qXXBBylXqJoLBMR7JAzx\n+g5e288kBmaUBJmSqahrzM0Qu2yeECXh8WRbIv65akSi8SRWXlbnO6xQ6Qs0\nPTQsqTwpnegKTqYKc/yP1spVTGAKPvFikV4ijPyYbkD9dTwqix3dfkmdQJVv\nPM2rVbCdc6+vkYLcG1gomZrYSM1e89yuETjc8+pIvssoWCxo9GYU22PpELv7\neZZv8NILqvColGqcaD+QDs3h0rXJHpx6bRcrxWpSwApCG+Lvckcdg0JHp3o/\n7i7huzIiokbeJ8zGGnncqvQCKIjMCIovT/PrV7yLVBRhMSGn3UtFnAulNkCv\nQaiWTvzWv4ARLDZWH/pE13ifWxSSJmxDcZoLuCfBDMfUk+KYa1EYJH75kg6X\ngIodLTyYYs5kO+RVuczkhsGsW31kl94o1LEAN+0wLL8iVudVapeC/MmMxjwZ\nDZhusawBBqv6j6vd3StcNYtudlKV7TeSAWkzbUWDIW0jpcnCGwsUrlT2Amq0\nzDwtmnLaVcLuUZmW+llxXPtK/tP6Jz9lkDZHnUViiE1zIH0OrARyxcG2OXbj\ndT2f\r\n=ZYwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJTk6+XTKs3pSxCjr0yudjvR2wghxa4Bz6e+7mDylZPAiEAujyoLO7vhD+pup7mvfCZEuE1hnhhpVTpYzz/Z1E7wwQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.aabeceb0.0_1599163084798_0.8668142067955387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-icon-button":"0.19.0-canary.d8cca3a6.0","@material/mwc-ripple":"0.19.0-canary.d8cca3a6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uvMlTlEPD25EXJZv3YDAYiNUnbaudq8d9uPXQtw1PTOd2x9dZ0GvYeb+QvHerKmo9lvJxEv13qtIabK3rYelPA==","shasum":"2becf4fb4466d634ae1af81069bd29c531f8aaf8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.d8cca3a6.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDRCRA9TVsSAnZWagAA9dYQAI2zlJ+zomUmPPEuHswS\njbhRSc4w8xKHQyZ+HO6jaCz205A9LyZ9TB5Q8NaMjcZmswzo70HCPO7yEULS\n67l5sX+tDSo9Ar8vPECODXR/UE3mNi4ewORoVMuKdk0LpluoOXoVpGuyv5Z9\nIEa1id7Se8EwwtWb+qDI2ZrLaqPoObSLue59OZIab+Gso9JOtcakPDfdnoV1\n8F3fFLKUVFVX3KBf5VqVBs4p9ER/9kty3xXyp233ezNC0FmiE5z1HzYA6tm2\ntNFi22NxHlf/W09m8VXp71PmdUW31NRoNRodjqq5tx+rkTGkqvvptQt+xD8a\n3n0xMnqhu4QHP5dmPyR5nqDqs4pn+FYkKU3CdPQPqCjwGNvhgKSrJRSXxtNz\njBzl1xvqcbtBlIcsZBL7jn/OrAaCNvC/BeW8VUE+SsccNZzk7ADhrXVW9YeL\nGtBjmVnsbNhaZY8TmpqarwCS8x2G67aUuThO013BckPYcg8y1aJG9QUbLeBg\nDWxEEpzcwq2cp8ufqMh8JgxzCUD8TcsFyVb/10mDGLV5qQDyU6FNQv2SfBGC\nuz+sHnHi3lsBBynZMGuQqE+zHHTD7Nz3wEnnnthWrKVaNUUFkcPDtbWnvuCG\nAchLZk5TM0vGONib2/AUS+g3EPkJBN8i5+irp3AAapRGI7YdiILTwOJRr7Du\nNyGa\r\n=2WAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4yQIWnKqNpl8flmsHQnW35sPCy67Wirr10TG3mrkAhAiEAgTfc7G8DNGZJJqGwbSpkVlOh/i1HEelRDgTvYRNRVto="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.d8cca3a6.0_1599168720771_0.05806519177396141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.26d34b2e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-icon-button":"0.19.0-canary.26d34b2e.0","@material/mwc-ripple":"0.19.0-canary.26d34b2e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-I3r2Tgqq9jhcEWJYDkmS5a2qGbMSD6NMtnpVUDHJZ2kNlQbPemDTy98Wz55ZewRcTlShH0KcQB+fm++4Om16tg==","shasum":"212231d523654495c9ab8668a8d43773f1ef21bc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.26d34b2e.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWbACRA9TVsSAnZWagAAChwP/R88NhqNSPG5f2vlQcwl\nBrRG5vpXTrmwz6q6qPU1eF2fqfSF9zl6pca19cuM/O3klqwDVMOz8o2xmgcz\nG6+2hunnL1m3jAWBS67LMIm6kbyPg5cQN2H5ngw1EaOevqkHU2n8+c92RNGH\nkZnXg4RHTwG0qOr5vnNSoa7ABhBJ3VaiYBXMiEQW0ZMFDDBx7/IlXGJuC4Nc\n+V6FJ2lSti/Eo4+xbVJ4ZWp2M6n/HDkwyaYowLGVv97l4fhxWbehasTYq/jD\n15qaHYL8uBZYAs48EwUJzgTsFi1xAeKXj5+LqghF/mebMiy8mC5tCxLMIC6h\nklNlMxwljcYP9+6GLONLtwPNs93imLXR9secdkzUqqVK2fH2o9rsdQ+2QVvb\n1VvZ1YncVqqk0KxwmAh0yQAXn6tMkFXfCu3mE/4/ao9fOVeS++2z1R/9lBDs\natkcJHEg1uARUPbGngsqF03e4FtaWzsTNdsqzLWaPl8gGWogNGQzKOewjxC1\njMebha0yZ0YZGK/XrzUJWF/W9hLMzntAGHrht4hY/c/gpUF2cxaMhXZk2CtN\nQz4z0yHwcFzoEJ4h1MMTSEGNgM5x3u2c1I/9AuQHAagEB7EpX/OYpQrDzdZy\noEqQP0SXAy4MvbYc0KoIA4wN2hoUQCDByOMme9umo/SIgzU2MCeoUxfZGTyV\nVmE0\r\n=Or4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhZGUPW3NCKnMOvpwKGPZ9btxMt8o35ylOYITctx0xQQIgbqwFgAUVhWj9GZQBrZq+dnJR1QN/tdOhBzeuCJdpM0g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.26d34b2e.0_1599170240149_0.33545249214216044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.a1c44494.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-icon-button":"0.19.0-canary.a1c44494.0","@material/mwc-ripple":"0.19.0-canary.a1c44494.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vzIae4EOnW3oDHsjmnCbj7Kuws9Tu01b8K7pUb4V+TdlnjW5/T75CqSLPKFhK8Mh6wpLhKQ9zRhkH2Lx/nELWg==","shasum":"6b44ac9e8d9073f8da0ddaff95c1d8bca2661195","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.a1c44494.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVJFCRA9TVsSAnZWagAAk0sP/201uS+HrfnSFcFHavzl\nFDIlA6Ya2HL6HCR+ghG83TCoy86kRXTi0CLheIJNpr911CJ6XH1K8hnZbKTF\n96AdZlxayxpG32ikLHavdWp9FxiDotkwYpZcBHyjCUIf/YglOr/c30cPJcCN\n4YageFKWh834r4wHOPwPDkRDGTHG+qMcN7L+BXLaI/DFKdwAZc74ovxLcUIH\nDSCLEx1abcuLB++S/TQlxaB4UDGE6aZUlsEDadgj9yUTafIkjAu07VACTxLr\n3KqRsUXIzVq/oh2U3ru/qOsUoVfhTOjEuDhhKP/IhyOqBIVd9rt6rpZKvpA5\ntgdC2iy+Zo/odNGNLwrJd9iFtcTysjl4HSfiyF20YT2bD5uTmcIfU3bZRSfA\nvdqk8q6cB16u7LswzWmCoddgIRujdqJ6peWYeqiIsPEBfiGTrmnjV7UhDlCM\nJ2qacwkGv0kq/FIHuet5KTHj8Kp1iJ6h/iIy6ct3foU2cMWXPe9EnplZLsLS\naNkOqWdCYRriQrbUKI7NY1qJCYRY0In5A0kdNg3fZypqOrUsnVCiC7Jn5JmV\nCs9PUflgLYztucRoe6SHthFxOJ1uIn6tvxHZTDCcFimp3VWiAZP7dXDmyLHR\nK+v4Xsgo5fIhO5CjSJQ/s7bVeRsatlihuaCQseIWGupwbac2TVI9HyYkmAF4\nMHVR\r\n=1c4g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdPBGn1ZJ1OCfKFHcHBI3wb9YGCHLygSEnQwix1n3eiAiBpUU8Jnt7gN5qy5FSu/SOwl0txV0QX6c1SYnY/Q+pl/g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.a1c44494.0_1599689285006_0.8721112595202503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-icon-button":"0.19.0-canary.be1cd1e9.0","@material/mwc-ripple":"0.19.0-canary.be1cd1e9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZjrvwLr7+i8AHPDDZJSQdHnpAm8l2J/aHo/2iYW5n1lYEOZAmCropC43xPiRETQyDeSkuCEhnGZ0qCtcvAUWug==","shasum":"b0b1eeb3ffd41b0fa9b469596c3763ffa8e84242","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.be1cd1e9.0.tgz","fileCount":9,"unpackedSize":40206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlc9CRA9TVsSAnZWagAAs+UP/jOsJjv2Z2RQeyaNftkq\nNIuoFTfD9oXHtIhmGjOLR1UPEWdGDIGndrFy9+/9OkNc7s8MhUDZL0MSE3Ms\n9DYnrtFYr/HhgbWBDm+nAmdpTyX0LeUYFJIgIBOGzjbPZ3sIBlPamZJ+zJ6x\n9XIoaEhiocFRk0TqIvh6kNa5dYQ/ojAAOCehpSuwXGdM+5gvQyF9/GvBIjXg\nJNDD/K4yrdF2TrlZiThz8YlHocZN5+NBgn7SEiCaG7M6VpSYOTHO2FmeO6x3\nIq1PjIj8MWayKVzO82w+HoaoiB116GUGFhkviOGmxADqC0eZJpDbqQWuPmPG\nWTtzEcYLS8imOBbZfmtXf0ag+O6vj0QatT2+NcuxEh/i0OLyFHqiDd2ti8b0\n6i0CePhRCsmyAHxz8oB6URY3Uy3pMAWWkQP3PIYQJKKLHiewp1988EKOVuRu\nPG9PYFpAAIdWV0Ntx2RQ+7qjbzvqJkCyHVc+eZcF5Vz9wqEzhMcHf/Z9HqX0\nMjk2BTCere0AbGvq3598nx+rLuF/S4fiuv8PVtTS/3idJPNlZZtsqrh18xxa\no1KiuQ088YZbFW8LzHDbEkkf4f5ayaTpcQcnCRG5YPcmDkbYzo8UQA3SWHLY\nllCGOWYmxnOVV541esXDP4VTTbewiWc+Egypbr4cQVX/gMiWqVZe5RWbWRSn\nyaL5\r\n=LcTj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjvqwHyvC/qc9U2fd/pwFpeYWpp35L5JOBCiaf/Lw0TwIhAKz64UKpG9CtagurvTjSwEzcvQ+4VSqITXfXsfAqJhjL"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.be1cd1e9.0_1599756092669_0.31930998516273656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.f094c0ce.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-icon-button":"0.19.0-canary.f094c0ce.0","@material/mwc-ripple":"0.19.0-canary.f094c0ce.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-76YsDGtekntroETVHYiscbcEvYU7xPUOT6qDJ1GWjB0hexs2iX3MdCZarK7C/4p/JVatq3B7xSbOAtpgCzp68Q==","shasum":"4249abd3ea80209ff39da8ec821289281ba299e5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.f094c0ce.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQpCRA9TVsSAnZWagAAiIsQAKSfZIlaFw/g19yq88ZW\nvL2t5AlEDCtV/e9fCV7h1n0r9tN2E2N1uGPL7S5aP3wSSaFmsI3Dd+Fk58jB\nsiWQR9iBaHgVPY8NojAZJmDRwAq2by3PCuXmJYOD4lNh1sagxBNTcB3cHl57\nGro53LNY1eWu8BzVyHcV/h0erbSHZxKeSurgCNGWit0aM8Av56D9/DkAZ1tr\nsdYW6kHeWvEg2O41hXcAUmHDlO2AiC/HG+oUkkmZ5DdePls9vY7MnaMd2F0P\nANcBwGExRJfbzPlRl3sOs7jP2d6BRv7+8oFOZQId4l97q8doqIgqZySDPKTw\nnkvsChDNVh9mwGbpmiswZCkWYKvyOjgoAT/4QJghZ6z8EhhY7GYG3X00KsOd\n0XmR1pG7O3YnRmSXPIOepZneJa+lZSwAMEHeCOAOaxNrge3RP7CaT58LCxiT\n5+8R4blWmHUZAkBQSuY6Pk5xPutGWDjgJ96noCeU6CGQf0rydDH3/Tm4mR0+\nDI0d0uByD9Jl1vgpvRww+ud0iw+aupcpsBs+Oz0Ex2J++BAnxIhfVbsyM3d6\nHWU70gauiffPCEGVuHm/6ozhk3vYrZCj0Is0hQZlR5s0BOvZc8bHz3H+CVfd\nrsCjV67k8UYiDSG7n6njUZ8NTYoBf7BzNIqOOS+SV0+SfoHPr2oNDPq7fgrH\nhemR\r\n=KS4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm2qg6maQ6UyVdVM8aztcwqTjvz+SZ1/8nC6cpq+1uegIgdETxHEsGpDmaIjOvvsVF77RZZVdnW634dbeLcTkOU6o="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.f094c0ce.0_1599759401552_0.2804653494614149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.c1261e7d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-icon-button":"0.19.0-canary.c1261e7d.0","@material/mwc-ripple":"0.19.0-canary.c1261e7d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-V3owCcJE3hK0TDLm2Xn9DExZe07BJeVO7h4MrskD0t2LweDsmQ6fmBqdy0DxrmYjLp5I4ewdy+EiuNrabavA2w==","shasum":"36b7501075f69feed008bb300ccae030d28553f1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.c1261e7d.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBtCRA9TVsSAnZWagAAawoP/3fWq6JLSSbpSzXI5+Vi\nXG4hzTBtJZ9tt/Qaf6GXxE4Vi9W10IyToaGJYPRZCQggbLW/1fDvOc1IIHv3\nf+XMegLUDqigtaNhMr6rSMb/AJFel4zyb/A5yLcYe1Q/Fih3QiFiWRALawyi\nOIcBId6TOWjGvkfrdkv6/f7M4dJ6ODC+2E2Z3pDOwC3/Brf1VRpAryqIbbwG\nKXkugL9f4oDiB+NAnt/G84vA2Ry/vxFwaw2qYH7V/EmQi+ePBAOE+dSyTOui\nT5CWGyVt+KlSBsGz58SK0k8EAeA2Xx928/4RIP18NTK+azeQ5DxbX7hY3KSm\n06wFzTonSaT7DrTawEqQSerO3aG6f0wvJO7g+hz7vxIv/9Roe3DmFFhtQ39G\nuhIvnkoIepahKH5Ax55eIrrEOPRu6QUdHENolmrn7a08awDjWADbigG+NVrg\nNJjAMu7RrSiwUNAlocNsSjAGLLgaM9+C9hCN9Jpi5h2w/3BRtluPR+1lwinY\nYE2EyQEnBf707Fx8uh/K2WpCV/OFj96b1w2nGw9rBMNJ6wcolchii6leK43d\n48FX5nZk4sZVBeBfJsKKL6y5z7bRscF1gUYuncLAdgHASkkQIYSodzHLEh2w\nCiglC5Hty2xl1YFD7THz93X3K/VQWXLcCqBmD6P6PEH/GrxJViyFxTQkdvsP\nDr63\r\n=tpTU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8euVTapfLe/jEy3OsPk1JYV3ooUrYa0Qm98h92XloGAiEAr8EtWeWLzk7IjbKqllTwW7aQYxQSYTVwFg3+XPiSfIk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.c1261e7d.0_1599791213230_0.8915909452227775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-icon-button":"0.19.0-canary.9b39ed1e.0","@material/mwc-ripple":"0.19.0-canary.9b39ed1e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aRKTJbk4Bz9a/9a3LdWotRXZe/w2vSF/vQNSKIXM9dLU8a5zwr/DCWMxUQOYHtG19eSyZ0plY6JEC96WcJjgvg==","shasum":"c2a6ce716392b7dfd59dd4019c283273ce71268b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9b39ed1e.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCgCRA9TVsSAnZWagAAoi0P/3pHL51G6JELEwUa46r9\nho7I4ffgSw67BXujC1lqyQvAKbBSchq8+4SeA/r3E0BgW7IBKld6pRA9hVdh\nQcmu3K335vNeJKS3pIKO9g7ETl6dIGJ0VToGlPfCUaXnemYo7noytwbeilKK\nYpRH/JU3aZLsc8lPaf/2R9B0stw1OcMYULEYbbWUGEhdbIHVJKKKw1onEBRN\nEEaZ8hvraNB6ruNjwr74B3wnxDDQvDnTSA1M5FSSGgsmI4I5CQG3BCQ6qK+a\nAlFK41SUbxuY1CrywC4LrBjZ18xubR7BYeytgn6uKxWT7EKI5CSMxEaU8cnN\nvYSnTJAC29GBl/3Ww7xqe0J8qKvoM1gTQ0JZHNwpqg9fVtkG00ThtinFIvU7\n0KQ7TxzM87i/wnTFyace4SWl31kBdEBZUETCoBnVzIj6ALSCxi1c/JmhkO5K\nDaFV/qy01b+y1gjMeyH2PnayJ4THJDB3UZM5CsJMxFA5PtPpPwKoFwt1/+Jz\nNARYq9nohn8BW1uQLdfn7ATp+itn3UyYULXmIJ+u31g6KU9sOSXVOZvnVzdK\nO5rGLXpM4s4PfkB8BAsrICyL9ebMNbtOp/pz2s0jeq/2TioEDZDA/dyWSs0t\ncFLv+V3PZndot7f/WGaJv4hK37QoL5UcanyHnHQXPEfr4dz9C3x8S4Zt/YP9\n6/BP\r\n=b5NV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/M/fdH84qgFsyT0pNQlsnd2GEzaX69pbUAuBzSDX6aAiB0pkeLG9ma8tX7ku9fG9AdWiSWqjymJ0ilr54cT53z1g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9b39ed1e.0_1599791264196_0.46277015328487114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.e67214b3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-icon-button":"0.19.0-canary.e67214b3.0","@material/mwc-ripple":"0.19.0-canary.e67214b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1lRhQdsHYWOPEcm691jk0X6BALoH1fj000JerUNY3A/XlpHMfBjaKUCnOOoIj5g9k1Jbvu77e/x/qXZqMee81Q==","shasum":"6f798000b7ecda012ed354523108043751f284ec","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.e67214b3.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGjCRA9TVsSAnZWagAA6G4QAIIrGWD9qfdL4jayV2IL\nAdhDrlwOxffVAgBOPmMKKM3VRn4iQ3MfMuuPhCIU4XK0sRpsqVjAFqCv5tiC\nAK4OH82f4GOd3vDBAwZ/VKsVnkvSbO2E2OZBpyZUoO7O1IFfge13Z0VTzlNN\nRuubVqCCafYY61q90EIrDMi3VQgTsVN1glA/Ywgks0N6aRBG7Idbm7MgGcwu\n8kEI7Y0gvxjRxGLbgsiVhxKY9xQPhvJKGZP3PLiL+QjiRo0we1j92w7k6nP4\n1swONbREKjKb4vN86JkHufkB7aBc2Z8Nyy0RNfYGERpAJGts0zqKBQetgmq2\nxWRVEwYJ04CToxMqbtqWxJSKgfKB+dl98jGz3SWVEnRoxR8ZOWb3KSOCUUq+\n26tNcnLys/a3HCJdNe7bbK+nRQLnTMW4IbUjW+9LBB2NGNie52+j6mIYnMAe\n2tVHkTYCUwJ0GTb5dWNyS6EYYRtwRsogAPfzRZM+mpqZoCkncryn2KlfOA17\nHuURd2H48t1wMded89tr7Q08RNbXKZ6HqXtM6oVoQf4HY9COodbHZu6Uj4Fy\nmemBbbL0/x2yeI6S87dr1iD4btG6iw0GrqK7TQRfzc0TUQ3gGYpzM9Rz3XId\ns/9GMav5MqIiNwHft3M3WlWD15AHVfLuIEXVxCGnvKzhMA1D69QbACEjdkRf\nYfKs\r\n=hlZ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpvr02lti/0FGTA4f0mSL44jex+446iPh1Df8NrIlHyAiBrG4JL2ZxzTit2hPXYTcgYPUKlWXo7M644KoRsJDg8Xg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.e67214b3.0_1599791523139_0.0033094244673386175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.36f5da28.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-icon-button":"0.19.0-canary.36f5da28.0","@material/mwc-ripple":"0.19.0-canary.36f5da28.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KVijpx+dnYIiwsExkFxB2dj60+bniTsW18Se9NKuOpOvYODERN8zjKu5Vrkqz/TNUfLGy4QxQOVdCBwU14WZKg==","shasum":"4f58f1f02a05fd343b90f71e1fe3d5b122c97ef7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.36f5da28.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuJCCRA9TVsSAnZWagAAu4QP+wckvTeveQShEgWFOp1q\nir9iFegUb5JY3ejPNKq38e4b/4ldmYc1SFlcZEOMU5PL9NWPUO/e6Oa91yoL\nj7S8JlKuuYKfeTelouYUPPLqsQEIRaHC6GaaXjIG1xkEK84FiVw/R/bekRYb\nn1VMnP6nkWwCaDeqWCooKx2DEDQhnBA0cAtGXtyZJ5YKdDGzF1WaElzOAs7d\nTRn1CInV+Ap8swyNvqP+bO4BhtWF0BZkJjaadMCpgXe3eoNQsTDYX7CvY53B\nZKtxNxyrn6YSEhg11NOms6WgFOfxOQv5wvRZ4YroEiVVucRQgHTmJsOgKEcv\nQQWj+6YbBOd7mdd+7qPRJ6zLfO4VQZrWZbYtM0aAkFUwZEABA2mLF6pXwSkU\nICSKcE6BvZ1XXtVWZOskdjvM/xXqUb1Qr3PQyUn/vba0x8XQeKpXw6uoxiJe\nijLm5p87GXynDqkh9nLnhYjczo7wBvS9Py3KAB1KYyOJaDkiVuD5SBXJxA9z\nUO08TQuYZ8g+/eocAw4P9+P+OxrHCF9W+6OVJregUTwE83D09dbeaFjwX9ZH\nlTAd9PWGR3bk3BgQMgboR9vp71qcwtc+JzYuWZKZEQCabPQTSM1HffS63bfT\nxG3GM2OgAvNoSdDVMQuZ6Rf+hAOQtqInxQiRYbfUN8s+0Rn4SEfVD3NADgTs\nH3nn\r\n=9B44\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfq9mE6BgV1LSZcsbGIAi1WB6qYBPrKoBC6CeZyqoHiAIhALDIKVVGzvDeBa3KfrgyugeOD+3AdApGMdSYhf0K1B9/"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.36f5da28.0_1599791681629_0.7607813753323491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.3babab12.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-icon-button":"0.19.0-canary.3babab12.0","@material/mwc-ripple":"0.19.0-canary.3babab12.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kDRwJOJnUTx8OaytAJBtVg5bTkj3PoQNxIWt0CnhLQJo3SVvjC4bQeL/iYr4b+sUK/aIyDg8hxa4esjVKFs07w==","shasum":"6ded670f87354f8b2cb55e54474d287381674b66","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.3babab12.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuL6CRA9TVsSAnZWagAAcNUP/jtPRB+U9Le35ytqLP8B\nnW96O7fD7OOMcTuI9spJZ9YQE2EHzoE/wDP1NvCX601HcHPMj7aygYSiC8C9\nxvrY+PTK4fq0JmtLzwsKFFukWnsb0mo5owf+wo1lodrYrVgCTwWnwvkTyPqc\ne/eo8Aj22FcM6vWTub/0kFzXN5tJnA02C+SPjejtK9iBcYToG2hCDhDygMXF\ncPyQE87HQpFJto9JNAw0WI8lo3h/mR3J7iaULzXAbH2RjSspPu69xt8OK6Kd\ng1kgWm5Ud8kSlpQQuuXmc0gV1uEJEyvbCNVxbR5RXjMNNFkU1WjhyCJgkSCa\nVGgbgOin+3uthzGBEIsPCqEcV8w9ZuCYa6Q8mvvffvUlUk4p2wQDggLORxED\naPEWz/zhxciKljBv39fIV8Oq9kBuex+gwZYizMWomAoZZ1SksPB2msfKqx2n\ns8HYQlUKgU6Drem4o/8CPboJsNWskoQI2m9AqDmf3wzu5dvvLWn/Z307mgDR\nLRU0NUdtzQiclzaz/dlWE/nZ9gogSIQMBwUuSwwTKPZPY9PPYpTUaS7Wp/v7\nzmEWmU4Tf2YOBdRLkEummEexWlsGNHME1XqQZN1TFajn5b4Qs3bou7foWuJN\nTq0OnUA5pft3fkZVY+HujzCu7HTAgv+u+GbpjDgCyaLgMpve2aaNRucx3S0X\nqETP\r\n=R083\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfW6vCafYhSalX3j1iy5Kzj5y4XN1gynKB/Si1zBLC1QIgRJ9AeZ+GyNelqtJsbBxHlR9QmxxchG5weO6Bm6oRLkI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.3babab12.0_1599791866453_0.6999715831552369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.a4481e6f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-icon-button":"0.19.0-canary.a4481e6f.0","@material/mwc-ripple":"0.19.0-canary.a4481e6f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8Kjda+6LhbzUsqIA/mvJPoKHsvlUpn/vWE1A0ooTU1L9XKtZkIVu/k6r2mMss1wpv3/0sX7y86RnRNSXCLGOow==","shasum":"72917704dfdd42ed0ab9994035af9d457b9de761","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.a4481e6f.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXNCRA9TVsSAnZWagAALD0P/39JBs+IgxhMAu6wShJF\nHufDrZ5eKe2sAlyUq1jXpwT0GXW5CcwtwZsWnnfjWReQ61pm16XjGfjNbVqh\n3NcPxn2HvCEjIi6GPFoJyNEXOeKpqOC/deaT/arl/vKPfJ2Lyly5j7e08CGI\n2zq4uFKSUWGFkGwFpDCxTf5vUPLrQ4Pr8XkDrQVQqt3HNJf/+0WGfSjzyOl2\nBhqb8wMl3qhXzfLBYcjKLjy9qF00Gx/LnGP8rGciuLe1ifvJKf6DnXvEihIA\ngVcxvNEyZjrE30DCtnwCclMN+afn2/xNtn98bGliEEXE2VZ6PFlSWmCa+cZk\npsd4zAkM59jwhVKZhZt+HUAxtPbMIAw0vQIEzSAuWx7/BEPzO/e5PL6oML7X\nxShQrgphiBhTBRkQ/PhX9FDWAj6KqxpeVpTPAj/2TkjZkiwCsyl9buCZcfmn\n4TEuWwFPAHvMvv7QKcyaRtvlH21pAfqaX058/nfnlnCiuIg4nqbiyygTk4P/\nlypqvcujd+qTgtBsi6I0URiVqBszSYExVDmZgsNsZroNWXNRax8ZQEhHjEJT\n3DrKypZ/x7tazef6t15rjqrxFAYTP2aBvAd8tlt8dyjzHwo7c08q3nAw9Jw9\nmI6MxsgqIkr1AvHiYviaLSjRfPaHmXc15p6/Lb9lY9yeqREhwQNOVQebxUVd\n0MQ1\r\n=yQYk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZ6/9CFFF3wLrXj3lsVxZIUHvFXobv0YKEWndpuDYsQAiAtl4/mTXLj0BHgoNnHrVtg9ZJ42D4MEZdpB88Cig0Fuw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.a4481e6f.0_1599792589317_0.16627223872538455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.a9177836.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-icon-button":"0.19.0-canary.a9177836.0","@material/mwc-ripple":"0.19.0-canary.a9177836.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nPqhbjQN1h2MyESJybwU4an8Tv7eSsgkSKsomyQcMH2fSQf/H3uJU7luFxsuSsAVfQgt0xw6cHNdWjBg2CmTeQ==","shasum":"5ffbe5be6aae94bb4f9f621f57cb4aa6c4f772bd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.a9177836.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7hOCRA9TVsSAnZWagAAs1gP/1CudMCJxyqFbk0/kCre\ngvey9yPLkU6GN/+CxctqeJtcmQVxhs9iJ13FEYk8ETtWr0iUDIDw0f4xE8Ka\n8Lv0CyWoaavEycIABUHJQYEoytHqtHYGYL1/ruqrXjJwBu06lTlb/ogOsLdK\nTRpAengBaEyIBDVaF7CIjT0u8AxnuobvFEM11QL6v6u6mUd+Z4FG0GyMqpKm\nL4QMt4Fi9kbV2hgWu/5LUeqxSY4n3qpfem5csNHzFFTGSPCze1/jAaFMMnA+\ny+Ybu6qUU8i/l8V4ntU97unRwSGGuKkDWTgzXnjoSqdQxXc8ctNaxu10KdvW\nl+ZfyjxaZzj6w7ec/Lm6skOjNW4h5ZZOmW7JS2+xMjIOwc0SFPQwnUe+ft8n\nrHtaU8fU7SsKlakBB+QR7ecSbiVYYfzrrPf4amXDtZCq5Soa2Wg/huYKukXe\n86qcDIM7QQANC7sYgnqYgWl4+xVkzUZtHVLvdTKJycABwrIaqb4nSGOydo7Q\nDPkFGEtm+tbim83wgr5LPYVjs0tvzcG72GnRg7A60E5/NLWzGoHoVRf1+i3R\nEq35+Er+Xx2WbY2boj0i5psN51zmB5CtYPv7DcKCqo7QKxHIoH43/k9zApdy\n/WmO1pOv7GLkPVSqjqT22c6HTkJ4Azs1KseiuMBSqx4EmF4C2vwAKTlvWCVd\nhNYo\r\n=UcF6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGh6DcM4FAbNSM3HwORUmewxfgfaNAnO6Kvn5DdbL0hxAiEA5fiUoR5bDjROM+Gjab0QYDj9nktfUSeO/yaJXKEChUA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.a9177836.0_1599846478460_0.5712613207518571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.b102a3c8.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-icon-button":"0.19.0-canary.b102a3c8.0","@material/mwc-ripple":"0.19.0-canary.b102a3c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EUP1LXPFJ0O+hkAkqcmeRxrEFhVz0koDmtHJ3n1Q2TftL2Bm+HqPnbDhrcei5ehzLLA4iYLJVZ3ckjo5yeU3dg==","shasum":"47c7ea0cd010316865b40c6da36abe0ab63e1945","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.b102a3c8.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX876CRA9TVsSAnZWagAA360QAKLxP9frw3sfKvjbwADR\n8v0BjWmKsIXUHOyDaKiL1pHVz7c/rDrh9+XzgA8xtdvDF3TmTAA6ZBe0uWq1\nBZPwsFTFyocsuJSSLpGCRvVKgriIaw769RimQ5WMQeW6KhCM5ijQHe2XxEri\niby+rOZHuTDbWvQzM9u7ILizMnBz0/eTWfU0mgbs2zErfzWzCAkDGTmRhQSv\nlSinuTRZKfT4d47603P8SzecQqmaQhndogh419RZsVkgocd8HFFlzfefxcro\nnCYVM6EGbtxrL0y37L8vhkXhMDwv1YSGHKgEal5dSYwBPoxkFpMQusklIkVM\nzHRvzeLHTQLVP7KLrkJiQq8Y+40hPhinYk1bnw4kWknJMZeByIIJdqHDGB/I\nSiQYkafou/rvKgrB+K79yjOIWA5ThL8uXfB6BRA2aU0X9Icu6O+3bvcJRoI5\nbSOPMxhtRbhtyXV8u8w7nZE0vuXXjMyfVrZdxTAGq4Fu888sT8k1QKhiUCZI\nhiMidomgwm9DjR3Qv7hajfXC+eLXhvr+0E/rCfEu+O/jxgGiPcm0zNMfwmPJ\nshiDsBwf0PtcFrHcTHC7kXj371AIAm7lRCTSOIoXsB+yV43ds1YYdE7d0byL\n0eK/h7OHbSTv10kEqqUO2gJ3QMm4D2c0fCBtDtGkwLxz70qL1KI9yCZ5xj/l\nQjUQ\r\n=yeuE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBbG+KfoAeFon8IZaJ0HGUDHE6OLtF0twQAxSNe/uOCgIgRJx0D1LF7D4RjByWy1AIoUwkE3BZhQxwkEw7EjQfRcE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.b102a3c8.0_1600114426368_0.5466627234063499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.a7fbc707.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-icon-button":"0.19.0-canary.a7fbc707.0","@material/mwc-ripple":"0.19.0-canary.a7fbc707.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-D+2sdoKa4n6NptLJ7SoQVGOEyJT+bhFTqA0TWD13k4DOwe9a0K5Ej66WJ47/VV6pmfu/CfNcCFJqpMX8hCNMvA==","shasum":"1cf9b32e9b2fe8631781af5c06b8993c00903fe1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.a7fbc707.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZ2CRA9TVsSAnZWagAA2rUP/R+AhiXwlr7GzxRj3WdM\nfPINtikLjTaIrVzdA3s6kKW96x6FwgQZ/ZhosthoBW1e2eHp4ChGKcQM6jQy\nH8VrSedRoI3/PGhGafXn1Wbq2NopHOt/wwr5VbU4FaMxTBrq73W18d74Ow9L\nhqlAND/1A802E2m6ryeNf1g2U9JJamDPqjE0fBofCETp7ZVOnsHKklwPoaqq\nZ4/A06CUYtYy4KHltGJcjh+NcnFC8xZpSMkG6jZ3DWdSgXENPmUZbyc0K6o/\nzevH3/g9TAic1pRTDiBG7TvdKASWVm7fH6b2qTSzcCro8aoKJIAWnV5LeTUj\ngnFcJin0ycZOZ6OTxwdRmOI3snwGN0jUceWg3Kx+iTrdnXlSADfcmSfwRe2Q\n3/qPcVMnp6acGpT8zgPm5zB6HpqBXB5wEsBhYPpJ/LN1bAF90QNu2wXyVr86\nnBwy5MFX6ckPbgj3AbQWTto/MFTaeaFScgS4JxR672mzYePh6QyXEzLPksRl\nQP9pJENw9OiiolmSUSJv8auLpRBQ1FguTPxyqqFZI4yxbDhlv/ySLowri7Rg\nc+X2E2KI1t67UYT20LesbsPQXUoKXegnBZDM+My4c05f2oR40r7OiIjtLDIM\nRI4kz2ySLhBXAJm+gh4yOgUpXJ6BYpST+4HqiMUoMXmncXPJeQlEFvJ4JX5E\nymf5\r\n=vEtU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvqUF2A/VxQV6ltZvkz5newvf4LeWSRvLEXx/rHWruQAiBYpoi4DpnDFotetLjDn24eC5EYRRI6ohhH0ZugtDE9Cg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.a7fbc707.0_1600185974136_0.6636100889238175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.ed6b8660.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-icon-button":"0.19.0-canary.ed6b8660.0","@material/mwc-ripple":"0.19.0-canary.ed6b8660.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-R0bvm70XzvuJxmSFEoHaT98m42A8Gh4HEqqR6GAu8byfqclLmKQI+ciTICE3O8xtcNJ1qrpNJD9rbFoo3krARw==","shasum":"1a2190bf3905e1a03357dbe15015cfefdbc8f3b9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.ed6b8660.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPj/CRA9TVsSAnZWagAA6FIP/249X9H7rD3Oqa9+yNSs\ncumhXYF7DTYvz4LyNdsCTfzPUnH7ishYpqEIS4ySqqtlxqEG5UtrIoT4VoFq\n/nCmfwWEwOFeOUrgaqKXqunWPklwS36B3Slwa1eai092FpJHoWNqk7bq3yIY\nP+qr2jgPXFFWUM53Lt2pxjmBw+kDS9AwK7im3rEXfMR+VJeeH6b7Zul/0JP7\nICXz/llVzlNwVo9s3J1bfSP3YzzJ72dofOEUJFez9xQf8TAtkR5LU6jSpR36\nXYXOrmIcNU93nQXjfYIXcKR3mJvtsZ77QxqLQ0OqTfdu9qp+jh5DOEdIhl6a\nusaZtubdWMZEiKNzTJWdenPTqBAiY8TqUZ4utBlR19flguYWK/BMlSZMecxX\nMwBFdSQqyqndZFnyWVxj0iLHAqBF4xTvspSSf9hYVrwhN2u+j7Jja0ksrztx\nOPOMdJvC6CQAjePFa6yyEezBVUnhzZSy1ShGxx+vso3MCJfKSf7DeQlB7h03\nPFvEhr8qxnPlmnfDrwCgG/ewci1Iod8M4Q8/1qBN6G4pGnWmp8k+IBRHD3gY\nv7lnIOBSv1tBudV22RIVYQQwWE6lSGtAMxrhmtnhDpV+DQv1WFqYKZDNRMOz\n87yI0//t9YnQylBAa13Hn5cpnFbxClTVKOWexs09/1n0YdyRpqZKOtoF7EvJ\nlZoe\r\n=Fqzk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgyYEU/DgtGxD8oSnwFEwPFjwUs6syLrRgSB0Fj9r1ZAiBX6GEQMbqhr3hv1lUhKmPaEt8864h7X/EgVFJEizQEvA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.ed6b8660.0_1600190718964_0.8171677609600005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9c2331f5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-icon-button":"0.19.0-canary.9c2331f5.0","@material/mwc-ripple":"0.19.0-canary.9c2331f5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TsBKRRxvF/shzA867Tenoz0yfpU7OQqypYiOQqC3xKKDlnfCNfIfkqCPcLsukPBSP40+l8Hy/IqX2+7wU3zOEw==","shasum":"32c119f81a5bf0a35119a7ba12ddd9b3fb4d08af","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9c2331f5.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP67CRA9TVsSAnZWagAAPVAQAIubtMfWWq/ojPpc/fDG\nnLY1W8Tgn8gmFMQmpQPby9YowImFoyhrgh5PEvZk+Zvc2hRCGWs2B/TKgSHR\nXyBjMP810VMItLh0dPfyUIII/pSrSuvZw2c9JT4HKXJJBQRuQU889yxc0oIp\nlZVN8DRYXIOHsPAwPObXkhcOkPrsi1FnqxVUJyEh9QvQM/OR+suJ/y9gHM/B\nqB+OzT8Hq5+wSlxVM6obna4j8QSAEXgdRj9ChtN+orz8bqGGH1CbVBdiTAC0\nPCJ9bA6zdoRB2BMbLZPREGioOmigl6KdcGGjXYDZ0PIpC25qnrQYJoifOOX6\nY/dUnEF61BeULrBsV6DEMwW8jX8yj7DTHnApPM9lve3ynCzBXC46Gw0gg1Nt\nyU+0W4GTgSYrv3NXE48SaboRsA+2EwE2ZhRHR/dFxU4g7XRFjHdQnRqVStUp\ndF3YlIbeYj3AKwAlyUTLfgUXv6TL6U/f8Vseg0Z5ntrpEumbb0+mSK3EldVz\nlbtyQE4h6cJg/FBuzpIa0AFCPJwOI57OJ2Y3vYqNDrd2e/IyKk4RGDAS5aOV\nhd9i+/PJC5kBkC97m93LwvuvrMFHMxPUsOLBFOfTX788j9UCmRXC5+5Fx/Qr\n2EVi0wh9oBcToRoyIJ9COm8g7riZa5+KPzKwzaa+NsIJVN1jM8nmOQYdEyTT\nMBIK\r\n=CSpZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQl+Yjb9XsYrHwveHi3qkSR7R3eMeIL9h69FI6HrHLfAiB8hGU4EK3b3CTuvMCqbk5uQG0EcmaHUDltayG3HYlnxA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9c2331f5.0_1600192187498_0.3618591121535999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.63a5f088.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-icon-button":"0.19.0-canary.63a5f088.0","@material/mwc-ripple":"0.19.0-canary.63a5f088.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-glF8WLQBUba1NdSpukQ54JGKsWgDIQ92KIliF84saJGNpVchsuqXXk+B7w6wV0vD88bycQZpICrCybiNM+KcsQ==","shasum":"6982b6add94224142bc3a8ffe2a0b35e1a9c6a0e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.63a5f088.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXTCRA9TVsSAnZWagAA20kQAJVTvWSLEfFtP9odU3cJ\nP6PtcVN13x6vAJNolYx6MX07x80imFrslQWrLY9cxgWT6EkdlAgDrCdUwB7H\nK8Tu4RDiC+W+CKAmlMW7ETJpmw5rV88odxEwcGlgSBz8KWo5NKqK6Nzfq+dO\nVJkrLBe8dgiqTSnEuQ/1u7pNrKKLn4yskc7YvEBBSpHVTyAiTxYIYtc87ZHx\n9fIjaeQmH/aPYZ2wNgjtqP8PyzE4+YGNbZa8Q22KLXSWAsVZXKK8KAfLp9yi\nfeVJzJ+WFNgbyi+2giltuvfhkihD3RaaRHgnajC+Fh4UR7T04N7xnBNHOId6\njBC415T8+EuEb0C4ppavPYAaYGVUnlmr8XIeXY/ajd4+Oi1lQv5oTnbPlCvZ\ndun2FM72Ld68pcMivjubdUSSh4fKp6XlSZMS9ASvoUdsASoSXSkKTuk/X8u0\ni3d2Lez2JedYOWQ++b663ATIHgwcXF5BprsOf7UC/nqVInjgi/KpayP00LAc\nGcVocL2pbzCJAANYBOTQ9rjC9uekESHXVa7bdxueAhoUVQvTtQMgv4qvbB2B\n9H0OwQjyFGHafACwdbMwFIYHdIYgaqgoj1Cd2tect7zyFaVts7SnkoODHAuS\nru0e01cquH0DO3f/rtWPEf0QdZ6d+FtrEafsoTBnCx5748wM0IpXaLlvs967\ndmFq\r\n=8g3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPshgw/mJ99BTNM/EBhRTUQhr62j4RZHhLRrDzDM10PAiEAy4SRFFjxRxWTMaLTVqBrWziFRzxeI2ef1kr9+uSwI70="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.63a5f088.0_1600292307614_0.5086205073826056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.b7995e49.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-icon-button":"0.19.0-canary.b7995e49.0","@material/mwc-ripple":"0.19.0-canary.b7995e49.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IOBMdNVh1gbsZw/J1lBoQL9L3myn0yWUUhbFYZ70H1a74UHt6iYg1GRy8RpEExqATd6bXyGD1/AnNacoKfMckw==","shasum":"f8be7138fbc0ceb1c2d837e54ccd5a1e35aebda4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.b7995e49.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp9HCRA9TVsSAnZWagAA8TYP/2jTqH/AfdWIbdbnz2wA\nXrhLmxWXEAWJaOvFG0eP7YADkPio2SkIQSwuncFiANLZ9vCrvRS/M+iCNAFE\nNVh+UYdVkRsFeyQUszR3xgkDzl2f5JIj9xNXTO0TVUGJOqjaKUY7AG75XInC\nJ5LLrgPDZXUxDY+nImAIy60X065vv3tsCokQDH4g15FOeTAnrRarItaP3eSe\nw5j2iIzkJrLoLTPR3rFMKGNE0yRaGYK7TMqozi7nLcgfGnS8Q88g2CTjL6VZ\nA/0Mg6Zp3Q609pLLnqnaRjqltqytiCR49ZGXFlJ9y+46D5lB+QQ9s4PTiwxs\ndAEcgdes+7M83h7saI7ARi5DbaMemPttUO0G4wpQGWw/u/4bLfDrMQpM5Yck\nFrvKrG7bpnajCwASJRi7rjfkDQlMgpkF/w7L386QpGYgHdEj9fMQZ7S7sLaN\nwY4PCH8A+gJdn40jVLrWhWCn2Nphnn9yb6CUs6rj+TvIKU4Iz0SjNMtdcK8F\nIGnfRqqvLeB3/FodFw03q0UWzLeZbhrS4HYzNEPNBdExGzGUKUGVbYTrU7bp\n38+I6Cs5h3N1FF6UTh5Fdn3WZscfa3ESJoiQyTLalClmZeKQag2qDAMp1x1v\nLSy4v+a9dXixqKE9QULrQBCdPTJmGKOlwvDIPybkcEHBCBEHLpc4TKhIhOSa\ns8Zy\r\n=uSNt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGB9UTMt1edAAz1sTuQbXzS4AJ5t6ub3pIrkX/phVVbiAiAPmYckEoCZArf6JfoDa7E4K/AamFmsosffaNdLkgynVg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.b7995e49.0_1600298823287_0.3959899135075515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.0da3ec97.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-icon-button":"0.19.0-canary.0da3ec97.0","@material/mwc-ripple":"0.19.0-canary.0da3ec97.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yfpBDjhtmVssA4ye3Q3hmc+ciW+exHUnxufHvwQfi+1LrO/xAkgIUj10reCIl1NE+LQg+HB2xIiNIqb1kzKrqg==","shasum":"eb931a40b0a0761986b827b1be2b175cc1a25c40","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.0da3ec97.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSSDCRA9TVsSAnZWagAAIeIP/2QWtfONjr2JsSRaL9KV\n39n0vT3eHMaxqm5cHpXugrPHhbehGJhAG8CNjr0DHvIIt5ZSe94b6qYarYbt\ntOt3j8thilbsaLTB4e8SfrpcGEmkeKmWvE5f7zv9mSCDyDPzH/0Q+Eu8lZt+\nk948fqejv6uaAP6mbbma7Dy/lGckAqHRBIFLvjwYqo+hQjpWvQj6Y4wq/7lw\nf+8zX2si8wmXFuKYyRu7Ck/yQiqhhjlGdgbv199JdmpmgFBvG/WpC48M+df5\nA2Msf7TUVHUiLqeNubz1sAAGNAcPrvw+J/hXEkLUkRdtQDUFBJRO1dN6mJik\nhy8UDk7Y0wmo8DeG1q/r973xOYfUbpqskmuXiowAUl6XermtGDWLRFkihyE9\nVb4jVf3YDyrIFVS/Fo0fkgu9R/56fSo/ZcmPzVEkjpvi9M4NG2IGFuE/8fU9\nctYe0EvGqqomS8ipdB9+qa5GCyblRGfULwSzskzZlK4T6/F7JmjbPylaHgwl\nGftrX0/TP/mg84cDLP6WlH7pfAXYKXIAP6MJ7pulGrYAy4g/4/X8VD1fIk+O\nZO/DZST3Z7taQiFSwNIF2XMXBWXMp+xOie5kkyL8S8knmGkBMv6U9+dHv2e+\ntgz7zFkgWK+MB41ahmZaTW60jxDDoIhQwMjUyuOlEx93xKEtH9zftI+6fq+u\ndO/T\r\n=rRm7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEE4gND5+ol/zbPUoKJ6pnmBYcrCvKc0UU2jJjZDGCZiAiAQSdfrWQUG2QocgvFvcp5eiGazRXFequrde/wRS3dkXw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.0da3ec97.0_1600726146432_0.6991732743795069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.a0793c96.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-icon-button":"0.19.0-canary.a0793c96.0","@material/mwc-ripple":"0.19.0-canary.a0793c96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HqNIlFMXmAHhHQFLMHjnjrxzaJWPnLDBcXZkXOlGB5TftfATTPj5qY7F4KVjb9E6uv1kXIH/s5jCaV9vz2bvJg==","shasum":"c0d56bfca8e67a19107ebd88cfc5a449bdf337b1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.a0793c96.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai67CRA9TVsSAnZWagAAm40P/0TzwG3luqmLB63A4brP\nm/gno38juvy0eVquyXumsssQUkH1YoOaHnEqvQ35hzH34DraZHSdIz0Ku57l\nWhyNOEEUr2BUHD8Wz2mCyrK4jSNAhLQroF964vUyNrwe3zzlu28UJXnfpxbi\n3dn/X2cLWU0B1JJyvOVNtHhxi1IWhbRQDuYPcE9l2ii4xKS/jJ8Z1zUSB0Nv\nX1TV2kSmn873BScEPl1apwbMLZmVx+BGSGGNTeTuIh1KI/3Cn9L5GsoQZipS\n1NVY8as7birekVvoWouxmdGXEJfoEw/tRxQlByv5qmabmgJrK0vAoNZ9Kmg/\ntDAyjGfQq+ZKsLNkMrts/iVJNTgRPPgwwJ4072vWke0TfFRkn5LhkK4bHC6R\nKPrH4CuWwhosh9jS7sC63gp/SnzVH4fmX8m+DDqwdjcFSSbQeP07+9sq+pg4\nxMIPpzzaaB791NH4ZITzEtQpHvfTd8ba5pgQJCVnTk7klJOCNvTqvie/gaTz\nFUE1C+WBby3BBE1bHJ5bJh0q/Q+gxwR7iM1wPefpLDriYY6z5pS7M+1DcOE0\nPGVWEQIuGGMiUzzqwRMCHDJcawTmpP+mEdsFL3uEdkfSlt0UxqUgtYTT6suQ\nBbz9/vcL3WKdfDnl+ThPp66Od9qRlupbRB3xYVwV2B7WWtBYoaRRO705m6v6\nOpTO\r\n=3F+2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbcsol5FP2lrXfSyueWekKLgGlRw606G64nBd2HqEsVAiAVTofvPRAN3Bi0Po2d3f85C9UGbtajnGy42CWHuzvHwg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.a0793c96.0_1600794299280_0.13368842472277453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.06998a3e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-icon-button":"0.19.0-canary.06998a3e.0","@material/mwc-ripple":"0.19.0-canary.06998a3e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/8gEyr1rL0FJaMQ8BVP2o/p+f5dgii7knl1HNIKKJgjKz4YfFwu8QYOMXE8Z0zkDqGcqc25ZLzT/iQbgCiNO9A==","shasum":"47a7aca1d5d106fc2c6b9fa4aa675165accfed97","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.06998a3e.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakHFCRA9TVsSAnZWagAA/OoQAKFEpxtmG4iUh9TOIrsV\n64hxex+TjhSZDlGl8RoFiLpMqTYR15JRMEz4lE3/+hONtX48NBp7Y+H+ezql\nA0ThPAdCBj3TVjy+VsLHhSH+gQAGSuHRNhiNvlwa0D5V64gqNvxLurYZHMpb\nVDZTIUXqTdzmj4yBwOznmmSKqbrODSH83EZPRATMYgFTQXZDskUsnYSckmoA\nt82rrSrWeRoqGIgOxMGVDhASYdxPaXNxvoHtQQ2CGz7ACUAa4pJX9uzPGVjQ\n0lN//Hze7nn4U4dd+pGJK43C1xm1LgOhIKvJacRB3so6DSr/6OL3MRrgwOtx\naDtkC2wV9FUuo2HXo0RP5RooWpEaREQ/kh/qa3sRiYABG4bqTRu2Ffdzk/GN\ngK+OnyA+68QknrG7Y4v94A4DwdsqnwwnX02o+P6roOoMOozXH3+RxbgqYS2c\nHH/Fg1nDEfzbMYHnQpfMZJ6GWfGyhWNox6UDtA5W8Jqkkyl6Lkw0KmMqfj/1\nzPb4xnZax74ZbIMNq96pZv5V8cHNlMMC/zmagtBRn6qYEAmldz5O52W40beZ\ndIFiCv8RgoPuBmppf7YttWHHGDMd10v1Ovfvp2rOybakYeKLNAgAxYCf/Ton\nQZjPLim4vPVU4ESDNewfT2oggW7PFSC6Mr8VUTUggPqHQlZyGEMCJy+ovbZr\nNqQ8\r\n=NTHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEi285f9LNqM5AqsWYgmq6vGiJFq/k0mdwndrqrehykgIgCkDbOMd/5YtR/6BHoKZ4R1RvuG9n+X7SEqEYOfy5lN8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.06998a3e.0_1600799173175_0.0706865455917145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.3484a90d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-icon-button":"0.19.0-canary.3484a90d.0","@material/mwc-ripple":"0.19.0-canary.3484a90d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-icon-button-ripple-opacity` | `0.12` | Opacity of the ripple on the icon button.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7jyuMnFfypjzIaADuvG2/Zknfm8nay60eB5gS3QTK5qB9p8o/EAo1WKGfj7lpWXW9PvsCAFmX8fCpH2CIUzHTQ==","shasum":"52f1f05e8e6b2c4d5309824c7dcb2ac7e7e9afe2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.3484a90d.0.tgz","fileCount":9,"unpackedSize":40165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTzCRA9TVsSAnZWagAAfAAP/0LJZWJ3INTQuQLV09IT\nETxFZg/nXQeZzOnTg2DMuU3wjXQXb93tFOm7cISB0a/1eTcvpf6mUB6tdqbt\naHQgZtXnZRjYea/bVuSbBCURTWg3knlQRTgumP0eefQusvk+RUwhBuJqjyos\ncMyY0py78w9NeQQVpg8h1Ei3lu6HSkdSCUb4AVCne8CjrV+83JeW9RaKEXKa\nURzSs1IsFTN0VTq8aDGK+4xqjfhCcznfMTUx3FyDYYgfw/lVDcSS6iDBdu+2\npUvrTExWkvEecknqysRwKHuc7opePjfBZ5SWYY7/hQclVScYsabGfgxoL/vG\n2i+rM7QcnGpTp18lI99nJ2czPLQEzx3JmBpWXYXDjlEer4WCPUn5uTKbbJl4\ncaxVmn5dKOZXFB6uGiGcMJsPL55bVbOQs6qbNpY+eF7huwLRiVLNYFvWoOei\nWvQqNwmLKOY3B5x+K4clDjADpeKRXuzYgJNaDPpbbK4V5MiwJG50zMVyzoFK\nWhADyFEiCmmr2hDV7B/bTwR7goPYrJr6kiBDJbr0INWRHNC3Oct7EjmfWD6F\n+HKDp7FpiPCVpBmOWWp5wWf68RamsIMRKRR35cXfahcqku32MwxgyWQm0hrA\nZMKhKm6mFCKkd0gW+Ko5LPkTqlyGwehGddusCif00iyWrqMcgdnhIQaBWUjp\nZ5J4\r\n=IScj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF42egGOMPZtJ9pnghsJzvFr19iKW8UHIo07Ul1eKlMgAiEAgJiTPRMZ9l9ZstbgPoOO4rt6JXUyxLHkZQdMXU0LBOc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.3484a90d.0_1600812274867_0.10422980340456323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.3f99af40.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-icon-button":"0.19.0-canary.3f99af40.0","@material/mwc-ripple":"0.19.0-canary.3f99af40.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GyNr+tOF7/XHJ+mNyOXnId1Q/xLRNfX9CWfog8egPowH+OvDQqoa0Uqpq6x2g8K0rMSZl+dIce70PgFMOtJKAQ==","shasum":"de684d45ae1acafd597cbb732358cacbb54ab94e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.3f99af40.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoVCRA9TVsSAnZWagAAk70P+wb1CsdNjI9NWchTZ/1t\niY3IT8m52I9D6jjaW84LwRdMefF6ZN8XmAiG7mKKSms7OCbgQjRZXNAM5j24\nbIKCcMZotl7nB7+Oe5L/1i4g97BKfGbX/fdsm5djC1RG+or+19cZSAOT8nsS\niuFVBmmwmuRB+mBCpzaDO3GgJI6SxagKPV6z4hnuXcnWvZO2AGzuxP0vdC6l\nPn/72IzgRBypEMFZPgs7Cr4fnU693PdLLgGKSPt5nLcLqY9+fzd0pp5hpaQH\n9zV361n1jeQe7rX7zYh3g36B/ktx/8eYFqIObPj7N1z89Z9JD0K62ecKBe+a\nQuzqOYs2Fxd7ncOwhA6PdC5MZCj8DfxdR+FjSGpxsYUVF1Tppd+7v6jLTmlJ\nP5cHoDucIrZedh+KXrjSj569DmKWAbn5RxZBk0GBo0fqNveyFJTz9c9eAvPf\nT5WkeXgUuwQKvVPZH3Sq2vVB8v42empSIeV0OvLSoWEwWu4WGKO3UkKB8+R2\nwSC2ZTkL+uHE9G6aFroruwgKMwBGhRouS6XSGCcy+iiEQg2xyh2yg5Du6uQu\nmUt3tEnhBg2MsUzJrM/CR6C9hXMaT8rlLZQWVJ2grlj9TFclkHsO1SvixA51\nxWMpIvxnNxIOzpnCB4ezwTfdDP6Hz5GuCIuenxQUZ9OxcUImA7AyDtKEVqna\n895y\r\n=PP2x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCJZJafhkiAHY5azsJQFcQaY7wgK5vmQIuqzZXX8dtSQIgaJjmTZgchnd2ieFe8SZ7iivnk+d2WTZNPTBVSYMLiK8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.3f99af40.0_1600989716589_0.024692442470985343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.72aa1129.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-icon-button":"0.19.0-canary.72aa1129.0","@material/mwc-ripple":"0.19.0-canary.72aa1129.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DGuyVb1Fm65tcZqGVKjrfowXTu9QHPVhRBlBkiRko8RcBEudZgqJhQ5s4ZaKwjNXy90sIT4exGTSej8vBAfsNA==","shasum":"c3bba0d5dd9bb68050be94d4fa76fffa7d1a4dad","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.72aa1129.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwoCRA9TVsSAnZWagAAIbwQAIqUtmciqalNGG6x7eK7\nmyh2y4guSK4diyKY6cPyZTlLBGmFwUPEOLkkjAlafwydM73Sb+FOu1bxsU+U\nW2P+wXxZ7b4C9OTRtSldtyLlSjZUA/5caWbuujsCUnz0cq6CPPy+Q7YlyxGK\nmVtMqRkEgt87y6XT6c9dQYrj9ZNnE8CgN1Au3vDwvycskLrTfF+nDSx5zhfl\nxCjlC4+Stc9+qG/oupT6/jhXPjT8jKaDC6FMvJlKfL9HGCg6FwZfCKqcphYX\nYtR7Vqmrp7lORfgyYklZ/F2Pb4bnRGeHgY0pS4L4RhW8gAit+o1TQEwcEqzS\nCpSVQ+DZWoVtpHzPtJ/8PN/Vouum2Vqc7LEfV9Stt0+Gk/vuWp2ig7HWYQf8\nNeO1kpuQpiWLcuPq0v8IO/JSxsvBlBaEHDph0AAxTpiZUGWX5Jw+3AhMWmLD\nxaztZ5361BZ97d82GNBp1uiFKqSszzsImGpfhtcO7fNt5qiwYWGcRDSOY9cH\nn3oPWL/MB+AalwG9uzBkQ3LQuPC+z9O3gJ1kxljBfLTOYJ17Gvbw3KZIaHWP\nR5eWEU18FchwpSK844t9WYBXA9+451fbf9CR4LNC2Al8uA8DISFCmc7mULt8\nLfZsqR9h0pXJGwiBwDyAARTSllMHDX4w8bpMTHur1uU2rLQ0xuZEQp3N0KP1\nZ+vw\r\n=pVv5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoytJ7FnaVDYUDq8SG5kkLWYw0rzHsEYAS2+dqTHoLyAiBLvonqICRGr86CY+LsIDfCQWfEbZ58rjC2hkxPK/hy5A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.72aa1129.0_1601068072067_0.20689723868627774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.394fd3f6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-icon-button":"0.19.0-canary.394fd3f6.0","@material/mwc-ripple":"0.19.0-canary.394fd3f6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GW1fh9TZKOoBmRI/JyJ70ykXNff8KYrcmQZds12H2Z4YfldwEya99eVYa0r0sqgmHqr/PF4b6OtMhRyVxjUt+w==","shasum":"b63c9f0963a2ea52f670692a0cf9ee4ec0cd694e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.394fd3f6.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9sCRA9TVsSAnZWagAAhZYP/2Nl48g3p3yWPYozHm4C\nh7y/7pBCRku3/hAIOABpkMtiLZTMYt7rJqJf2x90MDam/AxeveaCJmL2t2iy\nk7HkD1UnmhHK9F+cVBvw3nU7DWVkFEc5DbWRbUp9sGApCU7W1AvLRkI+IVSa\n0i8whczV3reTGFIrN3LZ5oTF49F8+YgpybxvhmP6MkVg0HZ8OaVpBoZ+9bgs\nm6/PQeZxGqexTh5SRaJ52Nci9L4llS/x9fFTNIhhynxX3TLVowwrhdReuqv4\nEfQA256D68S0HvNKnmTTDSqFhRtk9wOmjO4l4FhSDHG0vWkCuQT9OaaFVznj\nwsS4oZ+iGl5Jab5BvmI3YOpdkcBK0QESz7wWOeIDDbH7iUa8mHbK5i0hhqwD\nzeDGsk+10WMUKPp412hW9/+a0T1KMpqeeYlcihuoiYj/YA9PIaxiu/LcNa/Z\nUldZ7IBPK1eN/pZbjvoiAHp9vNocNLLcfl/xhpcuVcmouOGCUFq7s1DDRspG\nFWcFZVbsnRd40SVrMnylKnr3jjPHtHtCgIfhJvhWlbfFBTnt+gZzCfrsOr03\ndM3T9KAZLmNeBJVrjlghPsOL1+QojzIysyP2Bfss+t1LM9HQ7WWa7WyW/jxW\nH+D5eaNhYoBBpnozyvTQARZ70XUNgEgaTQOLdpAI5eldvkihFobTZCnAGrcK\nZ5Bl\r\n=nbQR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmV0yyZlqA++8Zd9lA9RvUAcOvsP1eNfge9Hvsm+HDcQIhAONDpiTxb5nlShq8V4VVvGA0JU9kyPLOWA59vjhCZOR9"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.394fd3f6.0_1601302380178_0.6778940434950065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.347110f1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-icon-button":"0.19.0-canary.347110f1.0","@material/mwc-ripple":"0.19.0-canary.347110f1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-yOZ7MC/vbt6U3sy+Ji7mVihNwdfzEqyYNLkPCfys4iyGcBcwKccKMrhegREYOhRmEhfIergwdSR6F51D4coyuA==","shasum":"38cc380d9cb60ff3efc98ecf422eba17070a06ed","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.347110f1.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRqCRA9TVsSAnZWagAAPZ8P/iHTl58ziAK8fn0+aM1q\n9+iGp3DlcxoKWKNQlqmFScYtdUaoN//z+NNDWuP2I4N9fgdQt28ySiZ/UG1j\ndpynD6eIH8/GZfjvBUqYG+vBm0aZ/am9nUOq1Qz+vfN7ApdHE1HTCywbfejq\n0v3nVGs4aBqFzEIP1OVlJ8F7lAZwsrof3MP44zhCjGEPT1HEglOjSGX/p93V\npbKmb8SCthwxBJDvU03O2ec0sM31XMBeOKEDiEwnsC7SDJXU/Wlksh2BkLpj\nTqotrejZ+1uBEAy0BNzvzcVqcOmJdxmSUXGUVWQLjlRlB+JAMCXpOV3wzctR\n9PE3pwkm5AsjV40chKY7wJ1S/lOIls+pV8Zjwhipn06zTnJUgS/rQYRc7IWC\njThZuhLhExzlg7QKK1dhbCOEqeL/4DG5hP9LaQVk6MCTfCxUIqEFiq6cHiQx\nQSZ1rr/ErNT34+UsThReTBZl+dxtJrHB6Z9uBjszLnzjata35dTG1mdZZ+TH\n7JEYOfMGmZC0k7R9/VVrpafJbtomD3PPM3aaCAs5jIUXWeONCkWPXMqKjX66\nIdhAzKsq9iqFHUDH9nCXKAfFtEsvIlG7ZD2EvGeu3rQAwdmLptWjp72Ry23Q\njrQNkssr6SQKl0iREcQY/UYjRxFLUci8ZUjaJX4VTRxw01ipsTLrxKIxXcav\nJlZh\r\n=0rF9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsPItbafc+zr+VmwpvtBwOcE1OsKSK7iVGN5xOrDZU9AiEAtmqqRSVAQXNkUnmPDrH6Dtm2kkFptAAHJCbYk/HBn0M="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.347110f1.0_1601311849900_0.3808110598294008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.5e330bb9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-icon-button":"0.19.0-canary.5e330bb9.0","@material/mwc-ripple":"0.19.0-canary.5e330bb9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-F8yLA0WtdH8i8e2V9qW1vbKWrD5G07gnSIEbtkRxpMcmjcFhiNozIlxEtpaHlZClrNdPP67bJiMRiBGkXG51TQ==","shasum":"b1e132d7a02ccac8f02b21dd8176981ce702b42a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.5e330bb9.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQBHCRA9TVsSAnZWagAArSEQAKST+RGc3NO5drMsC0Ok\nkr/3Urb2fm9lWPGrRbtIkhx9vWquSe22PGzWDaJEwTZ99cSM/m8fALPeJgbu\n2MSPZBE2+svrrgFHId5052yR5hfGpSsZosa3LDOijaRwnRi4DSBVla3VrplC\n7JE50Ln2npm9bqs6+d6Mnl1nEo3X02zrCovm2KHddmqLJCN6Pnr1YIFklbdF\nWWR0BWBqjXeEnpcp9UOCBXEgu6AxUNv2C7KPqT8GkAwF47cFiQ4LBNMSqil7\nks8TyZlRXsU472E3xuHEj8stXu6b/jVsPpVsXoggfhZHlWGexF0AbnZf7xlV\nr3qB1IFNiJwAyoRZNdFBl4CLf66BiQWacSGOaQY2OIn6YkTJ2z7M3LQKzpDM\nc+mA5Ap9qYmFOr+/9vr/luIOKuvNCanJnIgzhHYA44lGY0j2c+tzTiAVfWEL\nQNH7l1nQNnZZqJsN3n/Qw7mQ6orlXptXawyWj5Nu7B6wFQLgr1HXx3GPREAH\njebsAtoMBxemD9zUoXSaSMgyq/u2mQ/UA4PJRwHdm108jtmxDarYXRfZ84WV\n4S27szgrbRgPM3tC0e6NiLAGsKld2IqvKJ1szTvP01GysnI+LlD+rGL6Oz22\nLBieUfBxleqwR8tGXHoUVZTcW5/2xxcOsptXwoeX5TecNHebL8dbFJ8CiHld\n8KRB\r\n=oU3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERDPMEo75q/u3jv5WwG1qu4FiNRynD/f3udC3IsUrAsAiBcQa3cD/7qHiTY/OqbWDZvr9pPa6bT6JZezDhSzQNNYg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.5e330bb9.0_1601503302898_0.06915104219197943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-icon-button":"0.19.0-canary.30b9e3a9.0","@material/mwc-ripple":"0.19.0-canary.30b9e3a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HRo/IxluVdj036q/Y621GgyiaHVT4UbjPd4R8ZzPlfYIgTiMkuVhbwsN30ePr1d95ooS5sImIqURgczyKizd1g==","shasum":"fba33d1752b87e43bc879b080cd9e510ea01f216","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.30b9e3a9.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQj0CRA9TVsSAnZWagAA6rgP/2GBTUanV2y0KUxxsrrw\nDqNhj/yC0R+zzb45s8QMKsprqfbcUXwWzwc1dk3bPrBwUrr5DCf+Uh8QCY4v\nvtxaR1I5ts55SbLKd3lYLBOFzV+0NdyGjahub1pH8ZOIn/5g8gvu54ZXTcWT\nyAV4dGvE0cQPnofJo7eTLAAGSUd98XXNFjSjDaNWQ1rDQeQwVFkbtOAjI6a7\nTmEKeNz7Y2W4HJTfeN4QsvK/1dJh0L8r5ej+B97ez2hFWywOT74eEhVHZ3gU\n9wGu0C1d/up+iweWVE7yQr02fxdZrP2MVy797QYakI/UI4PC13kEKPYWNYFd\nEWF/iagEy8I5AtrL9q0yn64Kla4Xw12JFwtyevkkhAhu46zC+oKdp61UG+JH\npxl/x7PvGqhkx5EpXy4V7zpGPAk6dUE/EgpThzMmNB+KepppUqkuySW2dlRN\n0dBzuIjiAA8XSgbeCjvJgpCwyhl9qpTzGP+aN6gWuFyvK26daYShsYA92d9g\nf6Hj4Z0c471mRPbZV4Ql6wDREXyj2Zh6uAP0DFqJI9xMrNaGk6QCBByPrIFc\nqd+k2kkK3uiUS9pPaUi89znaHrddsOIhzUGqn5mBdYB1p6HupY9eP/TkZY8D\n+L0etKcOjgHm72BoE31bPoUdT1h2s/3g0XXzLC+sv5qli2BWZwfAObMRssbE\nxU+3\r\n=Teu3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMyX/EnLCbERob30ka8m/VrHpKtNlAxIDztnKiiXs7NwIhAOpYjfm02izYktocfdgW/5CBdEy+flyYJcvRQnCMltx5"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.30b9e3a9.0_1601505523571_0.5869046252661052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-icon-button":"0.19.0-canary.7bb04b9a.0","@material/mwc-ripple":"0.19.0-canary.7bb04b9a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JZ898GyC+nZyHZAVKECLeY/kHraxF+9m6ZlMkKcA9pyG3GQUZgwOr0mclm5g0BcftcAfmz440UBOih2xIP+Xbw==","shasum":"2b3acdfbcf1879a201029d0c189fee51c079270d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.7bb04b9a.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmT3CRA9TVsSAnZWagAAgwgP/0RI0Um8R4lVDuKbpWeF\n9ksH1/OP7ypJTtj+aIg2t5Y15p8hc41s9UOaQjDY9B8LTO/uB4GqxpFB431B\n69nGHh4vagAmVga7RXxeIiBThVNt0XpKoDsVbhl225DEwIglSVe5d7Zq4uYo\nsTTcw+Ca4hutJr4h9TgTuWicW9bjCV0v4sx3tjfX88uh8OtNkwJYne+or+4x\nCi628o4gOsmm6dRp8HeheH4RqKilHhM2ElX750O8du5vlLVx+CrUNw/efv04\nJIBpl0akjnr8L+DBhvpK4AvNtnRs89PGUwBpwIY7xdrqNsalraVueK9sks1D\nT7FST/GNeNaH2+xwzYFAmFrqBQtpWiw/IeJxyfSVLuYMgcN7wPeE1ZdVM3B9\n5NMI5Gwskq5rF1f/uxFwJ0JUwtVxhoyh/QL+i0UK2tj3U5d9D8iL+lAMmcen\nv4cLdMCliN8QbEubNvgMGU82Sj3oMnF8MuvFtaDcaBEkagDwh7J2MeuzrkoJ\nhbjByjF+CBLb19mRgBlUW4wZuwJbkIi4VtMcDnKUmN+U45+yUstb0pmPj/7d\nV1kNkRKvChN9+BlN66qblvchPgTtehgaHxTX0cpgikFAdNbjd0FaOu1RbXGS\nTG/04kDO+KV4gulGQCadFzQOMnQMpZkViCA6Vcsgt0035qvU+8PQP8dKwYU8\nHhH2\r\n=6NQN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrhgKOayDCsl1r+H2Z3JsWfbfKNsWQSXRdupjXzKrFXQIhAIYQSwE47WRwW6GbIjABxatzLelEmBVlEUlS4eIMPN7T"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.7bb04b9a.0_1601594615257_0.30463331888654177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.615d861d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-icon-button":"0.19.0-canary.615d861d.0","@material/mwc-ripple":"0.19.0-canary.615d861d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ZUe6fIGC5g2yRk9QHfW31MSIAXiS5gtB5DCKWUH3aH1VfOTMPYj1aYjgsz40Ty9AswcLK1WicIaTI1KPcaLW2A==","shasum":"d58ebdffbbbf7b626675309908c80d19ead33f75","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.615d861d.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoOACRA9TVsSAnZWagAAN9QP/jk4TG3jAF6qQ5fIvDd4\noFRxAn+WBdTMlw21lMegeQxxSIgTPaTtMU/FnXGG/ek89uhk8Lq3CwKmr3xe\nTTgw8Ul4DilQJLc3fgGFk26N+Kb3VQJA1fkF0emT5D8H536TyYwATB7PdMDT\nWy0NiR/3jDnq67Waq27t4iHs6FkRUR0Gnwyz2AOwawPA1Rg7khjMmf8THp4V\nmTrv4toluBF+x06O99lK/QtHGiaZPnox4vWTh3evnCUP2mC/2Bk8IHCux7HG\ng32uMSXYaJD++ZsvbmyswLPzqM30zH0CnDjOnyiAm0k04KoEnpNQivEvva5z\nEaM20WFPsdteEt/f2G6vijee7gHjbHdd1TME81uHEw4RtlPTqXUpFrtDmwXt\nbX5MkVz01/wgZQwMvQSIn+Cmr4ncjOXh+cs3mqN9JtkyMjVmOwsKKnzbkJVX\nUCab25Is2T5PEypol4M8cggXsUhvurhMqq8J9fhjMywOh9sPe/xVDbV9sYmM\n6rSNVzXKFVXkVwyzjyyI55boEECMDN1uyMPxWTvMkOcsgj65kLYoIYFe0WaR\nIWDfD8Co8baFrbqVYNvkDpYekC2EWWy0SY3cintK2pIqb+ZLPxx8WA6iYG2Y\nuoVHIjYLRcotafgipS0wqfhLC48UGog83TfaKK7GGq1jwP5fG8R+sE64zueT\nsgYm\r\n=FQmz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCvfW217YSdkrSUnoNLjrbZJWYIg9Oc6Hg05hxXG0wcAiEAmgt6UVE6bOe+FA95wfy5hSqqj6HnhEw/ROB1m4LmTv0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.615d861d.0_1601602432061_0.35967957653705995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.af110e86.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-icon-button":"0.19.0-canary.af110e86.0","@material/mwc-ripple":"0.19.0-canary.af110e86.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-neQ2lG3U3cEE6VUMqypKc8H6vvNmZKrXjrINkToTkAPTrxke94iuAfMAkI4qnVB7MY8Vx7Vv+aYrCbwGn//Yng==","shasum":"8a817d4c0fadd02e5126ba1eba06c07097309ed7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.af110e86.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7zBCRA9TVsSAnZWagAAbgUP/2enT23BId3mf1ys6z01\nuMrnivIq0baJTsXkgibCGDaa3YiHsvJU9dWsK0GBJ/+wTe3hi6Y+ujhsCVfU\nTn1KEnteT46m/0L3UgP2nqvqy5qSkPPakQ+pb91kREVLfv3W3Uo2fFJz1MZB\nyaWQ7olvMX4OGoHoz/m50EY6Z7iGSPNy/tbGqsEKihwhC4BmaGlQLpwu41FJ\nC32wVw3q1L5iVh6lkInRn4hsjYRG9I8OVOlJpENYchB8s2/75H1cBUZw60aW\noGQPEOPEIRzScpG+/ErbiM0V0l3OUMQPX2qGxxR8xbX2hJiYxuhFq9J4dglY\nAWKUDknU14ijD3morj6bjJx5xpEkLeziCV0U7/uRHZoYqq/UiprnQwQsm91T\nOiWS8FrMaS0U7NjiiTeYphIYa+g+iGaFAOZ2zjDTVhWfvUWt6MERjWSys//U\nNj9LUmi83QSPKqXBmbvNBMMkW8WewGNJa1MZ72mvsviG4g+Y43ujCzCjlneF\nCx03bfSRTc3rOaV6csEg0sqrheUfVzUHl62tYZX4BqSp0x32fuE0H12WT+Lt\n83iU3in39KVEiBcjze2PFaOWh55C/mTM1+PLEtF1JWi4Hoduo2ifXCz0hYuJ\nWwmKYllMgNTxkyL01VGmcIei5FTZH5YHORm9jmEn9WbYNreT1eyUX9ZDHuyj\nNYHo\r\n=gWRC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChKWePpa0kx+xQbDG1juixp6mL36TJtr1YIqgMXoegzgIhAJ/dhJT32fiqKIwPeZyIv4nVkqmUDEdLdNFzcuBVrMCo"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.af110e86.0_1601682624685_0.8118468917822763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.89d27ca5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-icon-button":"0.19.0-canary.89d27ca5.0","@material/mwc-ripple":"0.19.0-canary.89d27ca5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3I/g7BuuFMTnjucbsFYdd8bgv8Lnf7JTVykahwl3HlxuGsJ5AO8Fba5iwhfA5Kf5MNNkcw8kodqyRaNSK5u/Jw==","shasum":"4295a96c803bc8cb64dcc692cf6a86db7c4a4b25","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.89d27ca5.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8gECRA9TVsSAnZWagAAq2EP/0P0DbSNCaOaSJL9KF37\nXuKMdLYQbtow1nUhO4kn+bSsJxaAZNvV+cq2CkjZkegX+cMsLAlhbDlo8Gjn\ncxEXMg1N49vnGBizjGoJF10AT8MN7vjUbjzOgSaP44LTmiQ6w/cFbH+kJTFm\nLgiGeMRPGz+0UpbIdJkOeBJ5wJYAFy+uFyOelB+wCKiV/xipFPY2smqgJQPj\npmDbPdcFISYwF3+a+0F8qe87awWigVsCEPDzR7n+xXNUDtNUo3rG1Z0GrLLR\nhCp02lMgB7ATIHtiGRwo/Kn/1NHaQU3VMyxXKQaqTNqRYJUbIvfCAVq0DNxx\nW1iLVfauIqBd0kF9THnLhm/WOMm0qRes5netZpxHH7EQ/FHiCxoIVaIDha04\nbpHDCmGG9yPooeyW0YCemtZV+u/fMz0cAZU2mzjEVfJmZMcJCJ79nWLFFESp\np7tAgygD8DuAAZZ63cPDcWXxqGypqQURd0mjljQZvzunI2sUFhp3E1o0CRE2\nXJZX4qqJr3TEvYjacIEHVvV64x33BJy85qwZT3/eyyoZ80XFbo7HkV1g7kW3\nMfmLxqmHaqms0wEjTioRUlIXHRplPAOGosrRXB7dSJrdfJesiJY4fdykPyxE\nmtNOjFfKCe/i4jml8tcdKYLDc3t+qr5Iz4VNMiaSg88FPSCTKSkixTb1e8lm\nJLcs\r\n=CExr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt3MNOHkDtk7eaD6stbsjZViLFpuJPKmeWfx8K3uH55AIhALYvN8J4uRzihzWuQ5aDRQH9BQdR7bc7/EFmpMeQOyem"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.89d27ca5.0_1601947652292_0.31307576631553835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-icon-button":"0.19.0-canary.9ef2e7c2.0","@material/mwc-ripple":"0.19.0-canary.9ef2e7c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-PiRSbhb7H5OkiCYk/LQZJz9tCnwOmhSpmuz0KIjo5fagabtY2/A2vHToUgIw3d4ab0sqJ4B7TiwlZ9FyuLr+Jg==","shasum":"121e6d5967e4c2f72496bdd04779106c9a73a0e6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQh7CRA9TVsSAnZWagAApSUP/isxVbE7vN8qHP/Wt63Y\nVx9Fg0/LTG2xlt51RQvTOsYLWRVWGrtZWfyi2rcg1PQ0Ig160dmgWBIru/OW\npBglUQ2bp8qUUcHK5iZK+r+lsX9F/5TipUhKzJrMpjWWI2SCUcfJEb4r89e0\nGZeseDa/R9LFBYoZXwkJr/J5WZms9bV2E1e8Pd2672k30HBFP79BjJFWhnyv\nclkD2+La4Bgnp/ktjsldEikVkmIbX7HZlUmDQRwYJuFFant45HOx0VJi0Bqb\npaK1hryrk5NRGMsQ7VgFGia3/gGhZn/7E/PTy+mvl2Abauo7dWAoT2/ChAkW\nikWaM2EXCyHjKce/ayChMlVkqS3WPQErfNh26x066GAxoOjNrfKId6lk97W/\nvZkH1unsZ22xpljatfScKb0gRpU5FyWssZ/UMwk1RgM3sHoQooNfSOeUMpKH\nmlB37MtvdUZZF6IvNbdKyK9kKuSuFeyUhwjs8chHsxAs8YW9oolIYggDL0l6\nG1ft2NJicursf0NvIdQW15UNx5nhH6/IzQJ7MohRoCuLpm1WJ2jBKrWEcl6d\n8X6s4qej4icKSjPBOQynBU/oBfNwj88IortDaw/3gMCfZWoJz939E9QQK1lH\nysZwIpoJWE7nC54L1+SWBXaCx4as+PDRi5Eewx+zFYgoAq7Q/FtE24YsTpQN\nn/KX\r\n=l0/z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIF2bTC4Zvcs4qJakV3P8HlWCaYp3JUTaBOQCDDNU7IAiBJ5Y+3BfenOC0Y18E+ytEdXloCxrhN8pUq1v/kZesfQQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.9ef2e7c2.0_1602029691423_0.4112497221371596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-icon-button":"0.19.0-canary.96c8bdc1.0","@material/mwc-ripple":"0.19.0-canary.96c8bdc1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-VpP+FKTe+r4ibQ9zfCqRkZosWp758Lre+Pwt+I58OhRBcinyhxHqMQfcI+YOZcBuPrcHsRsmtbu82/TM9G2QbA==","shasum":"c7e189b877f6a1a3db5bd7607b7bd7457054879a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0-canary.96c8bdc1.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAsCRA9TVsSAnZWagAAcggP/0BTaufJ3NR0gHBRcru0\nXhsiPG2PcnpbffNoNI+2lU52gqv3nWPa30K9JOcDNbhlnEdmKCjeYBiCvuQD\nw2T6gf/lA3yBuna8KpeC7Zt7KjOy9sdtInUUqty+0FYd9FWr3AUP0qisjwMm\nsVkm0SEay/Gu6MoLWBsvarLwwIRqMbqBByTp7gIjS7O9gUHyrMUI0XtxhMO/\nxBiTKy8l8tgB7wASAuQLGA1lK3RrgMFw7AB5c8C1k4p83n5jp+itmCt6HJcA\nldGHzb418YTMiVpEtq3RZQ6y6S9TxioDINx1YBxt7rpL4H0sKJ5JxnWhEyL7\nKXnBFCv5b5z6UJ496AZ2VOyR1bY2wme7oX6SKvi6b7fKEioeAIHkPxmSKBAD\nK5ZzXeKVYQrmgX4W+2iRUxrE5PcMVLcwMzaYDP1vwPpt/i3I9Uly01mTHlDQ\n37tvv7CTAXwe49B9xcVRwFCIGNg2tStwHPGu2y97NRGV4gVMGp3dcdq1NorW\nYefAVqzdeZnrB1UKct60C71YCDxcMT6/6FH/7r/DXkiMdGs8Z7KnZbOve6QC\nIdsa7kymoMgkx7XUEDV2kGxztToMMTxgsTaeF5BK0sbZ6AgzBOnfn/TepjrP\niSc8//He2sf+9Tb3wxHp7HHymu2V8gfiVDQHS/6I/ntNt8dB+cxwDxGeHQi4\nV/Oh\r\n=cm5O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsHiRnTOd5yn0V5nwITNf2jKKEzhMMQmW7i78Lzmm07QIhAKBYitP4MbLcmMEdvrCfGRkDLo1Aw6PLDxierTfwa1f4"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0-canary.96c8bdc1.0_1602101291862_0.9291978778029255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.6c21f034.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-icon-button":"0.20.0-canary.6c21f034.0","@material/mwc-ripple":"0.20.0-canary.6c21f034.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4JDeXRvjak45APYufNVTBw1hdopckCKKvzORSq8ugyHgCQbMFqFLee411OBsco7fq/HBAMYZj/4syEJTsvAI0Q==","shasum":"10975b0133a5870d29ab3fdf9bad3d949cc0698e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.6c21f034.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGhCRA9TVsSAnZWagAAlZYP/jdw7nPZWHWX2ZJLk+GE\ncIu0yMd+Fz9cTL4M8OKWaWUBUiQalReEAFrlGG9qFuDDsI5BSVf5z1FmpAAY\nHWQoxHuV7kEFMVWs5RgnS2MxLxiN2dRs7mmRNryoZ4mKfqJqVFo5PmtS2EXQ\nFa/ShDm1D3QZ0Xqu1O91Q7EbbrJlU9ewGSeXP+m87vsDoWLXOS1eP7d0/CKw\n7kq10J/H740Hw4woj4InSafBRjJXDvh1ispLlJoSK0Hfr8Pacm9tfBZVgo+Y\nJ4nDhY++jE0djJ7rWSzbv+FcHpX4Y6pO91W7KexENhNNZNk3jo0uRUVbO53s\nmsL+6HJZw1EIa92t2VqxmRae0zR662c7l2YNokGAi5bo58G/qPlV+RtYv7u6\n7WW1PBfI3mM2U2GE/DiXeUElrw/unH9UM2r2k4WFi31p524WRKY0ohgs0phy\nf1R8i+N+n3Y0GvVGBhlUZj9xeNR9kTezRgmnLEasKlPr/p0bXCNRNPf57FFC\nKX2dGxB0vcBtk+anFU9WFvSGIsoQ7k/sE/WGf4YRROOd//q7+GCz36A/SSA4\njcfFh786xqhUr+X9aQpFlusomwCndWblBNC2pEZL7vdD8+gxAFZQn3YI3XXU\nuOKIdwvqlpiQr8nSnAZiJ3ByfCdxaDPB1kk5NHeZThjbTkjjiUDiULtR4FTP\n3NUL\r\n=YvG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZyouqJvEd1KPc3MkubTeuCLDth3L+pndXrwLl0lfhrAIgS7OOeFqn3srpX/6VY8QPEDgqqn5vvw3Lc8ngPBq8Es8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.6c21f034.0_1602109857254_0.9950925731315359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-icon-button-toggle","version":"0.19.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/mwc-icon-button":"^0.19.0","@material/mwc-ripple":"^0.19.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-z8uM8xksVpeDu8LogEbXrXqnt7aN0PKzCBhYArirKHBKJVboM9VjkIRiicCn4dVChGl92oJOcjQOrFGiyqItzg==","shasum":"87dd129848960d9c751a91d7ae129ffd54de2e43","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.0.tgz","fileCount":9,"unpackedSize":40102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkJBCRA9TVsSAnZWagAAQg8QAJHLIPzNf6R+B6bBdjvG\njPkzWBp+UI93Z3r564+j9l/MyeLe24Jv6+Jzd0zXlkmz85C6lXEhZtilTS0r\nT13D8yVbwn7myzMxdBnl3d+g5f4U8DuvqbT+vNkHKWDOaHy5qoAHHBNQfNvk\nJhz/j6ZO8I4lfT7Rb/RMP4h1TYeKDAz6aaWrG+fpfHJgcAAxdzIUiZVwwLyl\nV6taoBtMzfXHatSReD+sCDJmaAE1s/xdftqiKUn17cEHoA9FcfPea+kZnUZt\ndNvAuAVHfUlYqoSQL4oveoe3+HzaOL03/ksqjy3OyzBb6hI36kTk6+pvJxC2\nTBVRfLfblRC82G0EYW5vNQthvQkT6xn3ImS+jO6zJTOdkfwlYtf/G5oO925d\nvMPJvflZVIKvrshIcEb0czJC9Buz1PjIRqdrNwW/lipcMwa5K4pUpYsnHovk\nzWoE2ylrVzBPsVxewA1gdvESISYcyp9NTE+hRoiCbvkJeZmCmHkBfirEh0va\nI4G3c7tSDK8jP9/l6Imvpu9Z/ACHWQtKCEgBCyg29GtZpx2n5o7zagGt3LiW\nQSgUqnCsYwPYUqdAroadyipUH2/0l8z1/0+zIyOB/kqTkbwxxv573gjJKCh7\nImFtEP+f5WzaB08Zjn2x+lqEMK946OqM8X2A0B/lCnsXi+2bSQIFeMSODz+k\nfEg7\r\n=p0QS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCAo4EnnDSx1hBzUV5cO1t2k4r7zCzVfH4lO4DnhoUQQIhAOiZIkij2VGBZORZG712p3A5mjMlyo9IvEVF9OUMG3/9"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.0_1602110017170_0.3750802321171498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.1f026aaa.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-icon-button":"0.20.0-canary.1f026aaa.0","@material/mwc-ripple":"0.20.0-canary.1f026aaa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-BzfJiAebsAtraekp9EwtlcElAtb/LWAtBhxHU+Eq1UMPs44uLqo39bFYoyIEewGKAsl5f0BA13dlln9PUGRKFA==","shasum":"069c5eb78149ffe26ff3be60b82d37b671e46a75","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.1f026aaa.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iRCRA9TVsSAnZWagAAascP/1p2356KO3PdXPAM9w0G\nHlNSr13gYtG7UmI8gkxddVdfK/Qh/ZRvyRKiG3I1DEcGdzZctrGCmO79HxkW\ny10UnDEUjoxZK7RlHYvDZK5lhei3EFsB/9gnXksbA584vfGGS/MNl5w+jxwK\nzopjYkAynzDN4zRqYfZy4Xq/wU8Kl7jwg6kU7F9HxU3Z3oghTqFiedt+/B4t\nIsg691wBSouIRaSw+jnR9DeGMyYrXXbxJ7fvIBbAtzzqNgkP+9vizWi3MLfK\n47TddnskhEvmgcN/QyMcVPO5/S20n8007MsjIRZiyuBaHlxgD6lZgKKKiEqc\n3/9Ri8wlNU1B0Cy0lkI9o6EdHVZTOz2meQ00WAuugdxo0oP0MUNb4LMZPIaV\nq62JWMERaWBA/O/sBV7yK4sjXQtwNxBhAyx7Fow0gxFkaVU9HcXP9RGNURqB\nMFjbCuEux9nsRLYq9tQMNbrKAFVlrCYDlUfiYI6PAO2rRUmGwQaVl6s0YaE0\nDDNyHkqroxkLQEkL6LYbfJSYu6lv+oWWCLDFcTRb4/f8yxOINAd8fnDcTZtM\nkD0lh37LJxnbD6U+tCl8IsUoBpimLvKOI5A8kcJXShIQs/mxyzh4L2boTVPe\nL5Ie86r+qxto+/gUh+MROJvkxIqPHvvwjQYYneCoM5YGnynUtFt1EZ5r0vj1\nGAhT\r\n=f7yP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy372a5/SLkJcSshKmvhG1FR8hxqaiLvEDyGRN07aB1QIgMRkNkaLJFx0tkdUvt7nf65Bv+kxo3QoANQoUVa1RdYo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.1f026aaa.0_1602197649555_0.4068939078211429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-icon-button-toggle","version":"0.19.1","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/mwc-icon-button":"^0.19.1","@material/mwc-ripple":"^0.19.1","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-E8lHGDtaPSVhuc4+SX3B/k61G9mUoX8f2cp9SCcYmoclkZS0jZpeCoTdpq2lfbh+oqQwxyhS8cB4y6UpSz9ing==","shasum":"89e2132fc7513ab05e915f9847956c62fba1a9cd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.1.tgz","fileCount":9,"unpackedSize":40102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tbCRA9TVsSAnZWagAA2OIQAJF+L4iWTXRSM9XkvJ6s\n/yulZzqif2TNsQAX6any/ZiTPTPdovVJq3w+CqZaZWVtmz3EVrQPtFBHBa+C\n1CFIedRsybseN8ONPJWWA8pWF++ayZHOZu4gO8duAGxoB71pbEgja9VN/0sz\ntDYka/5cuDUJKOGDOP+Ow7rBDdkuqCEuEdmacZQ71A364+VY6v/S/P5e7WDd\nO4CpMF7uudyxMBBeUwi5yWyKGCdRSLkb+GdWr6PjVByff49G8KIhgR5qNAGo\nFlXkG3UtkgAQcrOdAJ4vjybIWnkxpsMOKctGGxJOoFscsBX5pOi2x8JRqFdO\nU3lZ79JjzgNuoGKzYiGlgBDQvXCb7+62VTBlPD8D3PYEx5L/Ry2Hl+wO9Iuf\njsRw7wA3D4JOWjqNRoRNwhMa39f1HKbVqEeE+oJv+vxntCaXUEWnn3eqSfXd\nnbKcqv6E5lX9DTBQ2nrG2n2poWQ/0ErJJuf3t/41Tyd4BNOqtkCn5fzi5PO4\n0OKi2AJSLB3CfvOyktwFXqduIgWmcU+VgtC+GAEQbMh5lvaGvNPNrt7BqSLa\nWr2qpuqzywBi2wokcVx71bo+D5ehjnGa5vcsyUpgovNG/cVrg0TIqbTlQido\n/t8oNcVeZroVO0NfB6qTGeOOOFlrb7lu3NB52ERNrhe74tJuqtjkTHlf7JRG\n8THn\r\n=GkRu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOiu5o9JpBFg0IrEkgOuARkVX2LScsx+h1el0T1yezFgIhANlfDKNTv/EsWmhMA15EQ/XPUKyS2L/D30758kuDAH/s"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.19.1_1602198362642_0.2521767052509758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.5f6894b1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-icon-button":"0.20.0-canary.5f6894b1.0","@material/mwc-ripple":"0.20.0-canary.5f6894b1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nQ3ASWF9eSN2/VRDNhx0dyC9M1CJA+QC57gCoDNOX5C+tnhv3Cv0u9A/iSrV0OPmnGAc9VQubWKVDpTm/jxXig==","shasum":"afa3bf3ae090307916463f6d0812911958acdaa2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.5f6894b1.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5u/CRA9TVsSAnZWagAAQQ0P/2g8Rx4z3ItELFpFwPIK\nTOVVZ1Lbl0BYroyEEc/cuXGd3gyNGTU9sCNOCRkxodEM6rYlzpIa7amU+uxo\n/j2l+UBXqMrqnWEv6XApxDKpRJBxA9Ck44gBoE8bksKlPb9vUAGSFxGnKEW4\np/T0gPYxmJLm2cj9cUx+1L9c9ohtRCSDRfUIJ5h7Oj+0RV1Kss+xFuAHsaTp\nYiRkDS9MNegjXAFMzXI01Dc3QY4mTCvHRbalu8nOhgjiQ3rweokFlzzGQmS7\n1hAMh6XKfUka2GSHKP2C03iWJxmSRasiCroOzyWi6EU8DPNHAO2NKgLoNo1+\nSlLznB1gCNQgRjmT2to21eZTwd1jJWu9m/4rfY6+qCKFtHPAaJ53iABTz+o7\nhzX28Si3UKaTG8Lxu0qb3nwz1spor4KfIWr5xDjHMYAwEPYfIrs75RBgoFpT\nTAqBNq08ngoZPesq4NnqrYXbjpoS67Wk2LB3nJ8SFr3g8DHRjl384Rvdq68U\nykgLLlMDwC8b4p7gMUsLUXLxvSp94qBI5n6XbvNbAhPWZeo+Jl2d83uAYl0k\nOI51jwPJG5JXkBdlEpndGSGCud+6G+nAR97SYgATTJOEf7rqoh4CmBI3SOZX\nwyOuOqpMIUD0aHP8ZMq43FdO8lkRs1viD/p1cF+EWxteTuLcksCUYmEeo3Dm\nnCBK\r\n=Q9N6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcZonjbWTCUWVfvcYfKVElNDFlYtdJzO3PC0B94R1KrAIhAP/Z/Ishd6q+7ANxlwPCu/+bVRYt5ynRahAL3Fcce5Bc"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.5f6894b1.0_1602198463001_0.9293252874316293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.f6260d06.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-icon-button":"0.20.0-canary.f6260d06.0","@material/mwc-ripple":"0.20.0-canary.f6260d06.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-SuDqQLUlKlaoliulFQM9Lee+r7zE5fLR//BjTlOg6VgYOfGdKNEOUcmbIwxiyG+2awofuwE4hcgGWXwVOzxuhQ==","shasum":"47ceabad04c22f9657c8004667fd9d99d5e1e024","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.f6260d06.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNoECRA9TVsSAnZWagAAEssP/0tgEoG+Ws/SzXKDESJy\nc+pzyUXRmURM3h6LDetxJuyRkytpVJm8ZVWNyFkYb2HhRF3U/p6gJLxGkexd\nRLYgfku06dWPIb58+3t5uL+lAiu2HilAzoWdbK8oTGYzNiJd20KYISOvc0ys\nKKojCmHtQsi5dlVYqj5PV1ghPUpXebIo+g3gupOj9sIUrrm+MlsHDrkmQ8kO\n4HR8C/lF2edrPeHjwqaU1tKn6Mp+WVOUr14f/UMIr/RqjlgEuEm2zvWAIQF0\noZXpRQIujRdVGaVgCxvr2L2KV19uyO5VaeImza5oj5yBKhUs4AzT4snxQwNd\nkuFIucmqu/1jtaJyYyfrWF6qxYK9ztEQ9OmbntWV9u5gyskWSp+Eg2OWyFg3\nigQJP1VqWqZ5psLnRsVzkwHEyUb+lkQZezROmuLkiDNi5W/yEytMk4fJwNKU\nA17nl7u/rxS994f8tLv4ezonHVUVeAZui+Sk8WDFRn9xw13yPvfVinDQeFgF\nG0UsNyJe1UNUT7bRNyKyWbiZMOM1bFOJWWmku5bJP/ChN/22YxvUmlPfwAdX\ntONSl1Y6KDODyDvCywV0GIFypo793U5avdvmAuEigZr/v4I4sIl0gzXzp5L+\nYLVkUBvrea2B5P3PX2s4Zayc401p6MOeNxEucoSV2FwWko4cy7u7/7tyhHiX\nTdcB\r\n=yarW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBY5mUSk2z1we85l9CalRYeLHtQaJ7hXlA/441LNU/mbAiEA+DUeo2yM9j1cYBHCrG/ukElK14Su1TKXldbslGZBC9E="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.f6260d06.0_1602542084472_0.5679827731943021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-icon-button":"0.20.0-canary.2d1b08aa.0","@material/mwc-ripple":"0.20.0-canary.2d1b08aa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-C9ZMua/tgAP8rbjupAvmGGNxU4WMSAIJ00k487zuKGAZXALZCuPCTU5QjWu2lm9BW/XpnLBJGnN1JvYq4oNXxA==","shasum":"7adc777741b661c7cab7fe6bf638ca62e570bb6f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.2d1b08aa.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf6DCRA9TVsSAnZWagAAupsQAJtUpgN5XF/p6rzuJIQE\nxHo55ml5CgxcS/epikEMYTRtF+AeOJlWpPDTI3jTfLu6KVUX5hnpCWeRnFLW\naOmDhDZzkxkob37ly74rL0kEA2DVobN/3Rcff2ODIY3QiIZ6wcpvhc2c5eTV\nIqH+MKS1z8X2cCxYFQtYtJGZWM40N5wckjrk5W/UIwcQsr20KhwJafto0Cxr\nRN6ASmnzoNGoiOBFuE+7mOdJMZfbtnfwcLNt06HwEOD6f/SYT0ITx+1fTjhV\nMw9IGEbgWcp/WeGBD4W9rDONhgYOoi6Jji8zbfrY5+NIXymfIXZDYZe+kM8J\ndUp8RXrO6ORneUs4Yje2PXNxERHMp7rOcdau1DECJwtsDWAaENk1Ax5TAOqz\nu0bmhOQN9LbvrP17X+CAbwR7gkDLmLQxoOJ+dIz7Kyu4V77q0wA7aX0XdHnb\nKHPgGDSnVlH01x5zdf03iGt+raE1DgYbdA+a21BoXDTGKVYM0PaBp9SqQkqr\nIFvX8WsRdg0Tuir/xE/CmdrMBM5E71sJ24zBpuUh9lZX/0zNV1QjazEShxKu\nfzuIXUitemJnPCur7KizDLAY1yNrGkcRsKvthViFN7IExeryGbotsiQjbdSV\npMXQS344nw3/VnlWNl4jJGpK1MhoX23TxpkPdDNihMdrE8uxMBzgOxUzph9R\n+09i\r\n=ueYz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWwtrwbbaiC7PxLZcyBMkIIcW/e5/nrnZgGzj5xKRA9AiA3Q/ENBB/1snB32DjujaVlh238AfE9+S6k/N9seBxywg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.2d1b08aa.0_1602616962865_0.18666596264823965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.5bd58844.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-icon-button":"0.20.0-canary.5bd58844.0","@material/mwc-ripple":"0.20.0-canary.5bd58844.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/wT+HJRdmW1pEPkLTcCnPAo1DkoLozzI0Gi2hcLhG9DfJmKHv386vdPpvgPGbs8/UmijsAlb6fExNyeqQtTaCg==","shasum":"c509a36d519607e9792ddcd5f28d73b42bfbe1f3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.5bd58844.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxmCRA9TVsSAnZWagAAIBoP/RdwA8wdxP5wYox9+BP3\ntGa7fzKpd791waRhJ4To+K/6oiwBXesB/xj8guXSrYVCn+y3oJizNWgp4s0x\nFdURICYNd5tyza/pXRUJdW61SvsZffprzfi9n/Vpr+RJhL1OV1bk8MXAYUtF\nph74fGUEdbJNEKtDEaJ/+QxMLWBil+QMey+7tQeiU5yyvu6IM1oSSFthM2S/\nAOpXpE3qC8X+88CwmRGCVTbY/KG1Y+FKuG0hAy06ZGkJYAECh73DuzYLocNh\n3zygGiZY3zqbqjsWyo1SbVFxwR3Zpl5+WnkEM4HS6/uw8ncqLYtnGHVXjjQ8\nUhC3tZvivQuywrBggv8o9f1LZbUfrT4aYm6L6C1T+/p9JZ0kbOqpCiJMuyFf\n/l+M0SqjPunVV6/tALiowS34ZTtpz8WWFOOba9je15dYUDSyw0Bqmxrl/0UA\nFsRIZ+X2tydqSmvsgfJGt+ZNLeKe+mPUM6y8DAIMvX+KFFGLDea+/GoQpKLg\nxuFqqfIuBInI+penvwSGTaxFI4aVdxKZCVBstjlt0v+qwXGu+YqN+W3qXVXh\namTxgowEHGxuAo4pl8hoeYXXVz0JsBaeQQkL8XRP6NpiCCia8V1tA4fNPGg6\nwlH1RP19Jd+VpwhPd2Gqsc0MtvQa6Ke8qxgej3CvsibhEWeVBJX/8N4M/gMg\nV6YO\r\n=CwZW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHFbHoLWeejMgT6PKLq28KbTFq3Ywl3EEvsc9/ECanRAiAF+A9ABJLGS9BiPxmIUkSZYFB6IEzlZU9cEmm2KHOJOg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.5bd58844.0_1602632806275_0.9893569115640668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.bc846b29.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-icon-button":"0.20.0-canary.bc846b29.0","@material/mwc-ripple":"0.20.0-canary.bc846b29.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-BCafpVgFAvxW8el/o23Qu38U7A0CWKdJscGApbjmqMLbchf/Y14tOx74BO0wAeV1mCXvaEJkL7tvlVdZWnMtOw==","shasum":"2378be4d21f4d77be89e56b15e573ad4bc1d00aa","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.bc846b29.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BzCRA9TVsSAnZWagAAmkgP/jLmE2dnqCCxB29wjbuK\n463sVh+MLWjDDtQcS/VIzvXL8sHiFmzFNTp0j2bBA2x8YO8QaiuH1gkvTIMP\ntpMJY6frNJJJ3Xzn86Y/tRXaNtw/mZQFALfHTnQIK23DyW9snbTjVJkaPrYY\nevIGxgtYFigIOuUHaiLo5OO5PraGEdMm1JC2FlkPU5FPMMLI9Ib8WFkokwnH\nqiikH3wfJk0l0MiAPQNY6G3x7gz5rrsAiSOOQNbwKgfb2tKtDGZ3+Fi2Btdp\nfhagTdsHS+E9hXjp8ZaUOioHpk+qlf+8XHKuD1uyn0RXitZTNsHKXHEDK+zn\ncQy5g3NQaQ0O2bvII+BvkokQ3LZJMJtEfDs63zSW/mZiw4gbBpaKurWWe8t/\nnSroNoZIIrj/C+Q8geQpt+waiBwcPGr2seihX5ZsRWwCwlZApDj1LvyCvdrp\n0J5z+zEPbJtdfRb14vJ7Bpdyo7ump6aPGZ0OdGJUN8Qlqa7Cfk2BA48g/doj\nC4ZoJDKJ72ZDqADH735ZetxFtMfKgnFT8oSB5RioNWB8k+wVqAjDdE7fffi1\nBhhpzy4n3ymiE+DajlIeigg/7rkqqunVLbpz97KLEqCfSkMUEY7iOJSru1nU\nCPfOZtah8HyZ81Jt+RZlBvMKmru9BwcYKld1tGfZyAlHD4ei/tfp5p0eF2q+\n6wVr\r\n=U9NN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH12nc1Lg+yDu3/Ew7x7SZhdR9XX8sDd83fTdsh/h/DNAiBJs+vzSgh5dDp5ZntnP9C7II9iwUNW+SCTgBL2oIyJXg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.bc846b29.0_1602699378960_0.2911750623697331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.3280b686.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-icon-button":"0.20.0-canary.3280b686.0","@material/mwc-ripple":"0.20.0-canary.3280b686.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Vl0zlgrg2c9Wq5CgT5jvTlicCuDpLf9adPr8MSdBEqi/uwTHvBRIM+7rumCeQPVQC3H7cZNWSTKNhnheavf03A==","shasum":"8bff36d033c8a0021fb5e9d04ad41f3995719e9f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.3280b686.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOrCRA9TVsSAnZWagAA5YEP/0pvUpS14qi8gRElUelX\n/wv4Ieo+/UTBeioXieIP5sBUXCzZK8wVu/Nau5YyN2nLJpoMJ7r+je7L5xjj\nJtUuBJz2rcq3Kg/CcgfTIcrcV3FC9rKpByvVwRx7gKycnTx+cAH2+RFeEHhJ\ndE7hUMzJt5DarqL/DHHGZcYaFaSNvS7/fwY4jpzoW1oKj2vn35/w6KpYZNU1\n+pgR9ItSxxONUsppGQ8RFzNuB223ejxLnpJIwoGq0KaoSMJsbuHiBGsQtHwy\n7E4wa6gwwZerjZq2HOwy4GKAMyIboQ8+nqikLmvk3PvbZnF9b2iCb8+0XR9+\nRALb4K6jMZ4c6bYroFSNcSa9m1c5PvTbrTj2yYUk7aMUSIUmoRXhqLkPTzfz\nAD6bHFG4qgz0F+8KW77F6qn6uv0fcttlqhSTnl2F4TiRBEfeJe8iGfxBcaDy\nxs95xn9VDob47KvBriQGhGFku6JmPgjkFCerikCIY4vYXDRPQ7x7QwJ5Sn2l\nwCfzPla9a1zNO0whwsecg+ocqZ8ObfAcsLhssvoYtGyq5UU+HVquMR6ADQ1H\nO9hrbcAP+UlwLZ5fX9+eNX80Xp++8u7ACMZtvd0jurQ3Rp95bfI+lwMfk2zg\nGnEGztPtPGaHy/Oiad0RcJhhd3rvj27dmcS+RBI/3rwQ3WqSUIJRnrgROXjg\n/Sjr\r\n=Lm9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrPteALsniAoD0Z8V7uYy9lZNcw9bmCTD307yx8yvcawIhAKNqyb9z1+BQxbKGV9Fx9apBME96K7wnfsKd22ZLYMbA"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.3280b686.0_1602806698814_0.25293066082803994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.9e94cd38.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-icon-button":"0.20.0-canary.9e94cd38.0","@material/mwc-ripple":"0.20.0-canary.9e94cd38.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Rgh/ptyF7dySpZhm219KGLvDcpZlZTENA+M/8pVmsjD1wcJqD6j5pV8HWnVVjlqV2lz+WDETsWY6rmmYa1yGVg==","shasum":"05571795e2e7b8b2f2e24ceafee118c764e27544","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.9e94cd38.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1PCRA9TVsSAnZWagAAs4sP/RqbBAITgxkXju5cYF18\naUY6aLyRzDDgMldPx5NZww2wHF4/dDd1sUb1D1txS1NeHiZtht+QhJlN4pTl\nWKFUd0KMrSb+P/2Gv9ZHYa6FSFn8Atwu0T8REnD6Ff+cLCNUvSlKZOlhXr7O\nUFi9aGD6j0p1I6L7FVDMPyrqEPznwfxyfJ2ygmYqpFzszcnDC5u4GRbyCEj8\nugYuht5o2wPu8vU64phlHq8e5JK/pKaoDAcR0fZUX4sQFLPrjs6NuVzgW+4U\nk5QCvGTJ+SJ+z6sJg8627BrYxNVDxw1LuKRFJ8xOYXGlTPlpYbWpBhnAU8kN\ngoRCaIAIocNXxOlvAxrTTCY0do0LL5J+qVudQHWQWbFiDoEub7829RcRGAql\nhXCmxWPR/CHtCaU/BOfEsz2B/9h3NwyRfbk2fHff3cxGFEWGqIaqz4O09iow\nGbL3vnXLXwEAxc/FDKB5ZuOxupkHKU+VEaL7H3Gv85hGhTGw8cVXs4rDeIyu\nNGafFJTu0C0bMh9Dljvm5ffvwqrDFgSIRr4e51ew4cqSFNpmA6LP8GLIYtit\nf46VIdZN8cOaH0IcRCEfO5+I0pY9XUrufMBPGJFSV5qBKWYaTiLJNv9MKAiT\nLpRQUGDwdePN8La+MZtCq9p1QItwG1uWP1zp6CKVt2G03u1jtZLJOWlmXFll\nLeZP\r\n=+zAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnkuk7FbBJTy1xMsy6GPve4NZDFcXyB8B7Gnjkt9LsywIgT5cSVUTa4c8jpmajsExKT+33PtOTf+zOmJfE1XCFVTo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.9e94cd38.0_1602882894990_0.6419725365808011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.4773c773.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-icon-button":"0.20.0-canary.4773c773.0","@material/mwc-ripple":"0.20.0-canary.4773c773.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rXY2KVengMnEjpophH6p75KHQSm7+LRmiaVvMh6YlfnMN51y9LK3P9eak+PVvifYd+dHkJ6pscXREzA6odadVw==","shasum":"896a411521825fe1f0896015bd3044f6e523760c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.4773c773.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiiAACRA9TVsSAnZWagAAeTwP/ji6NkYaDUCNMq8gicXi\nmPgWjD5uVHZZmXE1gUPOz50txlLU3W4f9qc+8wSUonPTAFH7rJRKIp6uV7K8\n8szAVki80QDa4ktQm3URl4YHZKbce3hrUzBp7w00IprkekgLYoNzBXAZFvRg\n/6exoAEq+g3HOu93lrMRwzAqdlRut5rucAPlnQ/D+7F5Rv5KbdP8RsQXbgAj\n5sK+vQiRy80MJlhHs127/V8ZnLCFezcQ5varPG1vuRhOoEuIQiBU922+50x2\ndMQbqtrpFqj4ADOkbG2zECTFaJRgM0e0b5Nuty7NRlw39oNxnVlA3knbKI5A\nObIikbbSWxGO80KKQzcc71IXqCBRq/4bDsvNrRB+M8SbzQgwtEa9Hx7lCY5z\no8t407rUkJy4MhvmQ7LCaErPofr6Wa0U9DwBM+yLjkmVBB22g3gyOq/z/TAN\nPurET9cRUfH/wXQ/xPRc+VvROmiL8uKb5VljXjcQK5g937Shk+BqSsHJNbYY\n69Y9q7+c0KaDo86IMMeryGDJ/6Vja2kbgWDk3EKzYXmbNBnl6GaFHU7xwm/J\nSV1n2/ITZDu01P+K/3v4xFA/GDauz05lhLrgXP9tR+4hDAxeYWEHFM+7jHND\nfZLYFI4m/6WsWVhNWfgnILa3NiPTcgknQ7xySclCYMidEB3HacG3Ie9ISs6y\nbiUU\r\n=RMSx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGN0B/XRw2uBk9m/PH3NULwo4txEhCC7j4C4s01U8A/bAiASyol5sLe9/WcVOZ6UZ81fqUoQUXNRERsVQy+kuXt3DA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.4773c773.0_1602887680161_0.09107310444096783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.65787913.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-icon-button":"0.20.0-canary.65787913.0","@material/mwc-ripple":"0.20.0-canary.65787913.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eCwbu8WASa7aT2aKP88w5R8gZHDIxnOqCtX8LK/dxtJaWbZNDp/p2f01LQiiTmQUKfIFbs1+zcRJ0rUvaW4ZDA==","shasum":"e14cb604bbb1392175cd625a81ffc529dba36212","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.65787913.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAyCRA9TVsSAnZWagAA/ZgQAJ/30vyoiTGaRaFmgiDt\nDC/S63m2fkWclGnOKtRSKqlGBT2KD6B4pmGy9uX+Q6SJdHyjs5HLI1ioUr/b\nXpuKAzXXPZz2RIQLT0uii5wNjdWYDpX3xNwuAW/0/1RbHD+xAp0hi+LZDiST\nFH4Ya3TV3pC2psoalxGcmULRYhAQWcprYC8iJk9Fj6wXNDccVStbIxchMTmf\nC3ZSPupmoyolyC/lK7Rvu8RYu058RIjxKunwSrJzWC7hWPasDbyn5JECezhI\nJIBYXNHBMpS/xMuZXUmjNuJAW9V4V/RV+SSkCFw0JauLm7D+Ke9/ZYnopCWb\nkTkPfHDRlSvySXm7e7dZA0FHnQbtt52hJN2ngJLVdhQoa4SMhN7th5+jcBOu\nGa4x4AVLRpt5Yr20p59idhFUcmnUeRC1pNUSRkl3tvEmoz4smKi6WI6N3Ev0\nGo/M5DCMYd0QPKzWYcTGxPAX+DcSvtuKITLHguGfFurEuQFIpiHEFwLnIMYb\nnYAX/oQt6lRkc0BJt1Dyv72rSpM4aXfueeldLiCbK/lzn0kL3nfkr6+OzoEa\nqKP7ymva67ybVPA890nc97Re0QOLLSVNC+ehYV8HCOvtJ1p6PbCQimbl4vaP\nokaXqlL/NVzED4S7qGp9zClr/I0swY9sclvKUQ/3yyY4jGy6yT4v/QTJtyr8\naKNM\r\n=eM4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHHxd6jtMUtxFQg4Wo65bO0l1PMQGZ8x63xUPAARLn8AiA9X6RCEvAcl6UVMAyQ65p84j94lB20806B5bLYyJLu1w=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.65787913.0_1603133489911_0.4142234788054049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.5485fba3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-icon-button":"0.20.0-canary.5485fba3.0","@material/mwc-ripple":"0.20.0-canary.5485fba3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-FcdQLZdR97cSFP949US1cZmVzQWWl9Z03u/e8gdULi2sAmfOW22LbfUmHEGW9UCoyPtEN0PSZZfjFVL9Mvk+uQ==","shasum":"718fa9fa98f4b1675bd239c225238c26c996a57f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.5485fba3.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQdCRA9TVsSAnZWagAAstkP/06oxLQqITtS7Ej0lPX4\n2EVB9rh8X6O6tL15AzRLo4tlBy/JMguOfaz0TDuOktjJw8ZFTU8AtgbmLe2l\nlHMgNrBz/98BxdfSIudl2Ly3IZZ5o4A6TjpwYk+s8WSWIvEDYX2PVQLXUyfS\njcfVCCiabshKpuSmzmjWoyUc/Kayh+v6B+RCllfcvDvxC0rAh90rm9ZtzOpN\nv+GqBaetpq/GWiIsu1ojs3VetvF7rDZkzbFjgJ7BLOI7RAHYRvhd0S/t47dB\nuvr18gWZ9y5fKLY8Ig7p5P65WjQV6mP2VhXiYQRmCstJ0rWW/o9T4c7bPEC2\ngzeVFUCS++Ku3x4WFVBafkoH5p7/YDO6PAL3fDQkLTHav2tzhy01jwSKlywK\naK52xZYMHDxlwj2Qf69BuVHy0a2iz48CSlm49dW+VkEXbXXI+PhmsKlDSHfb\njUT/ieZrjT/+BKbAC1ZJ548k/tXkMrlMNITkpI7HaQb6u6KCDRXuGjilLKlz\naqpb/TfsuXmLibD0v3bP/YEmSydxmRYRaV1IEHyAKTi6iEmL0WCyVm5BMflq\nIqisBWZV4NkkowAEZeRA1DBaK/G7dZNTM4D4EJkAXsh958hqGSTIMZq8UdxK\ng0vgN0okQiV6v0LYoDd2+G+3KkPxZkzj21qwDqzrk+EcrYawLil53k+HQAZT\nnvQT\r\n=Na6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCehbv03gUQekA4zleSr0irUH+Qf9qZ9ipMlwcmaXbl+wIhAImzaYBzRgruEsfuf4NiyW9GU02KmJ5xvYa3c3ua1J44"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.5485fba3.0_1603142685421_0.09552544187932721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.a39d0a92.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-icon-button":"0.20.0-canary.a39d0a92.0","@material/mwc-ripple":"0.20.0-canary.a39d0a92.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rgb+2Z7hX6WOjYlcsuStdjWL0JK0jU+adFJ9eIwGyxs4eWFXmHyNziIDQt6c5oFbY7pIlCBsf/rNLqxcUSg+Yg==","shasum":"04bf752958f5ab58fc67e20710f80535f1eefb00","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.a39d0a92.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0oLCRA9TVsSAnZWagAAJvYP/j/8cN6/enW9fXGKtWq+\njEGQytNFhnVENzcEqQvql8og0LNOIBPhq6OUxp4qNf4T2J5y4jq9oubgo7zf\nAYmiXIWW1niywgnXUHh+KqHU2xfyv02cd6yAUCPF6h2hm1yZUAplnY84HsWl\ncGMVWKK130KKWWVvOxHNVRgk58qJtzBW5yJITV3W2RyKD5jxKjmXe9AOKqiB\n6PoWP9S21Lbul7/rQmi8kz2ZGBzyYNgyoGzkBDapy+Jg0TNH/RT70W4vlXSJ\nRwpWlMYMTO5kgdvmZ+7wrRMR8wQ7DWtoIMJHUwz/bnj56Tyb1PExPSNojkI5\ngQ2cULjea9QLRWKYbgFmcDKB5CP12oh6r/WdVr2nqzO52PeO9H+yvFaViekj\njfMDsFVUnTKMEjPElxK3c09Wl7FvzvWb+aweCsVtePxDi+P7pfVOfIiE+ThW\nFcMXov8LMG7N3rb8IgjBLRmtPwqOcASKpr80g3DCYMDF0YoJU+q6+MET1vew\nnpOQWysJvAvCiCk7ybFd0ptuHxS/hUJGwI0zaJ0oSrl+XZYUvsfi49NtiA9E\nNWN8ODUGodxtkLmxeWZmwv2GCGGg+P+2XcVyFB73m8rLJZ3psperjqQVN9jw\np5ITGHR+T/fDZTBL2RyT5JftOWQTNjckGOycpBYF0SX1TnE6UIl3tokQD/i8\nIdZH\r\n=FyR+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjDJwzK+POQn7MqF+Wq85h3V5HoEChTuQXTnrHV82PEAiB71iAHNX9V2TG1A+N0FjqL6mEjudk1BhFvoUBTCHGM6A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.a39d0a92.0_1603488266752_0.4611570202975934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-icon-button":"0.20.0-canary.4eafcbc1.0","@material/mwc-ripple":"0.20.0-canary.4eafcbc1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7xkahQgXcJVHNeTVhuZDLLRJtsr6clkLkZPqan3ETRKeKTqHKjm7TnTacT6bepSCjHUva+j0PhfUaICONYdlxA==","shasum":"16b4176b742344f4b437d0b446b7432b11a345ae","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.4eafcbc1.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YZCRA9TVsSAnZWagAA83AQAIi2YR0Jt7tMQUddXdQl\nCdpt/y/daeTtwVOltI4T5hKPfHTUSj8glVofxAZlbViUo3xtudEEF5CQP2fg\nPEkaWRZQjHGZyXQ5ZGeJ1vzrvkVSF7VCda4VvO2Q/9yptvCpD8+q76HB92ah\nYj+WDZOXHGkVe2Exa58pgatvPSGSlxLcuoG3Ws2W7pG1yd566Q0D4O21Yuq+\naAgf+Z9139HjdBkp8/qT//EAEDavOxpGw8uAZr674Fa6Qqqfgy2a635XnbRI\nYB+YvYFq0NxrPTQrgkzvpdWnG+xeSd7gJweu2EWJvNNwtveHVGHzcOEcKwyD\n3tlNfnVSsI35FZryPWLDMjmAiBGS+CmYeOnjF+kd9OKQikNvC5aknZegUbyP\npoS8DK6CYLq1X2Cd7TdwCData36rLIRfOTWYvhc8uVieoJXJhtMZJerDbUqx\n8/ioR7zKY32KcO9RsLraV6nHFAixJ3qoAQtDDiIf8Yf+hWy+zFLrPE0SNjDQ\nf+1M0yFyHSk2IfV1K26rHuBpLl8YZatCjlgdDr42lN7E7IoxpVbCQYADoU+9\n53w+l1nwIp5jnNcw1j2Ma/BZ4I0i+Tw0X899YZLA240dYz+QeYUkscpLnYDr\nXkHr07kxn8qPp1O9jsHbWBCiyemLAfUJmgjPBRqEYHB68VugWNBDWMlHLgHz\nu8C5\r\n=Fn8r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkZQNE1xMESmYIPgSW3X13m4cWEKFcKdxivSaxRueQwgIhAKlr1k9QuNg6Lok2AzdSMPPTNA3nVY9LVtA/Dt8luGLP"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.4eafcbc1.0_1603761688652_0.6748902032729345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.32961593.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-icon-button":"0.20.0-canary.32961593.0","@material/mwc-ripple":"0.20.0-canary.32961593.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eJ+kYrI1V29sZrNgf9Y7v1wyJlUFqE9e+HiphpOuh4zmZwKXtbdQ6lrHv6zMDEVHXeB/iRDrPIyBtNW9iMljEQ==","shasum":"8fc4be9783f9930d38acba5118532276799046a1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.32961593.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3MCRA9TVsSAnZWagAAx6AP/ilCVFOnvha4zrz9RlNz\nwtZawQbwiCwMLdTbDU+Sq8qFJX29yalRQP7RSBKSoQFgy9DEp7DNgX0TpbYl\nGOl2tlob62fzCGGk5UntO9sXwkmdtjy820l/hY1WTEp5r+9zarF0NO52w1mz\nRTO28wtDXNx+fCVzH7s2ZYKh62h3wyY5CMRdSuU3DFATtYJil11PIOL+uRZ0\n8jGn9cGWd5p/dytTmlBC80jstKRr5U5JH2HsBqVsJFaQ16BT4HG3VC+4NSAm\nprDb+omDeMLpjoUfynWiCxRpVTGOku4k6zpzQh4lrXd1ufhqWGbRS23YnFGB\n3bV3lFP6lmDxMISiPFF+HjZC3zlTXqIza0EDxAH8G7KVHcwn0Rrnrmf3ZaBX\nFQSZIgPzjS4Lrr/w9mNTGY/u3YMgtmqe1Vip1PRBd1ljOI8lYqt42UaKJm5H\n4KL13gV8jt99J796kotxlnWd6NCgnWEdGtsmYniD6ufIhhfWYErcjqstiFVS\n152o8lPpG8bbzrQ6emISm3NzhYHIdYTiYey7kDqkTmn5dkCILNaiMUGRvrPi\nuxLcerhj6PoSwvFFYHJ2Ol9OjtL42HYdrftYMyPLR2Szvp3MBKVi4FSgdET1\nczJTF17kNfeqLy/7aig6rMijHMkX1VumMTfDCs0258xZctIPXFz4txfdYsZZ\nZHcS\r\n=vyOf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6sFk/6oL/GR05lpyvSlGii7IpzmKaw3yuX18oLHLhAAiBNGSQ7etZ+x2xv6uhp3IwB9r2FURK3jCmYMQpv01e0CQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.32961593.0_1603845579613_0.2498031634378357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.8e3a0601.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-icon-button":"0.20.0-canary.8e3a0601.0","@material/mwc-ripple":"0.20.0-canary.8e3a0601.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-c4TATR72xluwm9d9nIXG9IT4t+KwXXSLPAXoijnY5670RrpBO5BsytGLDqN/u63RmU6z560iepiszcNy+BP59w==","shasum":"e835ed7e50c42337cc16f3afe9cd2bff77bb3934","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.8e3a0601.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYdCRA9TVsSAnZWagAAMDcP/1u+QKCFH4WX3HUdf4kv\nwWtvCOHDad5p4unJFHnR7p0mcP5hl5Ddgoc3icXD7xbO0D0xrroq7UC9Psce\nwWKXnQzib8YUx+AKmxVIQPrVMOMv5RWB6Cc/xLwr0q7grt5nqeibtd3wuTCC\nRI9QvjmX6wpmWdK1Sudo5ckXfDRbVhvo58kT5amj3xXse86MzEsaNupxjR/B\nyq3xbJei3yJ2yicIKyruWE5t5VusphX3EU7UJu+F84mnd1U08+WP0zCbOEIH\nxWj7w9dUHt5752alVYzWGQdewNsOUCKaLacvLAHDtvhU1VRvFwl8n449W3iw\nj5LnGsjGC5W2GbBjMwAWJZlCROaaFvNEiTMTwkzfCA5jtmBT6lSQzQVMtJc8\nYH127Pb/bkr6pUvG7e03LkNX46VfPplQLTlgXabVldf2/8r6/rV8u2fSWE10\n3dqScPMV6a++XSqZirQQoARjM7ZV5YxxP1DIyl9n/RD/DLPvqRmj9Wy1LV5o\ncqOE75hMM36Pp43Q7Zbb3SiBGEur3WnGpWP0QLNi1V1q+oFfOHzXYV3HT6OB\nipnFh1rfmfRn0nHJdO41jR7SCVGki9DU+/PSIIx/rY0Bmej0hQKcKWj+ZUwh\nGt0LvwBvzj4hbVkDEPKS5h8wk/kEJzzzrOuyIilBgm5pWzy0PtsdsYk1uHzi\n0lqo\r\n=sCdb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsduM/Q+tE6LNVGfpKsgO21WJhKwQFnZT/jO56q3nHkQIgT3zd9/rxJoV58QRqNiTmK3wE6hoiRc3ghpVDvzgRSNI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.8e3a0601.0_1604007452349_0.5090723894541862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.178c25b4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-icon-button":"0.20.0-canary.178c25b4.0","@material/mwc-ripple":"0.20.0-canary.178c25b4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Y8Yt2V+SMGk5AIm5B4vv9BTA0e28UP4+VWCbPrg6BYbbmbME6VAWeeEfI7Pz0oRCYR41FoxVVkOVUMVXOn+HHg==","shasum":"f7e424b26116853a69edf7e1eb561a66fa151782","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.178c25b4.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzlKCRA9TVsSAnZWagAAMVgP/iVHYx1S8ZzBSDEZUznP\n4RAi0t77Hlj8JXPUasxH7SkgzhLRWY6GDiWQTpBZyjhoYTHjG17tU+U1thyl\nSg/oHL/VR6tOnf9r1+/ruxu16BuSpY4WQ7ZmRldh4Zmie3gEvddc5ZyUYnD9\nseP/DNnurm01tsFiH8ItsEo7A0GJ9otptkEv2oNM7mW1cDXq0EFNejDirzRP\nv3f/OCrWQyc+QCYE7KKpSIAu0jLjdVKMWbJp3WTSEeTJbp5cHqYgywCGCYBR\nmF6KkRL1jccdaD2MLaXoRf7YuKoMIUFAh0t15k+XrW36hvhHK0HsNU2Mna4r\nqH64qxATX/rGVHH5wn6YLRfbKcdIgxoOHX1Ac6E2S0lYagTdvZ2RLrni1vnH\nKuZ0fAP3yDWPX7N2WYKdjyXAdQB7d8wWoY5I4hqHuB15MobZKGkJwEHonvSc\nXIpHEqpRPom5BUYS+UUZE/ud7x1N0ATNOR6wclpoA/tXI30aNkK3D454YMdV\nL52bCWN4hwMwWIvWfM2yKTuj+tLjjIOCrwdajadB9vYRpuMR3CYl0dAfUB3A\nBewzEqDBpOnRhUzGtVJgEoHcJ8jjXSsbCrx2tzgo4WyuNnje5k1/YwjO23Ln\n6x+Mz+0yzXzVeR6jaYUCmjWC93RrHAkASWNGGdM+x/3gxaxGhselGVG7Ie/E\n8b4U\r\n=3m0p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJUtVCcGwPWWlo44mBYQkYexlY/dpPd2WaVu6FkYozcQIgP0qwg8GYkZuoLTyzpdopRv9oebdhUmyJT0ceKb9yRuU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.178c25b4.0_1604008265849_0.8321921369261174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.124beb49.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-icon-button":"0.20.0-canary.124beb49.0","@material/mwc-ripple":"0.20.0-canary.124beb49.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3PP539QS7nCISGAlddteurjOQzHZTNGlEZtBHeR9eamZEcEeVGFdlz2xAi+LKAYFZ7H/KoiPXoT0WVrmrtJN8w==","shasum":"806b625185ee077c9f3fd1045a33aa50b5ca6b2d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.124beb49.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqmCRA9TVsSAnZWagAAjx4P/RWGcvIRFK3WTt+dXI7h\nC2NLTjA4y4ZzEwvkR5Uv8WmYZUKxToHuSWVOAhTNf3oTRECzaHHJm4u855xJ\nDCGCqk8WvUdS1wd9jWBy2h9dIChKBLUkbwajlIVQT1US52WIzX/DgmnJpWzH\n7drVSP5sm7vUbdRMdf4tfDVOIJmaEfJsOMe5nMDw9NbatnzqW30bZL+1idT5\nnNd7mCcydH9CWVhtmeIj8FgmSMTWI02OmRP/Y3R5Ff3Glblmy4GExeqeuQV4\nVINzfpgbGZhg4Ve/tl9F2gq4rbX3AuhKIvwM7BeuzRH5XvmZDPQuunv6LtIL\nSNOcB72P8MMEswVyyU+VefS0Ozu3fTkpeJVSPpjvUaUUqszVpPAk1gCJxGFk\npoHZLea53sb2D6iqCZGV3HZ7voHla1aZYXpJx3/8/5z6+OaT7dJFtSxh8xnX\n/19QuBVbj/siG8adyxPPXwZKcKmZduNfB44lylbGPaSyW2j2Ig3fiqkH9lnh\nEz/U/KjCUnK+c05VcgbIZuctSAACxmZsH9mWvWAhub8WBJ4LKVtUcBft5x9T\nPJqIx2rIa+iA2uX2p6entUgTfrAwFL00Te+e8nuFBaneLX2Jqgh+cukM4IlH\nyAvXje2TU5aMLrUxDcWnza76vnAjzVsvnbJiAKFfrQPykgrjioihOzX7TI03\nQnjx\r\n=9Af2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUEtcwAYOSukj9v/4Jdu9cfjV7iZGDq1T2OP+B6KR8wAIhALT/VkT731oPau0BNOJ5ZzipdZsDlPG9LMx0ryjMxDWG"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.124beb49.0_1604102822048_0.6881326858428511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.5937f468.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-icon-button":"0.20.0-canary.5937f468.0","@material/mwc-ripple":"0.20.0-canary.5937f468.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4jLbZE5zOkCyKDUc5xTBP5kGJY94kkxqOFhWQuWnk/orIibaXRYsSYbzVCWcNQOpNqtao11gZRf3TsfxCV3Z7Q==","shasum":"7fe10fcc4960ae518fc09ebd7c7a2524d5c5fb7b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.5937f468.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfNCRA9TVsSAnZWagAABL0QAJ9EfrZOQuFu/YCz0s+G\nWV2Bh/7FkNwRhR0SDdDeV3iNO1m5QrFVOjpurz5Xm2aoOBvi42JWVnoKtZ1J\nm0KHHVSTQok77IjKayVQI/bj2VJwEwe/1Xavkr9D909LkJo6xkoxy2Ztv2Yk\naqt0uxZZQZxayv62c7BxIr1ffivDGH3rgGXp2fdMG3F1/gec0WioZbTtW6Xd\nTvrdFBfosZZ5+zAVEuMV4+26xZjrB0NU2KuPZ2Au58fuepkbp8z56Vw4S6k0\nzNYUKOOO+QYpkgPCqO0vO220kATGDzp0QjigYYztVlRbGTAnznb4oNIcTTlK\nk/1Og39iUTvrLwqyZGGus04DkYv3YoBvH4h8h5nYAIePkwQ6xbqvM3Z2fOvq\nb4ndi9RNGuLPjB9nRrk/c0X6yx3IVF1JgPxmZNRAQVJtgvpSUVtWbNSErfta\njK5s5FHL6sdfp0imhZn/eubXOsv4yS1DUg23I/jzFSnKD6FXMUeLzy+dHSgL\nJ9mjEGZkMnRp52mEHcA6eAxMjrhKJm5Ffl2AjP4wGzbchEh/nCcJea6vWOmy\nTNmo/5N9+KejXYPLRdiO431OBgNr/ck+1qYchTz5EsPVJpRVH4gkDt+MoZ6R\n1DLBJE5EHt1l8z3NGYzkOJOp5wO9lKA4c/eYezcHoHN+Z/RKl6AZEJtwsKxK\ntvI+\r\n=PdeA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMsPNoF/LD/SHCgoCkrgmhY0EmLV1Cz+PIJ+Z4CpTpfwIhAI6Q4O/Lhb3Sb4rO4ZP/yT9PLUNMIuXF9Oeq7vNgFFky"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.5937f468.0_1604523981077_0.6073900044015108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.a9bafaee.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-icon-button":"0.20.0-canary.a9bafaee.0","@material/mwc-ripple":"0.20.0-canary.a9bafaee.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DNChXcAkLbm53Qz+OOi9bur5X1E1So8pe//Mm9x1KzuNtWpOTFvqiuLq4RdX93WFbGovco9O3fmcHuTBwPrNCg==","shasum":"b768acf4271d57b19c587864f8e6502496401ae0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.a9bafaee.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH00CRA9TVsSAnZWagAA52sQAJz54qlDRwIO/D4VphSS\nY2iLjHoAIUhVfuoh1LTmQ+2xKfaKh3OpE6AeqiHH/aBsvfx2/zX0OYYsUg0A\nZfCYOLCVEDJN79DDGW8q+KMtJoJdhh1osXzRAHnMo9wu27HY+WSqD4lV8nLS\n6oSecT2ZSqkfhnQMXEy6e77ygTVwrH3kejXNfmCrVfnTYJ/S1Pl7eejYaL9/\nH1mRrTJK6diio1iHQigAAU3GNe46yyS7j21Jb/xWsV/UBTICFGLrNAwQyO71\nN3efVlvC5uZ3bomTcZOCR8+50T9oEkZPnaXZECLzZ614J28u3tepo5/HjC1R\nXU0ycwRuG+4NBpSU+AxMRAuJ+y97ySUBXmcfQODlPPWqom7SgJx3PYFVfSyZ\nT13yUpP3jgJWcQRpVl3FIhOEE3wgUgYVXYxcbSxTzt0uh3H/1EgF+1FLer8e\n+boGCP14Z5I3aqPzHou1e71fBMfBxKoQ2ch9s14BnmC7+op1WBeU8EKeMmfT\nJKO7hf+NmzrBUs7GpthcKYUvS5AmqcWyurcaTvz2LuPSG3reKtaH+8gE0BT4\n+V6GEiJuti9p4abhUwoD88Ih/Y6ck1Lt73WSShVksLF6airhhFlCFwBitvXR\nS+taczSpT2gNmCyVwgRwpzY5tlvn4uAbtG6pBUs6cV13WKtlQSLdNvKP+iXV\ndyUP\r\n=BPM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4+JonO7HkMwFQuHd2GPBW4sCa5NqXFg8DYncvZ83jJAiAvMtH42VoHnQXRB0toJO7yXUdL98zhwftjrZl7QcdzHw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.a9bafaee.0_1604615476226_0.17719881477276123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.184861ee.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-icon-button":"0.20.0-canary.184861ee.0","@material/mwc-ripple":"0.20.0-canary.184861ee.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XpxMDbwlnPZ9uA1O9OOglqFjGBoIXJTO9B6GIMVyhkgyrWZxXc+IGlkl8YkHQu8+kAKbOkbcGrlu/qFTssNMiw==","shasum":"c1dbbed05defc8ebc35e2e9c52b695378f97f1d0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.184861ee.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpex3CRA9TVsSAnZWagAAN9UP/RUwuULWiwdmXyumqIoq\nWGnKXaISZeMvjHDYoSAq29kemcVBLWQLZXSCY2b09dUmfHQw8kqmOVNahpco\nSiv0WjIp10KFeneeKbibIBSuYh/A/LsaInm+U4xXCb2qRBzBZOl5sInlhHxg\nEZV38YbQHnwenqhhcrBfw2YcTOFcZ/yqyvbOsG6BGwtpYU4FLs35mhbRu9Or\nDQqb3aVtk5tfGSYOqa0Rxwk9M4prigVSr/FwHUVTFQSncQcmM0Xfd0mfMDoh\nBuP3Di+gs9LdUIKcaSFQNMjMut4t83XBucdoHqsKVdXfZa0bNx+13hnhOYvQ\nJ9gjaHJ4RfkB+VxGGBNOwCmkXZkHt/mrHAWIgqmwuMWlx+7R6tlGqPLu1462\naVqozTuFHe2UsE8yJ2bWq3aq7d8+17LFopJbyvEJe689hEc6NBCTrwqKy/bp\nHThnuZUGVW3432/86qpP1Mt9raYxvPbJXtFYvfpHBTPlknImQXbpMJhagUNG\nelHbQcHMJufYE8MfgR8Mxvx7+g6l0qjNyT12tsxNRpL60ti9CzFRI7Eta417\njtNh4ugAU7HNksWGUNoQZOP1qfKf+XiqQlYJikyHqG1DMMpERYMKWOF4XH84\nWTmdevlLv83QP3wivT/XDn7Ywmz8LpgVhIeqyD0cusIBkjE6qhFtZs3WQgx6\nz9q0\r\n=kHa6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwH6GrWuNEnmTfbey9+qV4ZXj/JEW30DYGN6cAxq7VpAiEAjidX4rQSO8Pm134FJnziujnG65kNOitv8d5i56/oO+0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.184861ee.0_1604709495344_0.7805637392514846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-icon-button":"0.20.0-canary.6c6ae2d6.0","@material/mwc-ripple":"0.20.0-canary.6c6ae2d6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-B1v8HPjoQ+Dqa1YJerwoAldSEuvmP1wvrgYkJi7tsY0d2LoNLucdeOBr3q1kECe8Ry4jyul/snWwmn/Wii09RA==","shasum":"54526e5bbeca940555c601cf391b6b1dd00bd5e5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7NCRA9TVsSAnZWagAAcwEP/Au2qcejqYS9Et8vWQL2\nLAXXzDGEawQbocvlgCSTXP/egSDAdTuAzuq5/18bG0Nm1ENTiqK9aIu22J34\n3jwV5zmpxUYk0kJxPTszbqwTqB3ipXW/ILyeidFRHwZEA9kyWntua76yTAQX\n6rMKfP/SBurM2OrwTzlpZDneKHZCXifaIhyvl4A8Y5akE/4rSUoJBWgZj9TM\nuOeymq6zX6AbmdvYOAbc21rp2oIpyU/h538FfBShYGvDTb8IYhWNz/Jc+4QG\nMcPUYPCnPbeyGbqpJgLRZc4zw5pD7i3E/xKI7yItUXMF84AVK0yK397vPy3P\n5hvuuhy3wYDAIepwXVwgVHsmRA7/+oBCQKSLeKU7ONXGB/2QQDtV8Q01dX7S\nioMEuIi6LYPWYantEpcctq7zQRmNAOhx5dCpMkDdBAlokelPxF02ctW5NsJR\nSXG+BDbXIoG5CPN15zPinUP1+idnLkmlDiNbuKKV5vNjw4GwQs3iARWBmDkt\n2CNanSIySF0CquIyxG4hR9xLxwvVhxQ1lXK/UyY7DxDmypvQ07saDLvir+ug\n2fQvCr8VzU7vU+i3XxozZGHODxzCKzXNgXb5LqKvVVoQMLuklgtzVy0EH1/G\n0LHhsfh+l3lgqPinqfpWNTJE7yLqIqLTqCt1BDSe3blP1Wq5if5fsBQQPijw\n4mdJ\r\n=43cy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5BzTz9T8/7H/rhkbZRV7I3kuj5SY49naGY7XaOLxgcAiBkJ53ol/4qfaoJ3JmiS3Xhk4WPhT750nw05X2haa+g3A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.6c6ae2d6.0_1604927180987_0.9127295719064712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.ea2aa477.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-icon-button":"0.20.0-canary.ea2aa477.0","@material/mwc-ripple":"0.20.0-canary.ea2aa477.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UZRoh3A5UwVxcVwCECFSWz6yWUUKD0K7r2dT/WhH0fX9IHQ5gmCd/qTrXgLwQ18vQJNGUvK+YeaEsSEf/hYDfw==","shasum":"4bbef95b8f6927aeb66244589e0af6de33bf380d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.ea2aa477.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqderCRA9TVsSAnZWagAAJCoP/20movs9oragzc0M9eIw\njLMDztks/T3bweGeXw/uJsEZuWWDyphRQ9QQADG1TX9wsO4vun0VAYv7W5lq\nVKtZL+ryhI8srxeWjPO37wAb1MBZhSwh9eMmVit2POOF8p//xBap1ZfnSHcq\n3gsMnu06NM8wo7yLbmEeRji8gtslI29RBMlXXycI9VrHpg+RcgbW7iduTNWp\noLJO9jlS54VTUjRPNVBpD48cAoTc3ZHoYLdLCa6ShnWb9DN8VgzHW7QqnafG\nxwgvW+JUeRmSP9StlK75GEaxJT8Ynk14zvusGmnSUsK8zz3XeDg5FqGu8d5T\n9GaW28yOxgdBTxgto44I1xqXqiqFWbaaaUwiIsa06SiaLx229WyknN+PZu3L\n9odzQIda8WwiOEtTuoJpqK3yoKkMO1P1n8WEcxclmK7zzJ1lA7KpuepOk3pW\nHFVoift8/jOflcmKDhWYKOHaaExQVHgnyTLJmRirp18cW6hFYThPsM7wB69z\nbGj270NwxTF6xiKn84NzEy94eJl4FZaBzZD8YJW/R7keg5P5ZMHEbzAdgIXR\nuBuL6SeWheUJvd5dJh+cx8kE11MXTm1gliAaoKNZKRLj9G5RcFVdQYhuQo77\npftUT4SlqpfGsda2bxeNKo2mmqmpHwtwbl1XTNl1WXd+YLuGl7mbH6rBMBc4\n9Qz9\r\n=213z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8PSrdhMD6yhUwfeSIZMBnGYt5bxVNUI65dryuOCR5cwIgFhUYMSxSKDgQZKb90SErKTCg32Bqunwlwmlb/lwDeQQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.ea2aa477.0_1604966315369_0.04765663242888696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.a2c088dc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-icon-button":"0.20.0-canary.a2c088dc.0","@material/mwc-ripple":"0.20.0-canary.a2c088dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kBSXiP3ba3kxqu0ylelX2oiVUX6iG2FbJneXpMJPg5We0e13qp+yPBgvy8EO01Yx5yLs6m7KB2uPI9h4rju2Rw==","shasum":"9ec50dc74f2b747006608909c58b5617c85e0c83","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.a2c088dc.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKhCRA9TVsSAnZWagAA9ZEP/jW+4ni1OPiFabMUu6RY\n/5dirm80q1cn3Lz630XOOSKOnYfYOF88GON3S6ZbGqHomC2XyGrXqdJ2RPT6\npsvY+LtLQrFqfbbKMd20GfkAw5JYnHHMkmumsNjzg8xH+pt53Y67HT0pNGzR\n7OUtMaE7zI3bWa87mrKIcYlWpYxGk7Rc9IKxZ1FePWDLNJiVH0nVjKVDJz+6\nkSheljh6FXilj5UtPF8bi4oPrEsLqmeG7ryQWxgOeG9f6dmtxyf9VTEfxD90\nguJvfQrnrS0ryXEBBqKqEwUDtPCruXgItSvt1WR1glzstyz6vNPJUoQG1Z3c\n0Ddu7/2ifaqbPmv/P/NhQq64iybd1DSa9VP0A4gw0qVS/seKK+BiRD8+3ht9\nVNtPer8K/fns8/tMxvWiqH8O8oaw46FItScfVQ/DFdszZ8sUcEivQWR9aWa8\nbr+0xjqe7ePgYKOxSyzVj+LOLOA9KKAuqUT/vFM9ASC75RzTbOek1nMxsBIK\ndmok5+SpnCpjpyU4a+hQ7kT5kEcMP/rgrfsDpEbMumEewhLIzDWzKCG1EpW6\n5VDe6NHeSueYNd8JWtpsNGD5NnPX6WP95LpvBDPYqaQ+SOkspopOxJPiTkRA\nJMjD5bDRbYtgKlLkGubuue3zZo/WHwbqLp6uAiqhvy7Nhttthlp5nRjGWrJE\n3Vu+\r\n=3ad3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwzBlHc9w0dvtRlNL5VIrTJMaLB3RUYsSoebGhw1W3awIhAKifaIxmrSJEZqnwydntRQ1mQugkIUKHMkl9Y+SzxB6D"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.a2c088dc.0_1605018273309_0.12871401242787672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.b04d71d4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-icon-button":"0.20.0-canary.b04d71d4.0","@material/mwc-ripple":"0.20.0-canary.b04d71d4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hTt8R2tRUBxkeKR/x0OquDcdBHIM1xCPZYyQoyziui/Q/+lqhI9Yh3bi81dJr1i4MGhsWX0EqMq/MrFIVPsUxg==","shasum":"a6178725989066e9eab734a3bf5fd31eb2c09fa8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.b04d71d4.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGcCRA9TVsSAnZWagAAkS0P/jiVx35fmlUWSDf01jUF\nAsHWzssbknAZoj4803r1TGBHr6Qsf9Ujful+fAaMvROA4U4Tjk0MDWyXdQ9/\n1THhdjaU3MRwpMeXNIwIBi2FSZ8WOy6cYfhL+Qa+FDILHjKb/y28X646apLF\nH2S7NAnVNTQLLj0nBLltMbF7qJjUyZuIkt01CbSwnln5qtWLBWBD9CsaGPAq\nfB6Sc2VpOv/wHoWVElfLrADPYhSXgIoyOP43Cm540pZc+0QrgA9iomPYVY5k\nqc+2t7ak8orvb7KAMgSnFqCqa0UDe3olkW4zGW6M9LCwvB8Gf0GsqcFszpwD\nR+J74xufBVxvW7i4A1fUmyATjoB2JigD8e8IITvxE4sriZoEt7OyyzjfMZFh\nzzjWf8roo0/hl6j8fX4h19ek05xbDBTwx7NIM70pUuZkMN2FYUod3iuEMTCB\nkxBeWEheb5kQ+VwDT9R0O1bPUDCyXbhMAs3/anT0/Lul/2EV6HOp1e7+lB7S\n/jxUvoxAMsVAT4FvoBFna6oANsdpzr6Xvp4+tfJIE0zgHVT9xfz4erQiMFO3\nGdcIw1GMY7wpv3z27Zn6oE0zsRwRifa7hl1PiG931MZQFGul4HwDtL2j5GWX\nvkELFGlk3CkP85FFvVyWhnTqQmhjbrvbVB0SoD15cPSGHp5IUGzDdubmY9jy\nGDBb\r\n=1qOs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5DFD32vliM3P3btHxdwprRBsdKmnU+mVkwCYaw/tWkwIgfvjbERJTDLgXZ0moINldkM4ZmAxXSquXRAQRRT1X/n0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.b04d71d4.0_1605177755758_0.7104331880454731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.2c553352.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-icon-button":"0.20.0-canary.2c553352.0","@material/mwc-ripple":"0.20.0-canary.2c553352.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kzwnBXbInwZyo3tmmMqSdr4Mkg1LPgcY890piGINZUL2VCNyAGLqz0kvlda9BjS5z5vbNDEIBsodX8RIlWC92g==","shasum":"99e2851ea7387cb73195526c87ad918dfbf969f9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.2c553352.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbqECRA9TVsSAnZWagAAaRYP/its7SefHIUEe/V6YIFN\nSRIJhKKwYGkZV5dyPAbSyAYwzXcvCEPAipCa9Wua0FDcgYmX1XCCNsq4Z2Nr\n47j9AV9weM9Ow8Jq6MiFsCvhwuXxaHsKZO986Q9BEI9mgv+Ut7QXAzXeIfUd\nF6oEXRuemyQD7LCnpPC55P+ykngl2l2iU1FZdEq7wLotJMJv+aoy/BGrjes2\nOzwB+nv0hAjkQwmrHtjD2zGG4kglKzmQ9F/Fau2pZOoHhPTzZRCzde4h8QRn\nbdQaXPqqYX8FNBHaYyLPna5xpTp/bSbq0cuJ6ejGwtOjO2CbCtqyU6I0R3+O\nVxMiqZzzoXRgv4ZpSGLQwzeDXi54bVcR49fVNfSSVpoLET2jQZ11PMPik2L9\ng6kovk18AO0ZNukrE8Jy88z5kFelvFmAiA+Aft8s/XGhbfN0SSVB9pntmMph\neQ0QnWDeQ4zZuXYiFFTmcZXE6aYlUjhEDhkUBl6D5mlrEvHEU/RaLLr3BKC9\nW94xKifMIe8ldrPI/A9urQzfQ3OAO8yeixajod3mgTTQiK5TXMcb05YaK6rZ\n6ToTKjRqnXN2O/alAOx35td10BO9IQ5UmrwAnKGLv3IdWi+aDlhx4eyYO2Ab\nr4ogzQ6uFhQwwo4gEVTKrBBMTOmqIdcChjnVpvO3bMpIkkYT6HHv8WtikQ7F\nG6BE\r\n=NWR7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj9RPzxPr9LaUIPf2qI/CutDjBfAXB/42FSAoH5bRWkwIhAK5NpSKC7CTw9T0NzoslN2PrW78nJPBEauTgqGUWZLjQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.2c553352.0_1605220996486_0.9467837394026388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.6560d19a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-icon-button":"0.20.0-canary.6560d19a.0","@material/mwc-ripple":"0.20.0-canary.6560d19a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YnCUe9KZjw2nEDhaZQVNQi+u0z6mADG8l/RV0B5MuEqtXl2uEO9RUFIXVj/+L0cwf5M/SUhnvZv7NEqfpGep0A==","shasum":"ecdc33238c8d0d25c027d486397fd93743dd3729","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.6560d19a.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvE1CRA9TVsSAnZWagAA7YoP/RAPZwqBcqBKH3AGCcMx\njKOFRBa/5tDmB79y2AAdoV5i6iBYELBq+yx0MXSkiY+HL3t31mMlu4fGDeDf\ns3JwRoCilekagiPLmMSQB9SLgeP/UiXnClqmQgGn1O1hh6h6azat0YGyPNUv\n93A4DfptXw5nGtCCkLXr3DkjgZJv0P8OkOPzQ5upf46uZXbWgkjEaFQO9//e\nSrpQnnjYdSbSUR8zmWcyQ76c04NogNuHttzBKKtxI8UJlwG4xKD27V1QdU4w\nPacKDZ6DXO5SKEXyyUAdvOO6XRrqmRIfvnHfGY9BqO6YQjuz0OeOXTziHkNc\nwmFdFbTfaxpfCO37gR8iPAi32nXMY3DVmMpm3vsOylay2lj1WFLIO/UJ3QJi\nF+s7O64bFeF7NaQKksK1B4nNdDbWQSeEpoZxjqivqZ0buaC30Ik/7ApLwVVS\nM9lTX1yiBMWjZwltOLP8Mle9OD66f+RDr1awPc1UWnCW5LDsRfs85R+K012y\nSLllaSVyz0T564tDQYsfUOdDuLVTBTCCYWntcd5MZYDSoVSexsCMj6jEzYY0\nEp7B9WWrw3M1GnuURDpaRRmrFBdhGaQVgUiSTUBj2khZz2QG5C9M493T4Lrz\ngrwamA0gDEsvOgqlhv1Be81kGhk5zCPV/6I2QlV29Nq2gvCZTvIeNHthRSui\nqH0g\r\n=480b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGajnYAQGs0VV2Lln6S7FkuB9LEYeXSoCnhAs3yVeDGCAiBDw4upWF6CQFfRiXOeTKuMtPAZJyedK0LQ2CfnctFV4w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.6560d19a.0_1605300532750_0.12725523382084236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-icon-button":"0.20.0-canary.a28d5ec3.0","@material/mwc-ripple":"0.20.0-canary.a28d5ec3.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2cUNSRID6/2s5mQtnVMAe8LqNoxm7UjNDWoLB7Vnap2nCPMYoMVvlfefPnQEEKL8TYUcK6OhJMMK1lSH0XXp8A==","shasum":"000296f05e9f957d062f23c0436e27d8c59656e7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.a28d5ec3.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+s1CRA9TVsSAnZWagAAO14P/isqNChY1ctrX/NEbc/H\n5ezdjNmfpELGxFPw2u4TI1qTzyWnzqLk1P/uPGt0uInvSPftA0Ua2Zy3360H\njZMODAq9MSGLc82+p05PfJj737xhegvvODdEfJR9xL4v+Bibz7ZmGY7H/kyi\nmauPfXz06SPuK0nwBBpFLQRNPd6JNHVzi4+mg30Bd14Bq2OptZ3oe4qcB7Nl\nlLujy8/7qpPaGpeww+LUhUPyHnWBRnsPZWYLi3+O3WS6I8WBpJhAIqhlgNgb\nvGeCogj2rrB2naJpvsDZSqfeocUipFJMuxMrnswZl2plJ/4592j8Iakba4X1\nTwWbNUdhBdvAnsPk4TjwKyGWzq86SYUBSEUm4TYrLB8swjtxiZhsR+n06fy7\nWUuvIgk02QNY5Lt6BAn0hREiNN7uKexHajGgVK1iTo/VPBfN1X+ysAOC6yZ+\n+eAy8D1CNoKrCYLNKxzyvZk5v0apViB2LL4VtiYHS1HW9GZA/GGctnTASfOL\nHtnbn0KeGkzvtcWZeWOPlxTuiTH+usQw50vBZmo/IPD6Gs6mL3JKY+Fa8emC\ndKF1Fy7+DvSxwLjGhxHNrrV4wF5rWFerOtnSPb0LAzRo8ob6I9Hw6khS1DWM\nl+Zv5xStKIVZDEHBl7sUOqX81zpEPqNdd7nA9gJEFEBox5kwxbwFGmhzbqJl\nwje+\r\n=LVCY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKBIb6Nv46fdkn9i4xc85QlhCz234Iae/EN3nJbYTbQwIgfyvUKhzsTKfHIBOINyLx3Xlf/eVwgmd2lqEZ1ny9J4c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.a28d5ec3.0_1605626677208_0.8815055639059399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.03e7e778.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-icon-button":"0.20.0-canary.03e7e778.0","@material/mwc-ripple":"0.20.0-canary.03e7e778.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZF+EHnkSvx6FoFMsl0+BJPfs7qwz8M1eKOK2O9NrGaWynMvMTxmWeDSTeps2VQzcKHWIZXzHax8nBnu1wh7WNg==","shasum":"a0605c522d41b0d05e1707bc166c8b95ab1d07b0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.03e7e778.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCP3CRA9TVsSAnZWagAAy5UP/RFqozYqNpsK2rBIA3of\nFTYa6VOPv1/DyKbYeM6X3toSD3O7cyzRPBYBkC70nq4US8Zm5BZLVVylUGmj\nyDUY/64hMhXzHM5RZygkS2ouR53rJvDWDc3QaI3EGRkWDykhIO5Ol6QrQgkW\noVeaPtyajOvh9oTZAmqznlHGeDcmBDY/4j+tXDE9EoZZuM0ltHciNL9NRluO\nGL5Z1ZCPXx9EetOh7Hqyz66EMsdM8cFrYYL1l3PpK51lkzl5tEi3VJOePLBP\nZwFmfYSWaPFtZR8FtF5LyEuCwY0ed8miv/HkOJm0xhhRdQjGWvRyB6/RJksN\n+DfJsrNB2q6vQWoIbUHQVz3sQQMrOXIMb6GER1Vk9ndd1ru9Cx4ntC+pUMGU\nclUEPaSJ3dOxSQjEN2/Kefxqw1xJ1D4dCnyNCEf2r6jmIxeyUfpdv4Vcj2Oy\n+JlTCvvZL4UVtyr2VsntXRIdum68A+UHP4NlHaWfkEDhAiTS5R+6SkNkuB+X\ns33fK6lN4NIgCr+nVcQugCShrz2X67v0olsBFpmJGAvt5nILL+oOdHrQZTj/\nURfL8nCTJ8+5/YxKyAyaOzav5q6SoU0Lg3L5XuEnubZFPzpb9KcsFzbUp1aB\n1XkH24yDTzzjlsclyFBS3zy2ewDwCKWVA2f/246xm4D771ckBBJlXwhL/keW\nQHSX\r\n=UH1x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx3aLPm+DCzemcsCbH1y6XS1FHxlbUWN/xGSvjmEydVgIgPR8jJ29+KSn9ika7v8tXKxOkt6XOTonVzkxjKbaqXGA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.03e7e778.0_1605641206639_0.7110044879670849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.ac8ed597.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-icon-button":"0.20.0-canary.ac8ed597.0","@material/mwc-ripple":"0.20.0-canary.ac8ed597.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-L1rNgDlGqWY+nf4yGUKqvh3phOYnoYF9+VdNts7wkd+v1c8jFz6yIQItHx851vjVnqpaPDICn2SwM1Yb5RoEWA==","shasum":"3d211aedbe187b5828a22692a64a7f37cb47e672","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.ac8ed597.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftErKCRA9TVsSAnZWagAA0IQP/1cCabVpeUFBK94d/6XD\ngNbmajXp3ssWmXqr6V0Pna5CpgkkRrOQv4btIPofxn8O4WRr+TM9VmpQRqp+\nAgaXxM8YesbKWj0gsU/tHhslFfjx3x2IwEpl9rWiMeWB31WXfcs51kK8NySd\nyt27ZzHSgyDbcNakCfN2Pfdd8hlDrfaPpNlcOgyhHHEHpNy08GPlXQkgNGT3\nV0SQIXB/k4RNpwUnRuOTlx67exZ8NpZR6MgpeONIp0L9aq5e1tNygyGjrVmQ\n3KbVmMwdOjoDTKEGfIitfA/Pr/cIP0d422o5P8+a7OklGfp2DuB0mOTA5zcq\nepS8F337Zk6awL6EZZuAH7iugJiRHAouVFiB09/HFThHVhdCiPqRKkHorIb3\no3LkO9MD/JPL3NsSNHsx0OX+uUtNho1YlyH1myLyBImqsR9CrPR+lNLJJ3dA\nxGbYtubEfnZmV4LAtbiJ6hUFNtbjDWNehwJn6TAyDJ4uoFMRkwgKr7KJ+Z6P\nzpv6d2JxkFB7jbvlf2krVoVAt2Aeg8JXThB0dwMyGIgLC4LZ4RCSxIFUrSxJ\nb+JzmUR4UfmGslgt2LZ7mD9zZ5wPZDssZI6TauFEl8AQCnLdRAGlUPZgizkK\nNnC54FbLytJAt8sQ30leirpnBGQbqHqIOo6hmF+PfERAOqEpuXspUEbkhnuR\n5TJI\r\n=BFc5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+FaViorfgLQS0yW8g2dh04Ueokad3WujgccfNKXuvyAIhAMTY8XgjBx4Y6GU8vo7xuZ2ndnREnnYTklo59YDE93Cv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.ac8ed597.0_1605651146094_0.2593057605161819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.b6a60f60.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-icon-button":"0.20.0-canary.b6a60f60.0","@material/mwc-ripple":"0.20.0-canary.b6a60f60.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZZbQeCIOa60ZN7V85r3uqVn0akMv8hsEPBG35d7614ocinqWVsiKMEGEeiheEAS3esqMBjeiXFGa+hrFeKn8TA==","shasum":"9068d195cf89da7f9706af8fcb06ffb188daf7de","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.b6a60f60.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQ9CRA9TVsSAnZWagAA4tEP/2Zd3HSoadQVmJWwKG6/\n+tn62WVCwjlRJUePd4Ca+vJBlJnrqSUQWRZLhI20YNMFCnKGXK3IL18mSdeP\n4N47s/lsdBRky4oF07UTan+9Ky0UZcYBrp5ipLijBRXIAPgDLY1GYXkxXMWP\nc9cdOZo/fEV45fgGZwfsB2P3k/KukrmTvQ+ZmD6tVIaLW0x6kxLxbKoFkiUj\nkiZQXWt268elpJ1s7VJYfnI5B5N9v0bJMrqYGK965eJsQ1MzhjEAnGkbtNCY\nuzYjJcFtMOBqEWjnjHL4EiwfIKw3AQfDQwkJaFNxHy5/5rYEe2SG73bUXN1/\nU4Q83AIfI6TKOJ2YSGz2mHvHHTr7HWFrD/oQnr1GJ5D4ENbQtQHHOaCfC4lf\n23dzmZo1geVpNFJOtFZB4sXMEQmvG5wUjYWnr3TL7o9JuKuP8H16T3DWaLZg\nwurqSeQeTx4z4SlB5xpIAVQnqroq1qlnqNZKUX2vnYMaDrl4IM1RI6uaxHmE\nlVzmwnfDI+xzt1AKmPdx3Jo2bDuDbyciWkG23dyXD89ZYt/OWHuSnBPnfmLX\nmBNWe8PT4KD4dAIIehq6CbK7a/46zVU43z3VqrQD09NadL1Fm92Zfskv+5EA\naAPUPjVCT6VEtk/GZOxpf5z/9qq7NEqVsBCyfhZoIZWnVv85RGavhQQgcBux\nv5yM\r\n=hh1y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrOTEwSLgDGsfvjWiCh0LiA2PHOU1gV3NN8dwLIoEnzAIhAOliRRuqAXt8ZcGPanxgGPkkqDFrN77o6U05aH7GL2aD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.b6a60f60.0_1605653564945_0.6077410258197133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.71cc24fb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-icon-button":"0.20.0-canary.71cc24fb.0","@material/mwc-ripple":"0.20.0-canary.71cc24fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QXFPC1Bbw03sISrUw6mXKeU+iSeZtKJ+3hxEvpbNGycYyOZDKriuuCg38lcXpcGsucASQ37ZjKpLrbcxqCxMNQ==","shasum":"58c296c859d05ae8cb850b8d2e141761bb3c09c5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.71cc24fb.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFn3CRA9TVsSAnZWagAA2WMP/j76G8SsmSCjHX/vSZGW\n4pa9GCBle5FvH5bVqJyyWr71dk/skKUODiVn5Q5m1SQa58RfnlvGLm8unvty\n0L5WO3EDywuilvblPUmlioTmBanR1wsdZTAcw17wi6tOhPpZrijgb65sQYtl\no4UVSZds6cxb0xDK7rouDRtWORIdP1bdIHPtqPH012nd7MdW04oUK4A/91xP\nMx4ygM/AxZLQ/zvtFfD6nvG2fOlM+uOSNbI7reoaNFZCmCHeEwHhI74la+tR\nwB9IuN0jYzsdB9Nbo52zdS36MVR9T5qd7wfGqUx+319Rke+1WwVxQMTRWRjX\n9oOt1/1l1Un3YNr54H94H0qm6558+MJOJR9Zn26JXyUEfHoxfqK2Xjn+aVRb\nu2nJYy9W3lTe9PMJjkp6Qe6d/qEAviUZ2J/KgKcPFS3IB2l7V9Y76ky9Y+ZN\nlGaDoM8/F3lsE/b3ejM+9vrJKcHZ2bpXggJxZlG7Y3kfEJ9FSI8AjXnUmFSW\ngEdo841cSCoqZkOGxLfGRKt3g9Z7Q5BB8tlGalBCQEckJYSfV0cLWWxYyv8G\nWez6M7LPXXCqRTRFIebvnypDvSPkN4dThcdxPHywyovYpuBPAlfwPgYptCMc\nHxzJbA6aYhqZA/vecc3agm6eV60rMJFFUGx2Gy3nM7oOVb76LbZHbevtClAd\n8daF\r\n=WFab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUBkUGqn5tKoCZRGFU+ki/+7J0QFdlODI9U7VRuGhTkAiEA9NLPLSl2Sf1IOmaAZHmjtuBV3+iyv9x2ssNt+KdMUGU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.71cc24fb.0_1605655030945_0.3346278138194245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.761027ff.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-icon-button":"0.20.0-canary.761027ff.0","@material/mwc-ripple":"0.20.0-canary.761027ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8C3sd//oWLGF64mm4T7ob8R5aREUi2aJH+/YcOuLVyT+xZzEOq1hwg1fIKAI+4Et3LuEmZH4jOOZE1GEbdDuoA==","shasum":"9f6c76ffa43884d54594b38b2a8edc4927809878","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.761027ff.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzSCRA9TVsSAnZWagAAuSQP/1Aj4Tli1whgErrNEGov\n4Hpzx+Jp892/ry98VOhifBBZMdDcA70nyumMHNhxzPrxIwBeqqSIGmejDMHK\nk5/bupQC0nDRZxQW/CKxkuexcV/AzojyQyWK3HCLZgdWGw9zrO+p/nCTJivh\nucMOXnjOz3yMe7SnGlK2+hdJc4AwitYOy8FFjFvhVjBfUQi3ltZa7NL+NgS0\nZr+Blib1WsaagSBJh0ZV9uSqwKkXzSeVPBh0UIlFLPXLfNFLEAV1XnoZTlIF\nN7tCGKcxBQYIfmiiFHrCoIzx30+Jxn6oMKLqRnUdnWqUADWCbh1YSJJlbt6k\nZGp7wnI+cf5U7swYqo5WoeRdjUvG8Dm5BL9ekqBfspcuLCb/sYtcncxudEdf\nt5oIunlj5vBxYHCtsinQH1kASz1qbxmk1mx4VbSkCb6QU7s80rn6ZmRKNZxQ\nTcUeRFgpZ/ZhR2Yf/qvFd9wGbeMonBKmIj/qKVzQyjpbUnAbvTyGqaXesbUo\n4x4uGklI9wnJDQe+22OEZF6K2ey/IaZmGyaKkq6RFWjTKPRgsh2d8u0YiEOI\n9WhfuQydgeZMuz9bWPsJXI6TDgh1xC6UCspPOhpDc983rdV6XyQBHnZ8mxr0\nsoDn1W7+QJPvJTv3Blyqngk27G0z7I5qRpKpzvlWCUmAX6kRda2wr6816a9E\nr9Gm\r\n=fuaq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRQoPPoaDU8n+Vrj3dyVh68C5tdhiy6TOmKGCutCHNBAiEAh136ExpFcRXC7lnTKwEKf+qHM4a7100CUy8JrEcYBZ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.761027ff.0_1605737681852_0.09826826276639067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.dc93d04c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-icon-button":"0.20.0-canary.dc93d04c.0","@material/mwc-ripple":"0.20.0-canary.dc93d04c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FnD2PQAmc9QFMqkg1dPpTA8NcOe8WJ4vq5MdH1gBeb9hibdoiC9q81iXDhssZrfYlu5zv1I+m1/EQAT+hPtptg==","shasum":"cd95d011fc740f9ca077a9345913a73b884f80d7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.dc93d04c.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4nCRA9TVsSAnZWagAARyYP+wSJ2tNvfXYshSJHTghl\nREsEY7rSLMduVjQ2trt978mfb87p/BCHsV3oNxCrH3X2QauCNSxOC8Zen5PG\nsa7R1CnIJ32BBuKucPxowBvSJntyNEHeGdsv8CfXa8KVrSUInWynTr0lwSFR\nKTlp/3zZ2gXMKq3QzebHJa+7XejEv9hmlErWWL+lqUSmTzh3vCd52ILgAoKO\n7d2VIBreS9cRS5g72Qz+aQnXeoet79IKx97pme6AyIpyX5OcB9MUEtdGm33D\nNlknS/xlq7M9qHTGc1kE4zEeKEIqI0JDOn9pjVPD/STR/amWNaQU31/Is2gs\nFT5LHmCxyqjCsh1EqNlx9j+ywLc0Nd63ubo5PQYRz6/ANRFFZN0yLHhjE5Rk\nRaaYi22huQ0AeMi0k0R9rmAodJS7fSTwE59OIEIfafVhOQQ7/zpS2DoqCotU\nQ8lgc48sj4qCsKpsyOYQ03ttuLm+5PgdeSwad7fOY6TxSgQl6YZKBaz0XZeT\n9wDeNJAO7myboNdy9ARPMKj+nOYJ6xz6IsJDhad/rEaU9K/hzgDVHcesNT6r\nV9N/8WbKqAPubAjW4tbIcZGOk4T00JFu1fjMyK+72BEH4JjGOCK3pdpD9W6r\nprIQ+PaOC6W6JjAtcQCHh7jZ/voOhrLvGKvM/Bgv2851buZdOd2x0NKRTpXx\nvPlk\r\n=VI8o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfPXSBVVWqPMF4FfHNuJuMRgOljcVZ+fCLHfFgWU9H1wIhAPJFMewyvgI3aO9BLBzge0pUsd1JhdQFksXTPyhkAb0t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.dc93d04c.0_1605738022612_0.5145119171218822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-icon-button":"0.20.0-canary.4a5d4eeb.0","@material/mwc-ripple":"0.20.0-canary.4a5d4eeb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FyZS8KzovabUdkUQXkBcMxn/P4JEO2bX43fCz91gajLrQWF08ZXlnJzFoBUTv1DGc+4+O5yETiy4K1QaCquFPA==","shasum":"0be9efcf3940283838f220ec0545b28f0a184865","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftld6CRA9TVsSAnZWagAAWk8P/1UNe0RpDTXnyfOjKk/5\nTzE96oLQ2aIXSFeHJY/Ner8IkSCPg+GutaOE/BGyFczeqMfS3yI6r+TYqW70\nrh2SycCInWadsjX5DR0cXro9vIlQZaym/l8FcjDjLdHQA2b7/Yorfcbdhwsl\ncwoIR7p3UNvHnd0ApkSahDWGvvyhpdRmnpLFrst3oXTEUBivpctr7sAlIyo7\n2Tu4YO2RnmKE/BUDDuhYjomQmipufCg5vxJ/WIiAx4CKzzcbMZgifuIsvy5u\nTHoXen8r34B2q2hIDOTkKkt5biDTws9umaAzjP6kyKFBUUJEtQF6LWdqqifp\n7zQh9Eqa7C1FFWN/sv9i2AGAN00NzKGgPNZwRQOBznT49joakD5rcIAoYlaU\nLNPrn5s9+vPvGNVvHjsgtjLO49bzlobFIbhXB0oViRx5xLhgJ2DG+R9uawpp\nEULacP7lGF9saBMwptHEpf3jRAiXMZhnF0TgPt9GDQhGan80zeTeUsI6L8t7\n4gPI8Gh+S4ANfjyCKow9eCmyaRPKF6UffLckjGtLQtGJhqf0ZhNymKTUCv97\nOyhAgwVmYimlF/Sklcvz/ALae8M1R53qQxwybkA4SjjFQc/3W8Z8zWYWrJ1T\nhTdkkWblzaU7qvR6IGukmSQB7ljhssbv/dbKLp4oP48bFIv40LMQ9KDG1ZZc\nj83m\r\n=1y10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYrJVSL7aXmfaS+Xu+1t++npKCldyy7IzhLhvXjiusGQIgYZOmhR828b+C/SSNYi3PZxpsTtxS9qaLtmYGQkTtQC0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.4a5d4eeb.0_1605785465752_0.7583281622500673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.bd176a15.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-icon-button":"0.20.0-canary.bd176a15.0","@material/mwc-ripple":"0.20.0-canary.bd176a15.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-poDil6035m+XHvqLLxBdQMGF/bVR/bgmZgol7JVG3rvvgRiFVwh+KhwvnRPvJoMWQckS3GF7cQcp1/mpLXIO1w==","shasum":"201906b0f58e2e84fad68dbad06c3892ee7c4f74","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.bd176a15.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsNCCRA9TVsSAnZWagAAwJcP/0OpJWAAq0Aq3rLdrhGu\nPPrbNcZ+wjT2M+YO6/WUaS6CtSQhUiOC22TjMR0gW2oxTMxTS6EZWc33imtJ\nf0lhsN1RO5Ou09LjrWW/HeHzW30/oKBf7E59iT1gi0mO5VDxkPz6LoINovDi\nV7QoFFjCYHKTSJlNBvcQ65GoV81LcEtygQ+XgQdvaMCxNAWchGQtJzpW/30X\nSNgl91J3pbyWVwnd1FqiZ+qOUKRXGyNeLeQbrdipbguWFCa25MNeT52cn9LP\n51M1O5uIiu4fxXmQpA1EYPu3ecypTor2msZQH2Mp7dOD87on/xcA8eSlfIuQ\nNETFLsDGA1w8yshWhAJg1ohEE2oUfGrj5TGuKZCHxtTc2IfKIl/Ch4wH/0hm\nbcwtG1A3w94GPjhQzW/YhdBm+wt/BRB2LmdBp98WcSQepNsY9USEQ8I6Ok5i\npLiB5dSm/9VNv5ZaxdW6zcAoAU2tTOw3KcQn+eAiWHgSHCmO9TnQKX/bN4TQ\nmeQbo/oj0jmezN852ciseFTQCVoXtcTXKnfKsIdCQsAqMMpbsSp2LWu3p+G4\n2q0EeQ3ZaJGoaJGtFtkgp95C2JFuaTuA4iF0y/dgOk8sGNCLZ3pP+UxR8BMe\n+P6K2t7IXGOvM+6ms/uX8z1mYrtT7sY2SdcvEdsNFhsESr7Q+A/dLx8ybYEH\nzdsA\r\n=PcQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZUkqXV5ZXtharmoCv+6zO+yi1zYCgZqjgU3EdjbB3vwIhANOSEwKAr2lCpDPH8mTHdrW29dF/CM5WDFgW1/MkNaNb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.bd176a15.0_1605813058473_0.12114085507012007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.e85aa60d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-icon-button":"0.20.0-canary.e85aa60d.0","@material/mwc-ripple":"0.20.0-canary.e85aa60d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hs9ijwMZnf3+itEQQJ9h7a5VUaNTb05vd5dSVu5IGOnbiKWLuTgKthioCqj++MXZT90KtFdJ0r1MThFzTqbRmw==","shasum":"0a446e7fd986882c5219ab6b2b0094028f6d6167","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.e85aa60d.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbNCRA9TVsSAnZWagAAxigP/iJRsQVBei6WSaWMNans\nXF5p7shAsizg6+sOLFTPokedUFgr+tNQq0QoGT+Bva3eAfL6j4n//YeLM5VF\nsUhOHwxXd8cgAC6yx1zNWGv5r9c/8bBq7dtCwJ9glileOKOhacYPa6/4RVX+\nAg7FxUMkx4AUODlEJwCAkVTsisyDRkDJXPyPlFPyguf0xlHPTpEMR1JVwMjJ\nQKSP07a4DQsEt3eSd72NG9nTe556mVQkLPjTyUbuu+aDxZoBDPjr8mcf4OtZ\nh6ngOZBEr4uTzJsYpUSeJtHORvFioCS5aZG/gfcREiFQHPj/NehxwVCkCWxu\nm98VZ9DbDbFE/nQlID0rsd8t1z59BLxdZTgJ6s/GF4EJ8nE7aH2ojoCJOxc2\nOwxE3Q/TFvgQUla6EWHKYUtzHsyxxURJ4ZzE3Qy+cnizpa1QaqzKDy2SHHTV\nTZQ7YYV2KNsRo5/azyPMdE/hB7FmhTKNC2GX+7p6e24HPS1n1hN1d50iV39Z\nSKKi7Hr57WL45e6myc2++aU599sWR8HxW4bD0DhcW8Sld3lg3+w5YfoTyXsm\n86F3EyNFC/VQamFX7Ote9S/NQKS74gamIof0SUuFuTE77YY7qL4TmZVtWn4W\naZ6+inoBr9+7wzz5k/W8AyI4DM9qnSCAg3sxiG7k3lz8w/xpDit3EWSB8vHS\nUUU6\r\n=MqxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkdvsndhHuJvK5UKh52Ols2dh0xgas251nWp5PJaXPvAiEA56hIkFCMctXoheNRgjgbSinb819Vm3N4NBrBRlKvDvA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.e85aa60d.0_1606170316649_0.41298008894029437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.72092360.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-icon-button":"0.20.0-canary.72092360.0","@material/mwc-ripple":"0.20.0-canary.72092360.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nQKUZGNGRBktqAXJAhgwkeV0GKxwWxtJyauHNNQC7Hgf7XtShyIGM2+Pthh42v8OVZFazkoEeyjvOfry1lt/Ig==","shasum":"e3df1076b5bfdb0368b8754f6c8572ed1e409b01","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.72092360.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImeCRA9TVsSAnZWagAArxkP/RVdVENP/oDzhp9LpKUb\n7H19rCVEUGTlK6YBHH1LjIPKwR0oH29q/MGFtSBcT1+SYEuvdgh9HBiu5/YA\n/rjMkjhqQ+YOol9R29lG2UsqF3kmdctpg9jJyUu5pSVqZlEQNaPnE+OgWK7O\nb/NkksvPHp58Wvj9TX0DfM51aRbdEQ+T5BhthJGlapkdZTJWtS+18w/uTBfA\nWgdBGUFo3UNF4K7vmFN0Z4WYa+73wLalmF0WEd3MPRe8ee+KKa+R2SqOka0U\nkZT+ntYLBM/4bZQI3w4EZnSOo0hQlT3WcdZ0XL42jpR6cgIoh2veNK+CwbZl\nhlDFDbc1Ty2CJ2sZc1fBXG2Kx4yGUVTrqaWoF18gocX6/boDjoJUyqHalRL3\nI+JFbcHVd4ut9zDEUNOHrlyZbAgJuUV/+Om/GTjrxMeChCWEwYL1NG4bM8Zw\ntJr9vc44MdUjmOdpn3P0yWVYpS2Ov+L/+FpqupHAwwWYlUauPdDcDGWj7OvN\n5zuPYcVr1g+ZyfoVpOLmIrIQz++oM3hIhy9zxr8F5zt+2fM/fsfT81bNaT2F\nttSv9PosDhS/NGkoTc+BHaGBBFzTT7b1sWQ6lXob6p2andl6NUJ9xpsf2q1C\nyRq3mwM0Aiw59Ac1CobTdNtERg4hBqNsdkSIWklwYVRcZ+v3hCf0ZOOQ7pyu\niK5+\r\n=KKh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+iWB5zJ5jPyO2RI7L2/LscZglc5/GgWmrYQX1pHiBXgIhAMlM/CFx3ylCRlvTQFZm2FEUbsKiHVNpvVg+gI54fRWo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.72092360.0_1606191517588_0.9709278791123956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.baf9d39f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-icon-button":"0.20.0-canary.baf9d39f.0","@material/mwc-ripple":"0.20.0-canary.baf9d39f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-N0WaV+foxYe3Ug50BnHDAbms5IZg3z0B5OyL0TKlKD/XkohTq6DPdt702p4Jz1Vzn7IsbOYlr2GwWdOXgkbh+A==","shasum":"e80c821f168e94fa675c7c9595b1fc20ff389c19","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.baf9d39f.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtFBCRA9TVsSAnZWagAADVQP/2pRMlthvVOsXtj1T20I\nrN88lNjXKtFSD75t5VD5brsUzNll8CG6LPNZmxkfTz5HBEscOLjNHhoPpkjk\ncuBT3JYXNgwU39/FUSCKE4fXzvkQmlUwufPMzRA6u54CzSy8byYRvfrQQ6B8\nHCbi6NaDrutBeMeENbAw90MuLDbSNJoT+q4NxRFwzLKkoz4KGl8rKS7Ga+t/\n2/OCIN+Zec2vCZqMSvUzXGd73YD3GVvZAV+iTWyfUAYSe1AiSr9Dwoose8HA\naUX81zTndEhqbFJUnS6/FMwIs1/RadGgE1VLIHgw+YfzDgSt5ZV4iZNqzoD2\nksoC5d9bKVQofmjuZP/XW7A3ruo7Y+EnhATv/k43m5n9Oaw9dlMh4lhMWLG6\ncLyP8Symkdm31j+MKjR4LkxlM9xiw493S/vbnOnonwj6LvTgJcG9NcvJS+1O\nYxuyzGvx4yOrsne1W1GElGMq1yodqLNV2WOgVOQSrgz98m1+82+kvLAZiYY0\n010pBliqJ67QiaJDBByOSgQUl6+4i5Zhibj1sMzyUG4dfvJs+X4gqkW6Ujwa\nBoAl5Egg8jBP64BuArM9LxBlf4fXgEzb2fNciy1aAA4vtn2EQP+++J4m9DYv\nH3YoQILTSiX8luxBVEK//E/OxKuKk5ERSoo+F08nQqI/Gzk0MjxreFJBzDkq\nGP6Q\r\n=UMNB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4NUYu2bZrw8ADhQjrSy0D9FiJFpul7Ui9viCUaZtrqQIhAMwj5RnZtDabgHByplu6kRLnK62yDvnA4FQs4iuIu/HG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.baf9d39f.0_1606340928885_0.052458887578682445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.51aab0ad.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-icon-button":"0.20.0-canary.51aab0ad.0","@material/mwc-ripple":"0.20.0-canary.51aab0ad.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TXtOgYRgcl3mmkm07hl5ZYaUYTxmiaFAbsW54lQszakYhygWizCEn4geYNkx7oifwbKPslPBkc3dUe14DBkMQQ==","shasum":"b1010c4b7254607fd1b8954d51d21ba2e2b4c9e0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.51aab0ad.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbrCRA9TVsSAnZWagAAD5IP/Rj8tULOPGRw0d12xAJe\n0STIQf4HcEdJMJTQZ2DQVgJZfOXflVQzutbbdqK9hItmp8I+e30zVMn/W20l\nvN49dgrMKddVGUkS1kwnUt1Ev1vF58yVFf0uvB7e21IscHeqdvvWlndEttSZ\nKUC7GcUekrYQMb+h5YdvXWHzFAqjz3SUzU6k7rEK8WGvec4lV11ruNsRziIt\nK0LPP0fknjbg0gpAA6l/s1D091d+YnZb+MiME8OedQm7FwL1AXrHmbVF4g4N\nHR8wI/CsZ0Ml5CDcHT0tW/A7W35Ud4/LN9PJZwuXZj+mY0DJiLrx4UG31fm5\n8ZRIE7Up6G1txCU4wA93LMERSe+tKe5L/aGE2s1B40j0Ibvo6J+dkJcVzpFT\n9N7+OPlX2tOpGyLWPRPptT7Z3JTC9q44vks2nUP+PCMjCCmuEhAobzijEMO7\nzkxKNTxjZlUemXt1UoQ16+NZ+dqyimkLk/Sa8694YFw6kuHjI+udAKm1k7IR\n2bXpL8tNHEneXLySqIUP5GwZcvwQtKO+WK5apFyhDAkx2uNr18BnRn6lrpiW\nHM9DulN4Vdnm2+3UmGfKUoHgXTTVsPVxnQ7uAk6lFxYVPiyRUe6M2564QCSi\n5w3CqXlqfQTqIvtxCa1lk/Cf8H1UqMncZpYCqpFiCGQbJYZi/lt0W5FBiTHV\nv0SS\r\n=q+ny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6nuBzDCpZPIgbP6IiHPSpvQouGEwonqAjcOGOQfoRbAiEApgOKEjtaPhjBTDnL929vuOv4rRCfeZs8dBZikZDF5WQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.51aab0ad.0_1606784746578_0.826450513746301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-icon-button":"0.20.0-canary.8fd4af5b.0","@material/mwc-ripple":"0.20.0-canary.8fd4af5b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p/O8hz+gogRtYnd8XT1uiaWHZ4CiAvN7cr3kTn6YU1fWnsniTp8YzfjRbS0mKfrQrVa/1pLwy7m+DMJ+VCccsw==","shasum":"659c7796aa3e41def2ddfaad43131eec11d0dfc5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.8fd4af5b.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDD+CRA9TVsSAnZWagAAxMoP/i0Cnn7XkCTOaociUhrZ\nF9jXaH1BV+6EC5BXlMoQNuXAEF8xzItpx5HDud07+JVU5s5zHh43KfDO3esa\niPEJROtrL9CQo+lLxahgPgiRiXx4Q/n1zhT0Kw9cAEZ88i4fh3cAHaV1MfgJ\n+2C8nFUH51KkA3tLAuE/7+KyTg/iVVQxl3401MhNLvQfGH8ExOVFakcovLmt\nIuO35nRvUbRGJ4COsDsgodyNb+J6SxQYjxBVtcCm99CPPMbJ3jnRrSpf6Sr8\nkGV8aU9qcRLT2HUyBsTi3ryo2/LEcGR3h+KkMApTwaPCk1h2O5KS2+YnJ4d6\nymLZmszdfryXU4OZx0ZSzAg8fYJ9qnAi/VLvIP6N0n3IL67E4VSXy1qLuPRG\n/Y/EzP9cbrneQcJB61r4sEntgkB8v54Tu82LyU+kPjEX2BVsoZP2wY+zDVaC\nN/3yunPBoMpWkiStPRscpt2TvrqINIj9AUKmlBSZ/Ob8iD1YVf3L8OUUf69r\nQF1QKrSR/uld+tHjUL5QDngOoi3jenQjHCWJhbuRSefJV3AD0BkrBNtZOOz9\nnCZ6i3fQI1kWftgB458rbUVKBzGdoZsuN8m4bvOGLnJGrKVgK2svoMgX7mIh\nKEssfp03i9a7tI5xCf/BdtonAf4/ucf3p4MaqLdxBELmb0PZiR93z1yT/zay\nchk/\r\n=PM8Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsUm9H7cZbUrjiFc6QkHTQshzR5INlrDaetASpehHeqAiA6vgP1bK4fnznMOngJJYX6fyCuk/9lDwpyn8/JWjXb/Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.8fd4af5b.0_1606955262343_0.40647299840377427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.26d14d2f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-icon-button":"0.20.0-canary.26d14d2f.0","@material/mwc-ripple":"0.20.0-canary.26d14d2f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VJ0eHvmz5uVvkrSHU0r0k9Uh0pJP9CnP4vzv9aXOqWDzinRdyRTz2M9B1E9U5i+z2yKNVIWOsz1/HvLB1HS+tg==","shasum":"40ccf99d7d96fc4f2e977a4b226b0e1f41ce4404","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.26d14d2f.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDe1CRA9TVsSAnZWagAAxpgP/3IUBHprNmyK34Tjd9l3\nZCPB9aztWI88kjsDrv7vg/ZLMJlTM0dICSSKm+sVh7Z1xvWAbzvzDLlRlcfD\nMAXuWG4wXMb/0W+iKxjXn/Lbae6Yd9FGqsYkC7ig6ePKmYD8n/K3X2psWmS+\n2qNOEPjmWF7hyJTC31NUEDd0lJHyyceM1lrJOGl3xNJEGfrDr8C1x/j/f5uY\nwVWFCLz+WEIt976D19QBKvU1UcfRfyAzL6AwK1YGWbsELu7KVSaj0SgHhFUC\npfKDhsQYjiZKeYX/d8fLNF/OXEbLGt5PyKx9Bv/bYq8CtoO8Hh9pkpQ6ixuA\nEeSxyKmV7QYxfkMS2D3rHRITtA9wYI/10ZHGaiSh7Jsi+/1kLl50Kd170QKT\nf1UMNlEmVEfLOUS0e/abquG8hhexBjexuUfqYilQDC9rteHwzEzOzwLoFDzi\nj0aGQkxEqOA0kBKwHxpeSqx/G7RV3kpSxf7R+hSbH6nl/6LaOsf/wWZt/+xE\n5imE/Y2MKS0kXaRXedENIBOPf6/kgeJRaLPcP1u/n3ZL4VyJWy9seky5qXyO\n4XNxqJEDjXNJGiAGvBoM1ovKORW+Cjc/Fo9xR3heLCOg5xfVEj2Mhu+v7K90\n3yZlnGwGmw06qoOXWkiupu9TwwCAlGJuDRW5S5Vvq27HufnMCBSpWRsh5Cv2\n9uiO\r\n=lc1X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvsTC7uJXdtTXuCVraT5dNpTa7NYJaiDuEfrlxBqDwNAiAiPjJAMdzrGkq0GXD9wvqVmAMaeFUCvT6nPZWqApxqQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.26d14d2f.0_1606956981318_0.2999894959270708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.1663d7e4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-icon-button":"0.20.0-canary.1663d7e4.0","@material/mwc-ripple":"0.20.0-canary.1663d7e4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-PyM2Q8/i4noTEtthhz2BIWIBdmWmVPt6PL4bTk8g1RnVF/0d4IgOtIXzzYukvrmHRMzPV0Jed0zG98yBWhl3HA==","shasum":"c2719db6c578a9f34c76c755dcfac8b4f34245b3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.1663d7e4.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDyICRA9TVsSAnZWagAA720P/RN2QPHX3EcooAwtCMId\nI+79tTe1RtXunbZDA0HXGRtR8h3EEhaCsCP/Wm+LVvyj5szwkkWaUBiqegK9\nhz+XSvpk4gFWXMDy4q5j6fCYzKh5AOsy87cLCz1aGQcxAK3G/l6tdDwn9ZT5\nw6RqZNQaVBjBb+FIbPPBg2XJSo3MqJ83l6upU/M5WHv4pRS8IbSFqsh36j4m\nfoIgI5QJjUiniJlhe/V2vk6+00NEuOVeOMwgjnPJXoMB633Hlsan8xJeZhV1\neLkmVuNfoXxwWvOWiNQwqZuuVLNX7S7f0tvOy6FSEUdnQQi9+03cobNJeiIG\nBnMwIqX4KDllHRAyP5Mbu3OxW5VbP9MZLjdhCrDir1abeTU2oRFd3hN4QuGK\nduge8Tyiomgxt/bqw4cRtexoyu/Hj0RWmsVbTZKiow7T3iKLH+aUBsxawuMx\nSCxDYoMPIUj9ATIRYx4cb68s/KXUMreZlYiMXcKM7n9qKr6YzpvK4OqkyOkD\njirJOor4BdxhE77RcQz9JgQU8VGE2cPfUhDxpp9jb0Zv8Q4IDLwpCks4K7MU\nSH2H7zrQxEu+HLY4Gnx4shPZLAu6OrpLCR0BThhjP2inESI7lTx8il1Q1To0\nkryv4qzJVR3swAEBo+7ayJNZwUN/CxNknGp4/i9Fc4w0DpdcLX7beIpegaos\nLuRd\r\n=ofYR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+a81RfSb8yBHlh2LVOmhpEWkQVvHKw2gtxGDhzbg8iAIgW75n3UoklfxxZtXFUgHOAiqCrMVr5L2QWF/QQlr0Y1I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.1663d7e4.0_1606958216299_0.8136362970894968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-icon-button":"0.20.0-canary.cbe9fc12.0","@material/mwc-ripple":"0.20.0-canary.cbe9fc12.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9ut54DGsCCG+ZRq0uk7CG7uSZnagrsuRtoQRnFTqeaRitwa6OEKWy8aNwcBor2D2JASv/X97QXFc9AbryN3AuQ==","shasum":"8886ff7a659b3b6e9979a050ffec0a298479ef9c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.cbe9fc12.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTeCCRA9TVsSAnZWagAA5cEP/j4ssNCnyxT1wqkGrbtR\nLlLxK6HOyTHVJobdyCPZ/LEVZFlZnr8Jr4iwSIQAYToybNq7N4IsODuwDDl6\n4CEXdck1FKZ1IRXqin57a+QXBo0TovLlZMRwEjOSI/oX6h7Aokcf2gIcRCuD\n4dt3b9ar5iVrrRXRO8wMOtpTRYgvdN3bcVr2aO7QunbdHXMAvhXFtLiVaNpv\nkpgcE/8+ykNEaTUBlyscKI/1yzWMeiAu3CIKDtR+gMgMrGdbb5yIa9VNGNtl\nsUxhv3GratzcJ5Bb9a4gOvk6RPua/km7xxgUd5lKCJyyyIhlAl20ifO6ajRX\nVr/e6h3pNSzFhJBuR6z8Tt64b+Xfvj+HtTXeBfNPgeWjTv16gASRUlp48nBe\nFMRFQMahTifwxZe8MCqdpu9bxHgXcGNT3Ku6hbZm6MeXlKst0062N/K1T9JB\nWW2z17WKXxXZO/g2084i47LK5DyXwUPjwqNBKX0jU4EYMD7A/PX12KRyJcKE\ni8F3PnOR1OVIbTr/ST247K+qSKw87quMMB8nsI1U2fjoa11kf/F3bCTw+YyX\nakakhOT/QT1Is6BHsvTa5QighM67z1Wiw8TKgrOeIO2ZzRdGA+24adoaFhKg\niT0B3al5KSQc65HxIku/o0FAfidujwQ0AgnS6T80pBiIs9wC54F/R/b6VZc8\nsG67\r\n=hrmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEL/22+TlBn11/TWXhFo2QJ2TaocdyKpDJh7rDJHUbq+AiAh9UabGRHD6ToMn9OUjFhL/inswyrWc+7YzrJ/CKtYDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.cbe9fc12.0_1607022465527_0.7947394212421925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.9755be10.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-icon-button":"0.20.0-canary.9755be10.0","@material/mwc-ripple":"0.20.0-canary.9755be10.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dx21ZbqiPh7hMf6A3G3N/MJ4cKTUBmGfg7ike0b9QG3Ns9BwTIwX9jgFKY7aMjwjdp+0OVBskyy6ZVl7RDgBLw==","shasum":"7e97ad10231a1a828031fe1aed2db0f3e831483f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.9755be10.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTu8CRA9TVsSAnZWagAA/nMP/RxRUCAgx/ahch9kIr2T\n0TO4biq7AHc1ISIWkPQbChKGe614KDW+PfkMn12GYjf0DnIN2Sy9XhL7eKTf\nFxCdOgCLXxe31dBIuGGMpgoYI1B09DzqRaaj6Hm36gI8D9YU+IpREL8fvW6Y\nZF3kZ4ojvf7Qy9ITr3tKxMnBCRkFbhWRDPSkyXbLWBkDCUxf/oI5f2qQX1Yn\nXYnqkhBXygCys/B8GoOmWYXONYjn5iAcsYTd3FkIACF0T4Ijht9B7n61Ixrv\nKB5SV6o0Y3SwQn5PRhfvz9ILsgISl5fwsdVaTjHA2r3erKaM5M6I6wr35jIu\nN611Al99trv/Kc2GWG0VEXILViAOpGIOFzESvW62p92dHd7QkgOqspnv40LG\nHaMshw9YWCGB83sDzGbeY7enuBikm/1w6ut2soCfJFXZHoaG6g70wD7GlK9E\n4uIOwiH5P+5K3twMHdQE6peT0z8xRA8au8gR5ejIqG/PD9Cmh22C0bA0O999\nTXA3GblUHdUiUwpaRi9LZ5EHHoUsw7a90ZUJlN1jkpAt2heNAUN36vkr3maD\nYiYV3KU6wtMf+h2myGbC0yBTki33Qk3idRgmAoX9p6CCRDUrH77MWQ+qfuqK\n+HGcCwowVlAzgzWEc/MdS5RFsgjDc6Vi9l+EhkzWGXBz4hVitwkz6HYDygBM\n5Qg/\r\n=vOAS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqsCOI0JhCxpRpUJlyRBB78015ADHvAkFDlGaWK17R5AiEAjhF6UX1NkU5/uY4UoyZMSy+CpAr259BinzW2X4dfqyA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.9755be10.0_1607023547874_0.3219427140351383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0-canary.3f64270c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-icon-button":"0.20.0-canary.3f64270c.0","@material/mwc-ripple":"0.20.0-canary.3f64270c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8nhSM0TezZysXMkVHNBo5/Zo+07gTC88gdJbC6708lq5SeVofK9TzbrKtyWW6AkEU46QacXnkLC2eSNet1pQNA==","shasum":"33fca1d94c9a2599eb06f04e57e538367790e843","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0-canary.3f64270c.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2cCRA9TVsSAnZWagAAvdYP+gLHDyBWSFbD4K0z22QV\nL41TIuJIh9TpAnxQGiVK9rTrvEhPiBZB3pCauDuwOHq23bIE50KSQ+3xgcG/\nyGD8P2lCv3INf+FtMUCY0rIYvxyGPpB9ozbWbrOEncXH0roF1vqOOFxh1iUB\nEz9VG6TE+Z3zM3R3LTbp55RkTI9dPTRVE0ejAQ6St6CdM9IaF2Aj/Y6VU1d3\nvcn5OPkO5ZlM3IfXNbsGXwtY2PEe8j0QzVrRVOIJ0wwAf7IjuvtRkvOEe+cr\ngFwa/iCrj1d/pVAye1JfCsKdQvZu7wuMdPXPAtAREuSB9ukS8QcIf+qEhupw\nOYZdUjuZ71I8GtBNSaUMP5xSP+kbR4xtrc9dPzauQ0coGtGplC1kSkHVF4YX\ncz+7YWNjdoQ18GCwZ1ivBZrQS/Y2aK/N5jWtTlRyOr1QUn9kFpQ0GHri3nYW\nLgDZE16Ul/u7CsXhCWt8aIDIedDZmqqW8C0kmQfAHgjNivXjbvlOsTIeFTjE\n95P3qWTiSoc6YCtwO5pH/K+xbELMU2NMPx+MWLMcmkTQhy6vVrNBpCsM3DVY\n1oVSy96TbhHjno2W2TK5R/FMCm2wI9dxvMzD2M0A1du6GzWOtSLtnQL680Y/\ndbOXVM+LOooHSGuaQhuin28RX1tgAZzi5/qXU1XBecQzUVfbVS/ItnsQ4z3o\nXDBs\r\n=E0fD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnvHXUDXSysCLAglR4SUJIvZxj1g4RhpNd2WFUhCcsQQIhANL23vFBAjfS+AFNFnD9Tm/6YJHjlaUP+iKjf0LCuHmL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0-canary.3f64270c.0_1607032219846_0.8583626883089226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.d893b14a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-icon-button":"0.21.0-canary.d893b14a.0","@material/mwc-ripple":"0.21.0-canary.d893b14a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gXDkHWAWBcqJcniCfEAXb/TvDJcqYihpZmycmt14yZf9Ecz+KpaBsMXA7XihXTVODA67fy8nb55YtdONEf8QrA==","shasum":"6a01c44ea4fe756df19af1a5db8e23a3adaffbbf","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.d893b14a.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYeCRA9TVsSAnZWagAAblEQAI0uXsnTB+oZ6lg03MNQ\ns8g9e3e5VkkOLAmwmlrD51p/+GH68X7UwWoovSfSFR9X58z8ybzQuwdfq+v7\nu01gSyc2Eb0B+pkkXk4g0pJpCABOLtLsMcrkwDQNGp+BChZUObFJUrftI9nS\nJFcDTgau9WaYUAggh8deZ4JRDYQNoCWSvBMK0H1+D5FLEhDQYTTolUFAnXRy\ncXQrbW9AVihhhjYCj7baUs68Yb0mMmR+9wOLOxxw4Eh05YEM6auQW+kp//j7\nYo4YZ77vWt/zWnFBGVyDhV+ii0By1HiM8pXq/uroYJo0//RSrAQ3Kabt+wSp\nNBHGFJwoGbeYXMtQXTjK4Ttqnn9ecMXyKNTc31StRjWeDZTSRrYgrfJ7L9lw\n/Q5rO8E2aIy5/wzSci7Pfkh91ahwLeK+NcrsfucoNhBPAW8fwZue89mLgPAp\nAwyaAjOSygerCyVzoUaVtc79502Yb45kGBYNRQ0GMgZ6N0ibvjTG/AzPlO1O\nRCSsdSidy7uKkJXwU2cX6yhiXBgIYwnbd2BekQNSquz/FvOK5pR+reJfCHs2\nhckRY4s/TRRGUFefCXpqaGTNrbUcBLLjywFWV3bzLIpfEE5sMFrvkbJ3JhSU\nTN5BztJ1Ws8rYDlztznIpDuiB23saRGRHjfFohsT4oMNhRL9EP3Xi/ZC98u0\nq0/p\r\n=i135\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtP4d/dsG6B01f2mhiY0pcWqh8bwwVY0vB1HvtclyYVAiEAqs1qcJFJaprTP+tcHW+kwbZ4H6dg2meufjZslW9aYuQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.d893b14a.0_1607034397620_0.649531895483354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-icon-button-toggle","version":"0.20.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/mwc-icon-button":"^0.20.0","@material/mwc-ripple":"^0.20.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-vG3zbTeouRnXttmcSyl8pV/bXAJ2t15YdWUXIjy3flzMDHP5Y0QzbEMeBF9e8iCif6uuLiWxmxgAcjEsh0eX8Q==","shasum":"8ed5775eb045ff9ec87e197b3d8c3df5e54b4840","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.20.0.tgz","fileCount":9,"unpackedSize":40101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWapCRA9TVsSAnZWagAAbT8P/3nF4kUfRAjWiFY02yr7\nNzCFTVwRkhVzNp3mknYhQq1Qv6vRNhvvsYGXX+e0qjE8Ec0HMyk2N8Pe8LEe\nKTExcCC1jHkPxlBvbHUMjdqwheL7iWFN1ppyYlfUMVU+Y2Y3L80L/ft4+QOx\ner7LwQV6AfTIiTDcPlcvEEde/q+tjZf7DSxBWb+TrNENFfpnoQdcIFdn68sf\n1GEjZD7TC/cTxK5CzMli6uh5DdC4DTw7cIroa7kxHnURg3PPtjsnDKrmTpOK\nYPrRyAzn4x1gJKoreT7thsx7o1oj7kxSrI71UZqUkhd+QQmSc6kWddtjJKjW\nHncQYrk8MkEzPqx7wMr3fCs5jLCDUsFKX7k2R9VYEF01/jK24kGH4W59D7sA\ndevhC+scgpOKuJurk1c5QgyFMlFdxIocZPMztKI0HwqanaPFP11FNGKqmBC7\nhJ+wJzZezTw1FmQupFkr3RQm2xrHz7Tny+lwLQmjL4O7YnxjDDCuEY2gEgTD\nlsObAKWf/2qvku3jYYF9mnornwMJYv3NlYnQbpeBlJo36RXLnEjtYj5grmC4\nL36Xdx9QXHqJYNnbvOkAezWSZITsoCxGztn2q61UUDF82t2bFBQGfmhORqLy\nao91G+9hcYTljvAWRHZyMVP+rKqkVFPqVUfjQCVi8kAzfylLCc10KARMNZaI\n1Gle\r\n=tO3Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6zB5J2BHZcXpo82wAYiTy9fxNXuP7dgNMUR0+nnUKGQIhAMh71V7NOMl6w/3K5DbWspgSr/cDK8wLzRgnEJvxRHSK"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.20.0_1607034537222_0.5705301359117996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-icon-button":"0.21.0-canary.47c7d7e5.0","@material/mwc-ripple":"0.21.0-canary.47c7d7e5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-O5aT05fj0x0lFiNhxkN099J+A73VnVvu5JAvZCN1XqIydbyZfF9BwjYaPnmHIfT7B1gt19MuYMDDdleas/2RQA==","shasum":"2889712af471e3fcbbb53829b20942ffa81dcdc0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.47c7d7e5.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088dCRA9TVsSAnZWagAAjEMQAIZHV29SnorUjtNmHOB5\nxaa2hUelc2AERym8YLk2zGVl0RsZDaDQB7GFn9EVaBkOJ2kUQ4C3VlGX/skQ\nLZQut8TQp4+iEKhQLAfccB2mcO0sYir9J6dfptWmfFfKk35vWmKEBeLGQoXD\nhUynr52mPCZMc32mnvVngY7AZfhaaWWQBCvcRF7uCuGvww4tvrbKdxpscqrK\nAZ6nCBITRz/yOR5V6SG5uA9Uq7MREwA1q2szGxGeorysMVJXCt1xNlqfLMHG\nbpieEyYkD25M2Xk3aMw7zcXBxrrKBZYDMGDiAy52jTi00LjtLiUBAwwhNp1C\ne+5DO2UmHTcgvgw0mxV6rt0ZFgBJ6Wpq/+tCXK1iiN21QkWIDTtB9D0HLBrs\nd5p1zqovCHI7Sujrbl+GwsVvWRrh7SvoIXEgqH0kCqlT/wOL7VH8Nk/U/N86\n6ddyg/qTnT1c/kUCg3ClQGQjuwUJqHpkDer4dy6xbQCxb8/KDoH/9iSqAs6Z\nOBCgr20sww8OkAusYIQ+R7q/MCrocq/vo6BVZP1rYWYDUrUSt/iuRS4t9dJQ\nlO+FLkwF40rES5JjIhy0TirWNc5iVTgfAfPJh0LITd2PFUu3UEV58ks8PcZS\nygt+ZrOObhmFKP5j3BjmWBQm27vtMD4cGaHFrx0zQRXlpWbYeC13Ns9qraVn\n5qLF\r\n=w7Qp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTawe7UuHbE9qw4g9ZXN1vqkqmLQ0VSg9yQHrbiNKRRAiEAvAhe7y3tFz+mtlIadcpwhn+VrfVBKw3EJoFy9zxYd2c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.47c7d7e5.0_1607716637261_0.138021861102811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b304a78b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-icon-button":"0.21.0-canary.b304a78b.0","@material/mwc-ripple":"0.21.0-canary.b304a78b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-R64C8OQZtibnBTCPvTOhB55pkkNa/rbCsksKnxTcEJM891cSZcchVmxHk8nP70/ncu0EF4QQxp4R6CSYD2BuaA==","shasum":"39b31e4d9262dd2aab6f2ebbb2ddc2b46c37aa76","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b304a78b.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbUCRA9TVsSAnZWagAAHAcP/iIX6NXIK1i9voqmV12U\n738doXoEsfb64EAQAB0l0sFf0Ub0nG1deL5pszKecL1++zdGuEZ+/VILNekg\nW06+9/UTC+7GfhnWK4xGhYVreeGWNHAhglRs4hIuIdyN/3w3B+ECIqnj/QHK\nYGlb6sqCpwke/mODk59WcPBOoNGTpDAnaNzgeF41KBy0fZx0XFTF6xZMJ34/\nK1JCSKkGhNHSpJYVoU/AcM8nBaEZeH7xCj2yWB1sCDMLuORYws3cbtm0HvVp\noyN5osQNDaC3LWyXc+/y42QNsyy6Gq5HFeg9B6+4uo+8kp61IdWcbBpW4vVd\nm0rrkQHXZg1gH58+1V/HVe506tTZmTa5VSM99zG01s4QLZFKK6bmln36C+rW\nx6JYUpucJH9ZTtc0LbbhEOMYXgFEu/0mvQ/gvXYRXSqsOdNxl9AVLOaONrpl\noitgVXMp0o9WI63yrrw/IOieV0j+KvvEdHnmG7FEPyk59vsvQ3hWSCD1lRQc\ncs0F6GEc1A/S4uLl5Cw04fg+ypsg9gIwUyT6xqydH8MfCcdnTuaVtqntf7MD\n3xbA6bQ+J8eFVuyVrNAbXf9trwGZ930CBuoTyWBfkdNY1IcW8A8nL86tBkSp\nPQp7TzqA7P9AuIDJsKUDh5I8yn74GnXcTtMxhfbEy/WPhNUOSNZLAiIfxA3G\nqE96\r\n=8D3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2a0fIzD4AgC4kBQM8x8newuyLGvO3M5H1krKvEnDOHQIhAPkRuGBrWuI9F8gmquOHaAtG92ZkOKunRwzm++ne9bKo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b304a78b.0_1608062675725_0.4583141380822422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.777c5fa4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-icon-button":"0.21.0-canary.777c5fa4.0","@material/mwc-ripple":"0.21.0-canary.777c5fa4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DQC9nFY6nWsstRMYeBF1VuMEp9IEPq9QGkdNUWPedi0Y9nUGwlQbYU2WUoPRjwpcLjcqsdhQZgv3YW5aLenD5w==","shasum":"068a72a5680a1f92be5c7c1a363db5398b7e7ddd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.777c5fa4.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oITCRA9TVsSAnZWagAAYO0P+QGU8tqZE7UO2IQoNGTG\n9Rd5huH30DvrMRI03+mQao58V4AeyfrJt1v3Khb/tQLfzaJRepUXWMtMx93H\nar6uEgFD0pCYT9Mb64PTAnouSS/v8oYQd0xIHctOOjWTQIgieqJBE6/+h7k3\nShRtd1aKkiNjrF2xraqxR+Mm4dfu9Pvbl6xcaMWgx9Au7KOUwSMqFlbdstpG\nj72yBcRZa39ye1x8Eum7iXb1iTDYc7IbbXnGcdCIe1BHLgtKLK+klkjPTMt2\nGOGYrVyk2vhbf1xXaW0v3ub+o01qEnHahMhUVzZBQRGNBev3B4RJd1rQuO+3\nzXQz+8hjHyR0Bh7FZf9lnG4xA147dlPED2gNeNB9HebpZGULfRldnVaVdmFM\nb55k4iWn3FPR9MvwD5pY2naDcEd0wAMWuI33qUdKN8MhrILPvK7cELrOf42f\n0MTMx/kcF/fGLs90TIfJxv33Mz/CvXsVSfbUUnrnhDvbiSr03xZXN7Qi1EUQ\nGsVOm3ZbbcPVCZxVlYQpTOKZmg7jpjBYT2csMAxpi7+PZgdbKJfwj6xWcw0B\n14/qJIMprTMCCcU7DdXdXr5OLzjQFbymCzNoF5pwI5XwdOFSBVyfb9/bTiVa\n7AT6Xs0FKlKF/MKCPEKItixO8dKRuo7dONjzI8mBcuQladO8WFHhleJsLJhB\nie+C\r\n=limC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWeW/EGFSSUg+PnhfYWdJ+Rw83+PSl1bvI3Xmdd/e2ewIhAPKIrHkA42mLRJi1JoBfo+aKKkxrf/bmwWY+mJdgCBIV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.777c5fa4.0_1608155666559_0.7618139024286523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.635c7996.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-icon-button":"0.21.0-canary.635c7996.0","@material/mwc-ripple":"0.21.0-canary.635c7996.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XnOlXZJiQY/oCHVIWSoKRiLuHnXTQ9Na2gMnXplc6+2A6MZ+rUtvk4SrGfNePL7k3r7BpUBOMV6CFWC0YPt1tA==","shasum":"33ff168959a98c26a110d5fcd632b357d64c85a7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.635c7996.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+qLCRA9TVsSAnZWagAA7YEP/RxdqC1qK3f7DOe8RFIn\nAjFB6wWif0w+k0HHz/h2IIjNT/Kv/N2xUXONaQElEGDuqpEio1f+cEcafGl2\ndtQfkTZM6IRLzmPwR9NTnfwnkY3HPXDfYI/EQHII1y1Fiknje+CYYLk6/0Sh\nOAGQ16Ob2kYUwpPEqMtPKV2mwIL1yKdi8Tn+4o+yaTnT0eJ0grR+vXG+lDU0\nC+1lAkV6syBOdeHCqc2pxQ78nw8k/4q14ve+MzJrkoyFLy7jrZ5GP0BxlgmU\n3ApH0Orrc2ErigsGaUZKVcJHqUu/5ODIAScXcu57V5C30Zk+xcbgXfA8Mxtt\nukJTeJipjokTOA4mWwq930jgXV+IT+Du5QxK5OphlynB7lWMtzE76OXUZmUa\n9z/stBQ6fLL+O1tADZO3IATQLy3iJWLIpyNObKaTCG3H7jKLJYCPWjBoW8XN\n6HoayWXhtJAZqdMEOvJMsfuDTJS022uYtLC1FW0oeu+SNP3o++eCclUMY+fp\nzh0nu4fMtptdrI3GhhN1UmL1BeOMYwBZ30x+IGI5ryy/c419gTcEMSTS0Tyn\nMMWqeorG0/NXYilektmy7e3nDtciyl98DWt7Q/lnCBId3iHATb1Gc+ACH2Gv\nOzOpPX/pb37Tvlg15Fk9osDjcZFyxMDkDDi5rzS/cXi4Q6eLzA8Ak9rvPRjF\nedDp\r\n=gDln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAQbfTk8OBbFdlcS4M9HJqrNP4Hs4v5hjhFuFoJ+tlfwIhAIQFpmraKTos2DiqVJ0hsV95H548YH0sIU7ksQKKePkG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.635c7996.0_1608247947210_0.025613879639397874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.20b0045f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-icon-button":"0.21.0-canary.20b0045f.0","@material/mwc-ripple":"0.21.0-canary.20b0045f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mSUkm878C2UVEDHgbiXPHg7k68tMGhlt1lAs9uFwQQxiHLJuvpNVlEtM/EVxNcTcisWMnpR7AU4rWbm2S5Rucg==","shasum":"eb20d9ca658ddad9898b7fae101a036c554c9c7f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.20b0045f.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+6FCRA9TVsSAnZWagAAEkkP/AlCHyV4U0OYXjHg6GA/\nHmVyB9anCeEC5FI8eSz64Fgmq3FxmE3skyi9qEGBWkN/YF7kNCwBB379nr/5\nJzGqSvQoz/dKpi7S/ILNX15TOzj1pjwphV1kfNPvj8VdjSFhycY0eeXSZe53\nmf+00jz9LVTrcLxdXnhy2j/Y8ddHWPrU/oQ50uLQ32jnlLbNnm1XMVOZwB1J\ncbVNVHI/K/x1oZ0U6MZTcEBIuC81qijuFsGvTMCryl0NP88zctJPb9FRB1br\nYvLRRBBm6FyA2LicQY6J+ixKeOc1Xl4pslOI8x8+KvTAhSTHX2FhCr3gUQ/f\nFyl/Kc36qg5NW+Zr2tenlXxS9tTJF1DGPJ21Ryqp1cr+3YELx70MTsqooUqJ\nJktmGCe3T8ymPHKemQqYgy4jYu9G2pPqRZygqzy2vaGXuXw0k8s9OxvMplJ9\nC0L3+PR6Ad5Dyikcc1vr9tmDHyF4gFnac+Nyd4ViyqdAahx4eW4HU3VLuUdk\n0ClNW6kL3+BsBJIjnEq5Q/iFWe32yF4aFnDNc2fi2deRAnsRZsX62y71l5Ax\nhhE11Z1gPbTKnG4SzTx3Xj/4xsjWOoE2HO8U5ZH7FBGUi2fGbBuSjBbH+yop\n1nVOZ8q8Q6N7BZuJRb497/dWgRCBA44TXN2s4b5MeXE0da1QZ0pysz/TnVG1\nbOok\r\n=+nX5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEudOgSFdHi/l90IYMmTM6BfpM+clmt2wBXWTWrqkZs8AiEAk4fpiOFQkRHLyHHzC8e9JLvp9JsVxt2xu1wPeTBV5AA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.20b0045f.0_1608248964552_0.8961560181602304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.41f77000.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-icon-button":"0.21.0-canary.41f77000.0","@material/mwc-ripple":"0.21.0-canary.41f77000.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pqVEMRyP5FIbx+W+5frMwGDeKq1KpdcFAhgrwGaNtC3zp9tBydexiYOHXqUC4d9va4pcYDiRNxZBFiSlV3TjwA==","shasum":"e7cbf1b20ae8cd45fa39edf4b89bf2a9c58bc206","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.41f77000.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/ldCRA9TVsSAnZWagAAEzAP/3/LBwLjYwP9l24sEkwg\n5gsd/I/EpfQz1CL2ANpgG/3bTmdFIHei4nRtWjTzqKeUBwDieoO2ULAF5z3/\nyVZSLT0KnkLMXpBfx/smjkp+tZmPQU2Jvq9Fos4ws5YxGfSnt5de9V1mzFvp\n2yi20O2HahP06iHqSGFZfyPY8vTyj/rFc20Ix1KGKhJI+zxxydCjYevK+Tvo\nKWYvAn1x+SNPqrLE2Uvd5ftC//ncqU2A5TGc8bImcfoPGoZxJVsJkBKFiTEQ\nuI878mA0D9wDHjxY00CKRJBv/ok7Cnt0IHWKQ+DOAHmh3yKsA63LoUUEDmdN\nARHGBm4qvpbHr7CcLuN+lCGBfuDV9oE9lgDsO/riR0aEQ3Y+c9Et/W22ByTF\nQxGBgOMKnM4bmqEydgSeoS3kvKY+fJwVvO5LS/R35NoBQj1+UAeWVzZO5uMy\njHAPpSumFCPUCh90UrAfF9Bzpl5DRKVvvgZMOV57ok3WslmLzedz2DQAnipx\nb0rARwD92b678E4528xUqXA3JyZPb/aifNWRICkgLnED1VHdxLig7ABgqR6L\nHEYFRDwoLtydQ22P/udf79RAMpSzlXALMt+IuynnmQS+7cKWkS1VZKyjGBtW\n9dSntEA+Fz2DTqe0RLQ+FIgxDMqY4Y+WGy3gtn+SFG+SfhpsyjlL0SLWYgkk\ny4N7\r\n=STl3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEeRsDfor7PS+TFwrQqImkaaTceX/ufhe6myPE26Ob6GAiAcHoIATI0obgeC9LOr9sK9FMNczpUrj/bfrggXBtKIfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.41f77000.0_1608251740998_0.1419645193302257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.afe4079a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-icon-button":"0.21.0-canary.afe4079a.0","@material/mwc-ripple":"0.21.0-canary.afe4079a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1CxWw0lpwSbKtIXVbHALZsGWpGnJi4VRf4pSU9R4fxoyy7oAIOjLc2b4Sy+eE9mHidUzvPhqQ3to4khunyLTHg==","shasum":"8752e359215ecb23e90d8810e62afb55a12779f2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.afe4079a.0.tgz","fileCount":9,"unpackedSize":40170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9/CRA9TVsSAnZWagAAUf4P+gLNLOHX3oJ0bmDciwtP\n8WxJIqmj6LPGbUtSWdFe/nB1AR/iYNaT2V8vtJo1grkG9/YdnnTevqWPtTZs\n9R2VXYv6XalslY4dzAysPg2DB3z2wXAA6zUR1xu5wIH2txirrDyzEfeP/6UI\nj1mjyZIyIc3Fr5i9+g1R+0stLQVWeSiAjR6Qn666p3KoK4EcBGghTklVVEyR\nnpuBRLuLtZSVtWRX2bqMC7RpZXeaJcTRifvyNHLgp2miJwyrmmHPnaR7d1GH\nhG3jOWtm8GcTg9ZW+c4Q5PKOi7nJftKNivGLAYEk3jLCCfhbpqrQcrCbYW+I\nDLzNiuZmiv40KWynLIuJomiPR7V/LzeJCufRka8BALKzJ7u3F4Lla5osTIqn\nk+gXBuN5tKXzbFBllUmZ5/d2qlgKnNbFijFe3xaDd2eu18eAI9MDLYZfbnlN\nXsEPfUxhNbujUmsYLuHmmc95I8vrMRkGp6oadqFmQco3mtZB4amC7/LGDMuX\nzjj23tUG4lxKi0O1xlGRMfB3GX0gSf8ZirL2JtiBF6ioNAiblmWp+SZMmPIX\n0S7PebnEvYPJ5BRiCWLmhvmR65dgNJN/h44mpISOUSbk2h3qMRhm2vk+1cBj\n3s1GkFzFsrEwmsi35bT04XH3CB0l4IMma45fBPFtpdLfEvBMuehi/2iCMsbP\n3IkE\r\n=jGXV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGNMNygiC8wub5NI6a6fkGJpbUZ9GZ6WplI18VIiGCKwIhALAJWoRix/iQ9rQof6eE7C++mqvxLxEt9SFy8yTxaSvD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.afe4079a.0_1608658814979_0.6589152929078617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.407ef8f9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-icon-button":"0.21.0-canary.407ef8f9.0","@material/mwc-ripple":"0.21.0-canary.407ef8f9.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VIsXgTySQ9N3XP544dwTobN3M7HpClfg6Tp1vc2d9T5+EIOtQifk+uVXba0mERoMXAAKt0GCTt3jlYYaOA8SSw==","shasum":"84e0a2264317813a46fa9907a571d50d8a803d8c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.407ef8f9.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcpCRA9TVsSAnZWagAAsQ0P/RbqQT5wa+JcUI1XyQJQ\nfk7EkLTTQtSftbKmDNpcQFHqSxA79w7dRCdBu81P5xcUhV6VyR7jMehA4pqq\ncmiNXxigMEJCswzdsi3nzScCxlC7AB+m5qt6In8KiPxcc7suvLSPPftg/xI/\nUD/Ug7aOQbPO/iLf+EEc372Yz+mAnHLlccax+bz2XZW3cMqx7GVKP3JZIpuY\n9fyzjxTkLDj84hQs3XHr6FWhUIGwP7MBande2EhcfItgeI2iJM/0z4alXyaG\npP+5HuAQgI+UetTeXdDnHOUvoWfRPLvh3n25rkElkjxxYklKbQhsqWTfq3ow\nEFrFMjUcaD66inI+iDK89OXDh3WtpsjbfvYmTLXbQi1V6Vu1fU/12Jp4BG45\nSbd0U5Nx+szL7pK9SZJ8Kr/bxzwuFHgW+6z+1UApcMoOAc1VgLSVKRUbErgU\n9BUZuRaArNdSzDVdNOX7ZhsBnRdGRWN09ZIcnPJgHDoQcr57uoHiMMS1QFWF\nLFfxZm3Dejo/d0vhoTRAIW6YJulS6n3M3xyozLI9fZ7UrnwNqTf11df/APqM\nY1dw5ZqQUuUTY+No5gLtNI/MwezvoPE2Jq2KHlhgEI3tvNPeC7qBad8GKznq\nsHIK6NALAPlFx7YMmznq9W3DY0sXlZIzcScZaCx7ALZUYQYJ7xwZxD4Wu8Ng\nMDxi\r\n=z88Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx/JYsyEnsvhYxwx1oTIDtBqk5Szjhh1fGajJGD0uQUAiApxUu17X5h7h4KgvWRZ3WIlN/u2w20K3nyYdosO3/CnQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.407ef8f9.0_1609369385267_0.27507733500618725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.2e26e137.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-icon-button":"0.21.0-canary.2e26e137.0","@material/mwc-ripple":"0.21.0-canary.2e26e137.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tFOSByKaF60JYNlvMkjRLr5jBTC6UqzW62G/t4WtV4nNdnscvrtk/2vtn5W7+DxOPDIEMub9e3D7bFN8913aBg==","shasum":"939eaccff7fc14df9f654d1c2a1bf6aa907dcc6e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.2e26e137.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTaCRA9TVsSAnZWagAAnqMP/1V6Ix2s5tgNnrBOVNVi\n/yEmGdQk0VBkKpzEZKPLbroShgSpQkR3+iwIGXGYNwPpwCncPXdeTkH7T6fq\nCwPyTs4ipajzrPdHw1MY5nfHYbIs2bDQoNPdxNz3AXVoX8EYwpnxoEx83anP\nSENeKxSBfaVfCQj0e/aro0i1f/4woDrMcJFHVpCG5bNKx3+5QyqvIV9n29Vo\n5zKlWAoO/Fe9aSd9g2YgkPGgINdSvwyZD7yu0QgcjicdknjX0FICtCDy4ZLE\n0W30SkmDTJmOZnCsSTV5daFKu0WTl8FR/lYz8HIgGFIsbztfr4b+89WV5Py7\n+t/N3vixoF/9lQkRqnH+0kGcsoIt7J+uvPXOnICE8dRu6tCrO1/NWlrmeUl1\nZUB62k4wQJeczE0+U445z/Jlao51k5Rlm4dKIwxhpExCwN4M+If08n+nvgly\nmh08HJsOOkbnvJ/ITewd+I6Mrw39raPSRuDDAgCAw3/8FC3TBu5PPArBYCJh\ngs+6nF9S9krRMFwTQd3S8+gHyd8iG3nWiVlIBr3ecy7NcJkKZwq+W7BcYvqs\ntDUIWby6Ea+SOoR1M0r9mb37rU+l4jbZ1fZCkrSE05+lgMjR1FO/8zJKTmY+\nfdPzZVSsxE6x8B8YJjh9oth53qb88990SRiEf55l9vUzKUsmuES3GRuMAzTm\no08y\r\n=j/xu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxGgV6OEuUipIauUPpLUZY5eiZUlJFfVENOFuptrJecAiARy5qp1qOfToI99KY7mE0ac2kjK74b9WeWDsf+ngSPAg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.2e26e137.0_1609872602338_0.11662409950314223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.9009f6c1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-icon-button":"0.21.0-canary.9009f6c1.0","@material/mwc-ripple":"0.21.0-canary.9009f6c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ky7CMtKhCbp/4NpgzkKQlbJL0a590hQKtybW5MgpL4xkZnogRTtCiNEEBoQBiwpYvBnq/xrwslvX3ylUeIVytg==","shasum":"244955b605b9eecfbdde5f2f9d9d8469032c0263","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.9009f6c1.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LiHCRA9TVsSAnZWagAAF+oQAJHmxqCJXfntE88J8JW8\n0PCV8ZHdugI84JR+dnoa5rVXTjXYGso4HHjBktxhYjVPOfG/wklOL/ss4DC4\n4cKLj5mJg2uPD/ixiOwL8DI2BFTbWJva9WNZ56E/0x2BgZ2CSBNx7TQW//D+\ngDUeTVkMRJbywWtv37O2Y/GNAKRlzprKy6ZlY3qEkfMMe5iGspR2wCmb5lLV\nujHafFFiFJecOQ3Vaaq5DSYk4+oFUQ4M6E1F/okBrflvcnEOtkFLyUhmB1GK\nKZ2JcMJc2XGa5Bw4n+rsf4L0jRCSJuOXjibtg/721gDknEbwI3tnelEpiPGE\nzoOOxkHIvJ+XxLkHL8GZjwJ7WpSS2ENUnnWWhVd2AfpAgZhofLoR5jBrYOaG\nACQBfn+Sh+ZV0PfOETqpRLB0y5s/JlSTeL2llYFcBe/teqPA+4n+lT7tR/cG\ndPOPFMto/BWGsZzFEIMaoA0buTL5yR2T4t68QNd5aqd4PLuXGB8/015OWzuj\nDzFNdy8Pwyt+P3U+dKS9FH2du18r8jTMnRWvomJq2K8YFoWlCP5YGyEB0dnc\nlTi+cFXUjjb31pVhach6IuKZIVamH0gCyxUMR9g5JwImhlcGMnr6a3oHm3R+\nYdoIL0C3Zr3C1eE57yusCKkKUgFv/FKOYAUZn/hKmswxNifIVovzYZZhJkQm\nSHoS\r\n=z4Ib\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7jMmFikX4gpjkWgay7jQe/nmUX86ch1IeuxpITAmarwIhAMpkfNdNpj9lQAbdv7QJYDYRhO2zEF4/c9xJHBH0JGaB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.9009f6c1.0_1610135686655_0.44917853527535234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.ee99b646.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-icon-button":"0.21.0-canary.ee99b646.0","@material/mwc-ripple":"0.21.0-canary.ee99b646.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DluRxw75VMPEdIZh69GqKSxhjskgcjRPAOkpIQn287m7FaPKhjvpdWHdTZVk4zYE+RSgcuiJ0zsRwiSHyjALfw==","shasum":"02ac313ae2acaedac47ed8f7d90bbb242a0130a6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.ee99b646.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Np3CRA9TVsSAnZWagAAYqcP/1ohdeTABU3mlNKCrliH\n+7WyHm0IRFiaSSm8zIa6M2f6BXQL2eXi3TfK1tXoxbqWNyX7uArOBF4YPa9R\nbeKWVOIsQ7be8lrvXVwIoo9HRg7FtZwrB+4VMQUzsoTZh6AVoaAVzNo3y/5T\nrymCtWhHVairxY09LzIll+qTxK1v38M5zlfcE6GiatoQoUWeLdpcpCTZuqQ4\nrqVsxkyKkbKAPkBEOL7kYvP3Cn6prvwFw7Acbq1X0iLMVlG5XfaAdgEXM6YA\nwarvlylJqSY7w/FlKKZkRwbPTUtPtvH2Q9wgcQpQThOnzgXneN5yUd9s6KzS\n2C6I0MMaT3w62lC0Aw6v22jwVocxSZhD9W4/KCQxjFq+elLra/uglU8YJnhO\nUMZd94N+Q0sEebH7fv5kzY7XiYa/I2SDFrH/gJiPjZFdN1JzSKzsABcJay8b\nDL9eiCF3h6AzT5MXeVTLlmaXw9khga/3jp2PSpXXqNZMtZyl301EditXwQId\nHq5KuxkzRGA9UM7bjM5qo0z8U1PuZjtXytuZ5tBdaodqRKIx4h57TrtQQzVB\nJ+JUI/UKXvoNCgU52ggWFPZWeixEmAr8MRazlBJiRLmhlfTt4JAYgomsYQDM\n4rqaaBeTQJEUCE3QsdPBYZHp8hKV2cKmQVV1WLz/fTPPJWgILibUOq+c4dl7\nsHLp\r\n=GQOv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCkN2B/fyYoU5dAxMbwsBaIjf6rCp4PxQu6ZegdmbWlAIgY9NHkA4fXrkwZDQmXkzhGIQ2VjLdXMz+RRvQOm21U4I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.ee99b646.0_1610406519244_0.722630307506825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.740ed33b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-icon-button":"0.21.0-canary.740ed33b.0","@material/mwc-ripple":"0.21.0-canary.740ed33b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5M+VXZ26FttJ8M7lPmKACdnBxfmVhnBP9Qb/+4l2gIoyH5yLtbn0tG9OQQp0i3ohOdZmgxuTXbJdFyPjozrCMg==","shasum":"c02e64879f415757ec4eee211de957d21583b997","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.740ed33b.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSyCRA9TVsSAnZWagAA7rIP/3bjNfJHp0XMFzKVk82o\nuacJSuHEiTUqNH/KhWC6ZV2PqrUO3KH6ujDfpCu1H9RRRVbCFsyV1xXy6/VO\nKFuZ+b9il7+rHtJJ39lYLc8pdtfy9nD1X9+g79d1/XrrnEy0z/y+5NkT9nED\nedMxbW0wKHGWaB+GzmfbRaW0mfalw2fQ4SPPrGb5EKnJ1XwsFUAE1AZGqB38\nPN0AmmCPtJ1uXfwATKF9cUmf1Y6ChRO80dfYVcEvVh4QUyNzFQI2lDBjZT78\nnWtGxDZge3N+49hA2mPuYuYaotKY4DbbwcxQNEB3+hN6iAI+7NzsygUxNxC9\nuHkhE+rROTnIBt29kSkvGotjgNS53aWG4cGT0429QIYZJuyXP2Mq3taWT5AA\n8IJoaeQsZfXNnFCVwyV/0+RlCNMJMv3esoZFywfIyxISFKNfhb/h/DsZJ5xO\n1nByvf5a3jvjrFsBRDzudxO7g4gyoqLd9mbfiWCb6nsHy2+BUQ/UuXVSpmuB\nIhw50psb7mtjRQf6x7tbRKQjDmUwqvdklMAQ9pUoJUiphJ+MjMMkOKo900lH\nRi9+/baFMmy0U+5QTFqeIOV1x7DlurZsItpjwYA0HPEbSvaiEeFscyMyf3vz\n5P8IX5bhQIGFwoRJPtLQzM87J18HcXP+k/i8EqG8NkUT9uLtOLiylMUS8aJE\nsNX4\r\n=tZ9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBk1aDOq25v1kHbT+lD2G9NabNp4OlWR9WmouX6fDV6AiEA3poauW4MzjQnroqn3V8rbBOpfbThs+4sLbFOfVXFZ+s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.740ed33b.0_1610474674120_0.619897038862713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.c5c541b1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-icon-button":"0.21.0-canary.c5c541b1.0","@material/mwc-ripple":"0.21.0-canary.c5c541b1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-i3V9q491t3n0BmjNplnHn0XKbxljhXFtxRQMPgRCvRUFf9pP59ciAQfX7jJjmAJcUfIVMoYlJ/yrArYzXk6j2Q==","shasum":"35d2f1b7238c02c82c1df926eefa6743a814bdee","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.c5c541b1.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5pCRA9TVsSAnZWagAAPB0P+wcAz+PEik40vmmxu4+D\nTQv8gzvsiWxmXNwf5b8y8mkm6ZENv0l+5+2ZFazUZcgsmYgDKpcrlkle3NcH\ni9TMhfcecn5dCmFHU/86S0iS+AbQdbLigOrXl9EyktoMZNTL0E/FPmp5d6Go\nIXom9HoOstbWQ9Bpiq8voicNHQQyST7znyyZOuh+8mj8cEYaeK07iLpJ6CCF\nquy2y42TdDwdpxrQju2yBCVMB5J59vp0kfFKjNnyAg8GAsOEu+g+extwJW5+\nwyjE2Qb4oRciQclR9jOI3Z0LqO/irlpB/HGGJt/GJkrhGPjAn78pK2RCq+SX\n4aRs23FAXXCZ8Hz1XLFftUzzLGSBkExFnOS8HhkHOZu4ZaMc8rDtmUrkiXst\nDTXN4jDA0dWgpPv8Bd238vBwiZFpCGOeJRekE9KCHjuC48+R+U+1LQ7J0WQP\nV3k4LTFlygU8fazi8XqCkIhzJ1afDnrHepiLIzcarpZJHwtTBCp1gRDTkh9F\nGNztfntskLVYLQTYDz0LsxT0/a8XRlfPOiFx2XDepvnAgcfRujMFE6R5AuWA\n3qv7R5SLwxtTlRGMCTHiI5LnNe8q8I2UVMAw1gj8Xe4fZRDv+Gdfpd/h2BLb\n9oClM55LS4/yahH4g0WDU+q4E/0HNubtncLxO7wv5QD3VxCHNSYQ3GjVFMCI\nzagy\r\n=w2Zq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4EkS3PN0nSflrkA/KHJ5tpNULajFz+1CT++nPGFPClAiEAq2Msd74NS+tmeeO6tslZ3Bo0qFP1CiFnivxEvZPMQI0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.c5c541b1.0_1610477160463_0.9704893744538974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.06fe9d90.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-icon-button":"0.21.0-canary.06fe9d90.0","@material/mwc-ripple":"0.21.0-canary.06fe9d90.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xWJqhdQx11tzLmIBcLD9u5+WKLxp771eRPUkat0XwEJdkr3+o9jI/biRVrbGgRUDdlAksGklgNJZoMgcZzg+vw==","shasum":"8ead3ceffaadaa506afd0cde62d9446343310576","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.06fe9d90.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gzBCRA9TVsSAnZWagAAygMP/jriMvfgYWd6EXL2ZSF+\nZBlRyBqVyewAYq9PIG9rWOhlEYvXLUqym14+y0wgC6OvKqB6l25GSGRUdvRV\n5eKrvEUSAxod1aoq6qG6QI4m4Eq6NqovWQ+WjME1vsm0KpIOu3qG7Eg2rFuX\nP8HHd+mHLOi+pHrq/DNs7DUYVO+pzOjvVjukZVr5x66pWW94fGCJyyL0G1G+\nmarpzfR6+Bhabjq10uDA1zeHsTbfYT3/bRP12ywZK1gPFbiknEy6Yd4x5n+k\n9XnEKFLI1BjL240CZbwU5NKXIWYhjDGE6ted5+Z874BImpGZK1Y1w/lq6o0i\n/FkNnVmlIGHNPsJNmihbBtH91/jiXiOTimYbidseuF5R9unIkX+a6MvEg+FL\nes7W9aYsBrHwBx+oyDiM9dT6xDaB0VoLYdPpIexIgpmxRCYbUGQRJD1YXVJ0\ni1SHMNKY6ZY3WoHprpzDgK3VhJftz6FX1T1D0wOTDdYhWu7cecg31wprDywg\nfrXDMTWQ/fQZ7ns8i8gdrCP3u3NvwxN8XvTyvYOx2C+HfIkOFGaxNhV7ekdG\n8mUB67R36GZbdtpXR/GbpE5NxQeUIGP9rUDz9JBU8SvROzkrmVXg/YJnBZc8\nhnSpRgbSoUeEwUAIzOg1jNYU0rD8uxlQO3fPYWkreA/5oQBqFDA40fZXi/yK\n9AXK\r\n=RSqQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj9tZtTeGRmZPg+rgNIDuxSvnJRQO6UsOrqHBv7QzEDQIhAPCc19OVRoQEeu0u80CWWxjCCpEUt5KTbOmS9sHS78Qm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.06fe9d90.0_1610484928773_0.9806204560347989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.269eed01.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-icon-button":"0.21.0-canary.269eed01.0","@material/mwc-ripple":"0.21.0-canary.269eed01.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-d0XeGqMdKTbxScG7ysJltgeEOVdfZrszplMDa+ceQiqMs3mwBlQaUN1yl3veTW3hIqRmtAKNhjgtEL2X1Ihqgg==","shasum":"66004d93bf6fab599ab6938592631bdf54d392a7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.269eed01.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2oMCRA9TVsSAnZWagAAkHIP/05tsYFXtJaFmizShJQr\nKOG3jJ5/7fSenNeCPy5DbcpdF9OmasvPi8EXsoTJDKXj57cnuN6etzdf0ZXG\nrL/TWOQ4x87NqGE6R582l0I4asXcVa6U7TS6Jqd/AuKK5jvvMl7zuPsrp+0D\nHgC1g4PwMqHTzdPYxOFzHaGJRwNZPdHgoYOcn0XW6jWEcqr93LTwmVszdPIe\n8NYmRV2i9VgiVB+/YvCSpd+OB8BKOabVXOD+NtuE8NFmuAqF7jjHsjVvnntp\n/UEUKPeTjei2DLW0QTq+s2OVm7kWlpDLA2G6UBBtffo17sEkmMmIF+j4D0Jn\nkhqfQkTqYdsUWGnQ4/XzzGBTWxBP+km/LkK2A7Tsr+x6MioQyJ9+GcuWiUq8\n8MR8/NaO4b8oA9A6QpBrVHFWPA8HIu8f0yImZ+rXLsVHNUJJ4x3ZXqvs4T+B\nOcL9xaT7tnHL1S6XXywpm4iFp+o4xXqIkfoIJJiovcM/BAaYpF8g95iNae2r\nNk/61oyj8XFH9RbiZgK+y/LliQF/6aR70Z7bVCb9a+aZTn0ADJ0WJf8i29oU\n/phykjALiwbyouev5V2OPnNDJ0PEijZbSvxQe6Po9rqtdZyaU+m15mQEaBh0\nGsVH47BXGEvC3IsspqnKcm67m+MJQg8JG//hA9JmUqeh5qA+KXo5Oslv4HEm\nsYlO\r\n=Rq9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRNaKIy0lsV6b2ICjsBAF6l0AuypWGjEDN6wP8H43TrAiAr1rZBVKJXWl11wAvXSWA1+osbV03I8SY1zyIEyQyEAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.269eed01.0_1610574348535_0.18355213681075933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.8c075f35.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-icon-button":"0.21.0-canary.8c075f35.0","@material/mwc-ripple":"0.21.0-canary.8c075f35.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Tbt+D/CQqf4gux98EHCRGZ3vdvzFa6gDz34hngh/lqdlhXBIKHKT066ZWsPYkHK7LElnTjurp+Ys1toT47pErw==","shasum":"e258c2a75c0e411bee00cb1b3c58d5c111906416","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.8c075f35.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/31ACRA9TVsSAnZWagAAtTsP/1Yif+JZNbbvt5C2ymRY\n93xKi22/v44h5l7VmmVhy2MVQMypQxZS7P4TaF+Cq/sl62fVTLDDG7Zw76iJ\nsDiy2IlBp9ZMz5izkzJRHSuibCPcNpDXv1XviUXt08s/AqBWfbIfIVla0DWq\nvmDr7SSDbIzltWuHuvoHtrT2SBsu+A7Vct5/L/yKSiI+EsmksebKAYlsaBGm\nDJxlzjttubgkp0aQ17wUs0PA5asg2Oq1vvhiT1aS4GdpA6ZUSMblcHCNc8q4\nOBepjeKf0Xrohn6CQw7dNnCKxDhePy+TjYmy++ZR6Dvlnwy3JVdN6WTwsnXB\nTPJcbruGF97VqPLu3XYBOvcq8YyG9/dw2lk0m1uPv+QyRB1aycZvmSYzwov2\njm5WVfpf03of3jQMhnB6bdrgInFgfc6ZdGLXoBsINEDKdfvatp7sybKphvAf\n5h9h1Bgma7ojZD+k45HZVISBIzt+LXbInhjWwLappuayFy3PW7ZvK8kI6L3n\nXwIJ2q1PpQTe4vQQkGBMhF/IBHxV/zNZIb6gBpLXQlpjbjdN3B0YzQdnLyCA\n0jmv+mvNVuAJ0ET0Qugfgue4/3z5+lKMfARvWCVYjSLvMaSfG/jK+hKiHstQ\n44F+aCyC7fTFaxFR4mALdgKdMBMYVt5s8YMk7SoWy0zFej3x7MPBrqRzr9WR\nLNxt\r\n=xyIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbyOyGqhfCbAm7nYv5xBMsISMFojq4eZ5EUCsQm4UyOAIhANMzdh2muDULnobzIda7F7Tl1MiJk6iIFe4wtltUpNwJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.8c075f35.0_1610579264261_0.519948539351714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.3cda381b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-icon-button":"0.21.0-canary.3cda381b.0","@material/mwc-ripple":"0.21.0-canary.3cda381b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rKB+uoUiklojlh5dB+BNJ4gI/C7z81XmEwoENQ3D63phLMBGFm7RToU+WvNeaqYMnqZmYJ2q2VwRkxFUIOyTpw==","shasum":"aa60839db256fb400f4cd4f5484a78d9eb696ad1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.3cda381b.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qvCRA9TVsSAnZWagAAkPkP/0VZ8xa8BjJthqc4v8YK\nlBDYiMryxXRbPFIP7K5dLA1UhEwjeDjy5ITn1HhP9lfj2+g8wA0F8zzGRq03\npl2CDlCwAmITNh0uuPM8nis4XRaZu1yE+UG6EUHmXNL483SyYS4cqpGg19HF\n1NPy+NCP4NZVoRhd/7svlbDPovEoLCvBBIWwgEyI8/asr9t9uG9XY1IzJ8af\nicad0uNywQKPgGPosfCs1eokFPOpnU40/WJps/7FWJJmisBLN2lm7x6s9lb3\nOknKHR+A2cD4Y2omSBQaZRwa6oZzUi5ALHKNsDKo54vBLUFe5E+likZ6JRKL\nbd31J3g/s5R+IzRcoT8+X45ZH2kJQo2XwQPqeEfc9JBOLWTCyS/8SZB14nDW\noUYPlT4i0fJzFZu0iIcrGMoT5NqhM+cay3aBty2Hvdig8TDm5jD6bVtyi3w9\nvjJWRrRsEYnfypiIHUA3uEBj2ExBfCCgrW+0+2JpKjlVfVINemyAI4sY6ElA\n0XouqkW7cyj5YvGusM/hrwZ+eb93M9aqIDkI5Al4S6Dy6xsNe6h6gnOEZb5q\ny5Xg4kx9MPd0QbCDSCwrDL6Y/10fjZTNKjcCdnY8F7FDTooOtzImUvDi1try\nlczLGcnaJi7tNScwLcniArxuASyk6eQi8321bhAuOSvGzQ6wXPfbn8cE9Oea\nDecR\r\n=0u1x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeHX03tkGWqFsK+x86yyIP+kFIu5Je5Kv/ytIGonNWCAIhAKckyw03udxFCCHeYGTpzh46ljq16cd2Aks4a+VrYdib"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.3cda381b.0_1610582703046_0.4458954888172537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.bc113605.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-icon-button":"0.21.0-canary.bc113605.0","@material/mwc-ripple":"0.21.0-canary.bc113605.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2cgdyMlFmnG2SkySEaSLnY+stLEnBzp830q1xmmUCWqF1Rgz0iwLbT0RIxo4/gGIomVjua5nYoYbmHZ2TE040Q==","shasum":"69a14c2dbfa5fd419152094df4916affa8e92f54","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.bc113605.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5Q+CRA9TVsSAnZWagAAa2wP/09sHhGTudOKO/i6HQ8A\ns1792PMYRJrKWAiRupU/pI1Eu1trDQQ6c7MjyAOQg+Qv0VhgbQQ4v/GYuQvB\nNetpGOQ/52gHcSooKhgB7mrAUElc/2pBFIQ+ney51vAbhyFrxr8R0NM63Z0a\nNhAbVYs+nfTSUtmWPZBjYQ9xq2tMKQKjORxbvWoRtZ3PergtegLZUgujBO3R\nTuVK+sOhdwjdfgWmfZca9xMH4KLj2WEbbtdUMu+z/UpA+usqFcLxE2g8JGiP\nnK6l3q2/Od6/2gaak68Cnbl6idxaUYs9SlAjT1zrgOEp2W1lqb+XrQYI7frV\nWTaA661cbV5HUMKKCA7jqKOqk1TweG2xABikvT+qwGgGSRR2ZbcMyPxsdu0L\nxALUm98oxc7ONfGdpcdLvFC8nO3ALe2OgFGNzb++sKErPOGZXtS90YcAjk2g\nFpRzj8cUgjuegJfit6s+Zftfvh9aGDTHJqvpuhvkaOOoX6pqGv4mqZoa06XO\njE8bdCUwOkfeNwwUSZ2hYZNLHltWQ/JaQIB/fBebW6SeA/cQsjpIH1r/jiNO\nC/dDjZQebKfVQl7CfFl6BQGy3K+TMgS83VDwojBm5EUAp4O9iKiRGA9It7I9\npNumtrkUcilQQVkyu4dqUr2usgprtVMigVp4LLEGZD+RQbz9YnK/H4K2ibHA\n/r+v\r\n=ecF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaSRA2AVh1aVjYV5WEId9fJMQYLT8xJZSdiUkV7KmQ0wIhAJArCcyqC41aBis9WqBzbcy0bYV9DkpJ1jcnVy/M1wm7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.bc113605.0_1610585150291_0.4591741422897935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-icon-button":"0.21.0-canary.0c1d6ff9.0","@material/mwc-ripple":"0.21.0-canary.0c1d6ff9.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-+Vfy6cpvZGLrPncnh8gGQMsHimJYeA1hAzj5yZC+Ctj66A97A9hKs5FzykRYSD0bqAOY5TcHzSEIVYzMOumSCw==","shasum":"6b85633bba590c6e07cfea5b491dc84683296e89","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfaPCRA9TVsSAnZWagAA+z8QAJxCxpdtjfg7RE7G1CZo\n0cmUJeZfPjVLaEgz2HZ1RpD3DQE3c/Z3OGt3Rz9U0XSYCGq55rzzbNamznpp\nrbnpbGsCcz2rdqGBcK+CqdPv3age4fWaWNrPnsB2wj+Y5TgAQCpRU7Hx/9VC\nhC+fUxI9BZUrJmQlNvXSbsw3s9qi1h72xhxdwjxtDXpJMGwynZUHGFsgWmRu\nzKrABYGdhwlEYatDeZWmhCWWTGlPwhZ1yYzRguM5bht/OMC0z1Egr0/HFxZ6\nTUvqMtjEM7BevLRo6G3SbW2sQjnMF6qO/tIQoVRT6DNKcJf4wzDrHFuSqEtw\nx45jVlQUqQMypQaMr4A46f+kEUgKqnnEBEOM7SVcchp0hK5UTRo0FR/4rUXC\nm+LCTeAzJn9vFQcYpkuIXeK0gHfiLlNySmmUYsWIsyAxYM/OcBkWsw0HANCC\nUR0z5Idr9MrvFO0EtdPIJfecDBB7M1NODwzuTp2MTdMD10m73z2++uIdlelb\n0bObIo4ynuUwvA2bDb6x08Nc/sFev0bZ2k0/atnze9Lc0adDFnwHOMpjiHF7\n6pKRDHObJrBR81XxQKmCYmSM8gXcsTRXcXhrt9/1SGK7nO/Pi0hhFzcaDO9v\nU7zdXPC2u4ZbjxlALus/5YpHF+MC1m/Uj64dDku4Tt1enOwBSCVgEO+oyxdF\nBz6L\r\n=lFPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYAkeWhlc0dkut6bJAkai9x/8eex780DehoBb0mSxg8AiBomdALRhI91WbvWhayH0/HH4OJ0LhMa5l2nbJSXBNQCA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0c1d6ff9.0_1610741390598_0.8738557454322906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b4332e00.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-icon-button":"0.21.0-canary.b4332e00.0","@material/mwc-ripple":"0.21.0-canary.b4332e00.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-4mNMdjd/aI92fU3AlDLT7/ktglz+ixY9NTPf/R6w7HEJtbuxs9WH2WFuGGI4cEcd4bR7j0J2h4N30Tnw0w8aag==","shasum":"b21bc6c1f43e1f5b2f700c4ad82a7a903d029f0e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b4332e00.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhI4CRA9TVsSAnZWagAARgUP/jvNKByIjagjlHenqQJ9\nDXRlMsMMDhaE05RMC881BUkm5j4LndFVd7TEJ0+ekwIjUE7SBjSn/sf0pF8w\nSG3g3VfzFfUg8ZQ1BRzGhqkU1uqGgiIcRCcCAoCX8KGaMvbfq4p8+n8q4a6f\nLsFX0glqJO6LGnYhbQFWZyrWKriDEAnhoQv+gpQc5JatlkUacAGFOrVA5SEL\nEfX1xYdViny5Kxl87kx1OnbvsEKCrnPUIA/oPPC0X3/bVOXYfVJ0Cn4UrCyB\nub8UqCa0amvI8KsX5mvyx2+XgSRtu5c+YDkkWkhbFb80KtjkV0SXrcpamQ+p\ncnu1mjUfqgHLCdPj0csPnB/KKFAVArOuSIyn1dMrtMfdJ/CxDt8/yv/2JHZg\nlrmgUNAvV0HFCTRp+9Xr2yJnAcf1Asy+228q9qp6toHlG2T5SPfnq1SEd9jQ\nomyFDpcWPBpjTiEVqD/uFcgveTmGs8HWeNQkY2587uB80EpzaERh5P6xTEcf\nslRGq0fmwGPmpKLNGKIftF+9AEs+0/eeuRwnGCXEMYz0Rk3xZxPnKlcAthY6\nX1F9LswfprZCzTn5Ku1EBlsOV0W3ZX3n7LvWy8hGeeSpx+VuKsj6dggi56bc\nzLF6sN/dxaCgn2d4jwK1UVoM7kTIw0dIq25kZHbhD0XSp6SVmknQ1DGJ3Xcq\nPuUG\r\n=xGZX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7wh6lHTN4x7DJxDqM9XhAZ+dM9C/uLnlVcYka7Mv7nAiAXqemqUMSIZuz8GaTbLg2Ho5XAAczKDrzf+8Izkn0UGg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b4332e00.0_1610748471716_0.8513832397471159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.2899691d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-icon-button":"0.21.0-canary.2899691d.0","@material/mwc-ripple":"0.21.0-canary.2899691d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-0isDPaBKAJ7NoJGJoSBHYDfcpdVR1+TYRFZadVlCcMLDACK1GcYVR9kFcRm6ZczGykMxlnRSOFVRz/8DpvlHJQ==","shasum":"ebf4eddeac11566e96ddb5ad1554b5bbfdf00152","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.2899691d.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUgCRA9TVsSAnZWagAAnUIP/jMktSWI5d8gPJWxDszk\nXNo0079Z6JfFAlB8RPk87+GgxZcNyWedFlWDnJx74FJtksZuD6QyAvQkbuoG\nsm3vcjTkA7IJGKUV7EgMBUTPx4rCE9EDzAb9QkUxOtRbg/VYvHBtxv9xoWAG\nRXPVx6grk/+7xwS6wU614IBWlbELbNgCsvG9tNFCiAaG3xosnGAH2k8HiVfJ\nt8FNaM8jJPJhpYrlOEX6tabxvJ2D3pWBp9aj7OZGQhHclr8dPPDa+oMUh+3u\nPKQONaCp76vtPq+T1Kr8DPfH1+Pv9VsNhsQ5VEFChxkpfdy6MbrMKhCrYcD0\nvvpkPo/l0+pyHmmeOpnY22kZudok60WQ4tCNBMXcalHbs8uSzh/PhVDWo4ZD\nBOg1Kf0Xv90+ahpFx5igezrZxORNO5ylya4WWiTat9nyOA50UsbAe47F1Yui\n8scutUymXvFa5ANpeKn31ZZnWMxEA6oKmAgOsB7vjSVD9oRNLitPuvkApkUu\nMwrXbvReZrBstsjqh3RF/QJKDdthLUMz6hQI4YeFPiyuCAGMOOBcjPrj8KvW\n2eMggtb5n/mW56pn8jtOr6VF0ZQLuYuQnNZPZR3fztpftcH7Tc0xGc8HMgik\nq+0YlteQcIJPMchNT9fP0TxFNFRkSWcJKHiMDAIpEO8zV4iE5IJhT+gV47nx\nu/9m\r\n=4Z56\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3BukWhyH0XgSM6S2LGk7pUytzR90/NUOvMXZsNbLvXAiAXxvHyGAJx5SSivm1SHH7MsS328J05DBy9zqHoKwE+3A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.2899691d.0_1610761503630_0.9310243251681498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.fe73953b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-icon-button":"0.21.0-canary.fe73953b.0","@material/mwc-ripple":"0.21.0-canary.fe73953b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-qg3aOK5mAUV43SD8G4cA0H3oELg8405E9SuJRMAITDEEIDRb5gpWE9tOSwRqo96NvHACOuyWLgyMSAdrww0Osw==","shasum":"092abe9f4f27623f3fa3d7fd9f1d36920d30feff","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.fe73953b.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFOCRA9TVsSAnZWagAAE9cP/App4yMku5Q8IspJ90lW\nZ7E6fI4iv+WX+FYETXty3HC4bHDtD3TNabasTGpZtnN32nT7sEbjbcNY/h1R\n0sM7xCCdhcPBXamy5XoMHspCVXIXtv/O/bibCVcxtjdCxej/5V9957xGeFqy\nh1pt4bipldpwc3HaVyKowWb6HSU1TXj+Xqm7c5fjcKCtagfMXktuMcisBAst\n4BuXUbUuyW2o+kwnT6wDqSlVPPyVkPIVUFZoJaIphpzIiNSMAj/Qjk9367qy\nrLsyOkQ6o2SIvtN+79bLMMp43FW/1zYzBlvDTv1q1PIjUh7ZcmlSDXGOcILh\nt//zJ+1gwj+fi6DVGl/9MUfjLVXDTAyQjtZn33sNOQglGdvrDOvr1U7f+L2j\np1+AWE9F3A236XT73JysAmvTgpo8TVRdx2O4ipY28iGOEG3P6XdZQBhrcxoA\nfbPZMSV8f599m90j7yDlsUs0UW7GeUyvALEbMk30xGL10451s64Zncyx8GKk\nVhp8jSngTQVCWvf4VwxaiXtGmEedxp96uXg4/STneDb7s5gh4Rd96V0wPt7A\noeZtDkny93PA0Ecs5LERGyPkdcCWrTDBi3cZ17g/znrzklzXPcA/JNlyEAfH\nIDnnbmU40Yw5A20NYffmDBaMksuUBaNSKLDQa2pQMofF/nTGifLQ6BsWWjWs\n4rSS\r\n=Laox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVUQqVFEIPvYTxNpeV0eYYDuhGRWhuQjgiVvvkRuWfPwIgGG+NRe1QyNoWMTgbb3Td1UxB5PNIrbQG/geGgUirkWI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.fe73953b.0_1611084110396_0.45455070129418806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.d3a16455.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-icon-button":"0.21.0-canary.d3a16455.0","@material/mwc-ripple":"0.21.0-canary.d3a16455.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-nI6NsqtzZdE0UEaxobIGQA4YOsMuP4AEX4busGPniwypFeepHtVFlGwcXamfgOKSV1JssYi0cAYCuGd7LeWDmw==","shasum":"5c26bafe4f9646de327c28d38878dce5340c3dc7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.d3a16455.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziOCRA9TVsSAnZWagAAtiAP/3VXqfAR48GseQw63lAQ\n7gCS7XkTksLXzaTlLkscgAbm4JLqodRSPn4unQl9mno3L8mxK4l9dnuxELGC\nzGW8GVOYFG6KBVKZUPsjlVJ/XsrqGCuuDEvJiN4DxiE4sXTs33ZUcaHgmm7p\nRbNPYJBbFKJJXRaj24KR7hRZYhVSuXwt8J8pt5Pq27PrJLYqejUNiGYMRyNw\nBJfrnEwbp4ldV+3ULr4aGd7UHXjPCZdz23m1TyVBXWXAMC2V/fg3e4lZydiz\nz5PBlUseYWlxH4Tan5DADTyLsC1x2KV+RiVaLgY5sRN5PtacCU8xeDwh/wG2\ng4ZxUQVCNMWyGzXGfr5plsUbKc+Vl8u1SP1SJ6nHar8ONTdt/VszCF7lW7gl\neAivmUyUofHXtHm8RfhmtK68sKkxErmvuxfbqt3b8veW1G9QKX9QBbX5bX2B\nvCZTPYMniAJP2i/fvvCtAqwgxZrfPTHPIh1dILcBXZeag44KmkxMUH6ENF62\n4qLhktfqm+J1ozgPlI3LMkCXjeNFDU3lg3Eg+Us7wTGG8lnZlyuW6U3ucvNP\npAkFC77HM+I6bpjTVyXkrCgY/XEK8EPliDDHyzpPWV0yT8cD9qcoy6DT6fKd\nM+ZpV+UatB1pO8uOECNy+jV44Jy+U3nfQbEC1BCvKsvsZN4HTXFWlV6zoO6t\nh3IY\r\n=fnOb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEdW1NQbsqkB9xVd5Zl4xzs3+v09Sn/grDT9TaA4ERuAiEA3uqVCzhnsmVfMP6v2wFlwRHYp+/UyN7w/pImkbsnwcI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.d3a16455.0_1611085966175_0.9259698678350368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.597ca1b6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-icon-button":"0.21.0-canary.597ca1b6.0","@material/mwc-ripple":"0.21.0-canary.597ca1b6.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-EExsDpXidksgQEJFuTh5SvD4+Fje/n5FU6C4XwRFsvFc1j4jWw6WBQhRqWh1NN9gJWvliHsUuNZkne6AxL6SQg==","shasum":"90e2b661edffa9c0dfb5bb1ffb11ddc6b581030d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.597ca1b6.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CqCRA9TVsSAnZWagAAUa4P/jcvVM5xdyQ8uA0FwALQ\nXS1xZ+6sP1N6bikyb+ImUIiIMT5TlDUGeU/Bgxfmp2RJ4g8KDT4DtrWyeTI2\n3w2AALqTmpWQtinRV9EdvuhmbMC29yupKTy9G1ctStyU3OLIhRowVSdqZqlD\nRCt3aZM+y3p2bvumxEvWPgsiN9wsnLz3ov3hg91tHNHwa3dPYP5r2LYq1FlJ\nMyjC20MC89A4A8jX2M2nDJp42RvijK1myx1Pp0767j799OTnVI3UAWP8Fglk\nCw6aZ3zMMJrlKu74/20XLtTRE/+eNc3AnWYQNePqUiAXgkLKdoUn2Fq1m4i4\nNcOKwFMeW6wDU0JpjRH3h/wuYbZb8CJgLtix4I2fQorfV1orRSx6tKHojNxZ\nzjemccKkPyd2jgp41A5Y3BEI+LIWWy3XsNH1K625gtlEvkiO6N1c9iTO86Em\nS5rkRHx/9a8ks4IaW3PfBkdjqXfQvojSdeoKRZPv8Oyiuq/fe9BZYSWlw4gE\n2x8zswhd36rD/DFMxsGreLvshpb0ZCHXXvXCZX6PDsVMdzeYaW44qSpCyEKG\nn08sjaxIM1vS3gxYWq1QUZOmO0QmbGPvdav72eb2YXz/IecphN6s23SWo5tA\nIdfamx/ImrZ5Tkw1/xYcEXxUflSkLfyVgfrIuMtrahyYBpCnb3PD2e25Wzs+\nMWhq\r\n=WDMn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnJqze3C8S17vi7rqDIG/d3BmO6fFob9lnHyeSCcultQIhAPKNtbPUZNFe0adQvFfYaVhVc4O4lo5lg4BslUdwx736"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.597ca1b6.0_1611104426213_0.000842154660251504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.3c195efe.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-icon-button":"0.21.0-canary.3c195efe.0","@material/mwc-ripple":"0.21.0-canary.3c195efe.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-HRDx3ZYABOE6VCSh10mlghPoP2m+RLQPwUqkLyk/U0PHObWQP3b0iNWkCU7npa8hJLS4TIUEKymSn+PiWX3e+w==","shasum":"71f2f772d1f0070d15bef3d946ac5dd3c1ddc177","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.3c195efe.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48VCRA9TVsSAnZWagAAxdAP/0zaw66sjqW+fpCVrliB\nDKHVg9MUbHdhqL0Z2mOJua69BKM3nqzAGDPqHUn7Sj+uEMKksl7aKe5X0JW/\nSH+pVjwHuuqUQo58h17AiDVonJZYmgik5bpRd0WVFPadfMtMIDEYP4r3bilu\nhZ33qKr6Sik0N4RO8OarF9Ia6pmpTWQ2T5E4CwSwbEDs1FcyrbwyBzVne5Z4\nM1Q/RL3CEdwNh8vSgF8oUGmYYtlx5Z7T2dGOVB/9yFUjKAE8OdjC+L0pvkc6\n7cP2NK4mirpoN9u54qp7xzMcrjqeT7UMDyzRYRzJlwmsmxzeAq0SJtrPf7bQ\nTTKyOf77ju9wdwUfV+9wGJlhwgT4PyQ+q5jXU8Qww7MrZwxvTFTxuXqSNE5Z\nWgMm1trWwHQaBzX/rVnHEpMW3DcHKekl5NQDWIwXQnptFYsnSfXu96oe6DWM\nooWpiT5XTRpMgIaTdi1JgccnAChwfGSr9RQAld4dbGKyw3eyeYdsa2lMtf7X\nff+KFDE8wLd/qraW2XzlJdKgUnzdZnixju6Uigo2Vt4WT6du1SHid3jpelq+\nHQh5KF1OEyiiPC/B/Gy32Clav2DzXbVshu7jv31NXyaQ+TFKxRe1PVqAkCNj\nPj0autw282t8M/marSLt9OgdH1zRZk9rvBcTCp7xjs4uO+Dm1IfOD1n73V3C\nTpxP\r\n=bNP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk1+K0TyTD5z9aQTM55eSwVx46o1N+pK0+nvYvoIX/zwIhAPV1mQamGIgg3h8Qbr1JRrvmHzcb0TR5mts2KgbDn1A0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.3c195efe.0_1611108116856_0.8345817678368219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.f7b8755f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-icon-button":"0.21.0-canary.f7b8755f.0","@material/mwc-ripple":"0.21.0-canary.f7b8755f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5WWI4V0JDtctU0ixznkd6XWBJ2PhBtwTE0eBUp4lrVEjvXve7zwM+umX32xLT0PVZZjuUFTBtMXaZlJzN4EDlw==","shasum":"594da04fae7965ce4672d519de386507879675d9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.f7b8755f.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSxCRA9TVsSAnZWagAA74cQAJ5412CVZ9Gt+lrEhfbS\nLsuCxiHtiB4fK2+RGCMiPPiqKhO85RbS9Sc+ZbxQ7e9MRGGFRJlSzzKlzEjR\njKXdbVNE95RgngZ6BN7wNRbKUxyOprvHSpmlHzYMENMwUGFbrKW0Q1DcrCLM\nrprvCmSJEpPmUANQeD/KRdMTiNS06aiVzalD6RfNg0uvYHe2L6uhEbrmymyP\nQSz+HiPjazdSMsZtgg3L1D3RMxvmk+nTZzfErpC51Hss8gY3DnquYOMdvh6O\n0HWCbi1xdpMwpoSiaMiSbLrHFdnZdfOPInG4H7R2DuNVW6p0rKWZJPil3Dt3\n0y8IliucNNncuzV3ZF1aKrwRrOjSVqKiKpYiTTCn9esUVeLruDvIVdvVa2jP\nLY4mJd5Bnjs939GyeoNLyVzM1/dyV+JzUHSFdPCo1ikOfnNWpMQIzYF+1xda\nPXnS/JB2AvZO3siJON8SylzyzhwaXHZiZEIW+7li47gfXy9k0vzuZ4PmjIFu\ni5OPCZvuZ1kPXqckyB6Wz/5ABI4y1LV46UsOZK+0OrMG1S9zmG3TZLxVxb9U\np8r9OHaF3Cv8m8DWJzbF88E11qjzlMyofCefE5D3y7OUD8KLHDNUESDNrBqs\nG04WOR4H+dbnrsvT/F3oqWWFVTJCWZvoumcCpPWC7bQecNhbhIWfqahQK51V\nhr9x\r\n=s2hY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ8nL68VvV400mE1q8zvE8hNyEZeR6/iddLQ1xoGAreQIhAKysnQJ5vuIzq0SsXv7zfzDYQM/P9kUlJbiZrUSZhlo6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.f7b8755f.0_1611175089055_0.20648167358124914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.f60de7df.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-icon-button":"0.21.0-canary.f60de7df.0","@material/mwc-ripple":"0.21.0-canary.f60de7df.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZcZt+ChSwkOkacs6oarRdH051Ak/L6fkyEa1Oo3vmUIjmgKhFdbchsaxCFRIILlmnV3jQDbGL0H/woqNBmDhog==","shasum":"ad1b1056e25b72af6cea0a32d339aa8f6aad0da5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.f60de7df.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6fCRA9TVsSAnZWagAAwjEP/A44EyhIQw30HAx3uoro\nJLyC/HN4L8X0Ve2BRm5WJjUPe+ihcmkwsxfEmo3wbQRVpis0AWP/g0aVY2xA\n+ITKHvmb/0/xA4GbbJupI3PG5lDqGzAWN62Pl5aa5pf4bFoXUb5VTyhQ8Mbd\nP2LWMvCJ2+TUMx75+2whwyb9a0XhjYBFxuz6nMdGL4K1FrONenMaS3Fvdqsb\n9i3gm2Blm1pP6G9x817gMc8UNb3CZ9tssNIaeXr9PhT7m0PLBcZNPnMwsOea\nAT64JbbiY3EvPgJmLTtYLq742Hq9hE6msvPlFngdubr0bfQWncaTdYzY6pNh\nKRU+kN2t+KnbWV6byf9cQs0XyupdC9zgC4heDxmyMVfkCe3i30xu0ACmFlMV\nz64mMN6/KweQkI5QLZUkndaqbauiCLOzFz+xLfQ8tCKvH/NetNy921MaldF5\nazHixIMgwSQeGvZ/AMXiDO32wLjSsrE3qryKhF7igBooNH/ykq8WqCahagM9\nUke9ZIEjnZSXHcrMiq9BYsYuq7XdIjui5ILPtdRyFDSsJ2EgRyYi0p4XjaCC\n3mtexVUl8fPPsRDJG7urRcZYOPJblx7mb2qNVlDu0v4o5SSs5drLfTsXv1v9\n2YgVO1H7uS9KYVxaILvlDNltq6Fq18pBDI7itb7wgurGomjnNJYmI5uLaiQN\nPtiE\r\n=SbRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEXTVNMGAA4mkpUsEyid2pwbZbN36W6M1ghXTcWM6jwAiEAsQM07njpjUCvTgjSUpJKwXmdqH7qyv4bTv558iqy+ms="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.f60de7df.0_1611185822978_0.9320728757360153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.664a2927.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-icon-button":"0.21.0-canary.664a2927.0","@material/mwc-ripple":"0.21.0-canary.664a2927.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-C0CTMBnBszwhQAFtAA/0PyWxV4y83YPw6nNzCnhrzrHxdPA+O+x5PhPSTXHCbOdiPDnRGTBTVc4dKP+aTJCTBA==","shasum":"a6b12d96ae03eca6fd80a6341e347fadd254a66e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.664a2927.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOnCRA9TVsSAnZWagAARgwP/0w4ihUvwOrkBp3mBHSv\nGNeUoFFpcGw++lTgAAZDidf4eadSAF7l6fs8ErEAWv/Nb8pDTRCpQSUfOk0M\nCOz4YCWEfZ/+GNozJzLi4qqZuM6ggGpPS1FQL1hzQYl9d+YYzouysHz0JcuK\nkeKny9DEb9WWjIuUAeGU/jV+iFA2uswyGrAU72pXFiUVouY2vto7x18RGuZj\n3RzNyyySRIvI+VsbSQA/uge+TkvzNgRf+QFASyXrjE3JuWA209BOHowluyvb\nM2bqugFarMlfuTR36vr5bw1QHI1+7NHk17uzEYHeK/Ur7zGFbLvLild7UFmw\nEpCRUvzvskKMzGJbXWlMJsG2EolsGlE1Bv9wlZSsdx+WVRiMLzJGdXk97MUa\nSW3gbeiBSr3xXKOxKF5QXh9acRUH+0SI03vQBwT5m275pIa3cJa/d37WOZSO\no+xaeP/poeZjo595NPonNkskZXG6ZpO1foZam/9aavfH2W4Pvlq0mxdLvNpk\n1KiEJQH6ahyXROktAnsIv1AbR3qjN3YZX7Ai5/Rm34bYwsdN7hZ+pJUnesHi\nQ70nydCNQVgnw1bVr0Q/Oi+QHA4OTqwSJhKPe33bqfYCY2PW7zdBhJyo6/xh\nqITPw+HPdYhrUJ7vjPH737ACGbTnfazF6rS3csP9FxdYob6rOyaaTPUo3lLv\nW9Ua\r\n=MLuR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFMK8nKyusUwhWc7XXwVyxrhA6d/8Dt8++5bxm5NAqGgIhAPXuhAwdSqxkTMv88+Un/CKA6BgOigIgI1ww2wB8icK7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.664a2927.0_1611256742947_0.48617963779248097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.a6d312e5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-icon-button":"0.21.0-canary.a6d312e5.0","@material/mwc-ripple":"0.21.0-canary.a6d312e5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-sWIUUjCFkYnmCe9jVmOz2R/s+2NFzlbo5UeUly8/ovaeL+50pgBeHMeGV7VJrfKTN91/qyvtS3CAKYkvx3mAvQ==","shasum":"abe6d995c71b50a67497f2914d62d6e3c7fcb1b8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.a6d312e5.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaUCRA9TVsSAnZWagAA6DQQAKLQBohdQ0CGFrvYjB12\npysQ075JPmiU0giZaHw1AhMEfu1aF0DiFZ8iIWwZtIADrcwvk9tAtjc1WKqv\niq5+Fx6oRmikEy63Ar7xirb0/Vlnv+PODjVnfAxCH0eH4Tc4932szA8PV4KB\nyVnV7vuv4NwZ4yq07LRcwLL6YcIudPEBtrySdYUt7tjnjLr0nsdMjlFnXBnN\nf4CmXAQFQS41vI4uiJL/F+qBRe6AY1zkcD8IyrLxMbLOhzY/ewYvjd0ZTkvr\n1YDqEjSddUDmkJLI7vFqDrzLfUXCyM3ghNvH3wU9Rom70vQc2UI0SxJmBpS7\nka3J7jALJzKXS+MTjO28CibbzkksiMKH3sX/OJgKihKMkIubEDJFpTnX+lu8\ny1VOKoO1zqhHNhZz70HvFxwi7YRqtbZa6l+qNgs5PiEjew4UkJF4OLVbOQC7\n4t4Q8oMa/Np//AfiBPZQuXUqktvxxZ8nzhLNOlW2waLYjQtwxlnIaYqNNHVo\nXFH+n/aZeAYQ4GQLPChpD4wWqJVVblS9CnY+MNpIiVdVrrEcICNMpIvGRXAy\nwutLln/8ILTYNwaTwCLWbh5bnubT/VuV0n0heqQMeeZHNz55Um7y8zYOAbXH\nVGH9L+rYLS1Gv88+HN0r0pVR6XIfDb2xHigqx+iStw7SXLFR1qFGfJcdG2up\ndnJx\r\n=UMZ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnRQemVrGzhlBlOckPWA50oQYrGZousBfMnYF0q19XTAiAH79CMscmXwgp69hvHQZVvWkEnKI2m79ZLrCbviZZXgw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.a6d312e5.0_1611265683854_0.5289392498361252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.027365eb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-icon-button":"0.21.0-canary.027365eb.0","@material/mwc-ripple":"0.21.0-canary.027365eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wLTblySKavdXJLGytL2x/1+drKlcqO9WUGUssFxdRJZzBY/BZtqXuocxfd+Ii8a48vzkTIoeMwvbBAQtfxZnEQ==","shasum":"b8cf15678346cf1d2c800cfe1330c5c2d915e947","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.027365eb.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6zCRA9TVsSAnZWagAAk5MQAKQJ9ff4TWdqQXpyvOHI\nzL+44jgVXCsZsvQ7O9WJbcsPhm70JNYfjHLKN7P7kd7TUayfgBCaXRHPPF/b\npoIa8t8KlMyjdcWx4BIZW7lrKQcdGdaDTfXa6Xq9zQQqZfZzWODTW0yP9O97\nc3cg/NZdPYuHvsriZoz01MatuQKGcBVE96spIfAPnjy7El1OZ6MAXmtAZIrM\nREDRiWGbZWqTT0Vy+3s4RpG8Fb1cop7GcTr+caJGJ3L1YTS65zBoh9UOU+BQ\nVmi7Is3SUZnOsFS6eRjYOyAETpj6eIJJ30xqUoO36MYCQKBp2F8MntbcPxUs\nNeBmR8Vd4mjvoHiYG/MBSo8ZFd7sr80ThRFME5P9uEt/JywDIOgmfBLaWZva\nNw879OqDyanjlfJhGaaYyfPVnBm70be3Hy8vCDKgc3mq1zGweqpZcWi+1/fG\nBbxw0qGpB+nvoN3LKcHe19q0GF0y+qzRluFyF3DT5IlOCAsMXza3B52gw+PC\nK9ogBLRl7BP8XUumWESkh/4bq9L01WeTDwehZ67qaP42BrqXM9odCgkEnSVR\n400rjxF4IMB3naUj3brHbr9YXzBzKE3qUe9vgV/ZbIi8nhYVRa9CTtEQSlix\nJIlivMkAkNLSw38GbYGG96EyScvT64h6MfCOQ/fSR/dn+vyvo9wLO5WciN43\nrUYs\r\n=JX3J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYTPUL3vzGQ86uOScjL+sGKvK4S2F+mMv4XVlJuSmAeAiBy5m3WH8RSObjGSL7i3rk+BvtFtbUz+Bdu1oLtH6uysg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.027365eb.0_1611349682987_0.3852788998652821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.7e72b66d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-icon-button":"0.21.0-canary.7e72b66d.0","@material/mwc-ripple":"0.21.0-canary.7e72b66d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0gFNoQdEBI2F/T2URAok0bQfeHROs5pJu25G5U3TpGucJ0yhM8ffOTXTuc7x+XQbesaf/REeiPQDw93WCnStSQ==","shasum":"7b4badead73ae646a9678bb939aca1d245212b38","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.7e72b66d.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC19CCRA9TVsSAnZWagAAh/UP/ia3sxRJvv3IJUs90uqV\nxsD6kfs8cAuAJNPFVfS357na63xiCT7ckKxCHQsZ8oWnjCx2G4p3d3d7SZyz\nbhii+SA2q1SwGzcQ2AVU/2asIdqZ/F68mGjpOTLwLaIF+49iNuRgX7/71DSR\nPnPvaUcHIMHmH7eIUeN7ZwtiNl7vQ4AfDJq24FjTbS3KhWRmBuAqwFTqrQ95\nWZ/9PSTIbhK2idy0D6q+vODmBuQ0g0ESCU6/5X5dlqkiiHVrLtkStBtrrBMo\nA8n/tmJroEe5mJRmsTldGbGzE4zTkQH2exzzxAHarDnBAjgBSYoKuvhR/Hwn\nmcXTQP+QniYsmu2Z6sJK2HraX9NA6H+b28h7K3qYeBH843eCEE2vdv65WlBu\nrbUArEzgrvoWDycm8rkyT0nY0NK1anf6rGOw3Z8r/G+rgimfUr26/RnBZjfP\nkshjffN1mvpUijRmmwnsEMNLerBgcKEdSDU1sSPjX7Y3m8XcyRrel332bZeC\nPoh+SyT97O09tyxUvMbPPTSm/MJT4JbugPDLVMa4XCH8UaKpzZ95gmX8viq0\nB6tfjk3tZKO1p0cixvYbxMq/cTRMnhR/1XsopQ2Tc+ujzxchptD4baoXtIdz\n0q//pKiFhFa1u1XWMYV4F1c5XpabVkMt2gsCiy3HndK46uD+h3ghgnH1BoNI\nOv6r\r\n=QY1V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxmnkxYu2SaJOwEzAfXWoKzqkgK5SIiQ6cl2rpAT8nxwIhAPfBmdpNsfx6V/xaeeqans0V8n8c/elFpyUL0C8+a82V"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.7e72b66d.0_1611358017748_0.790394978171324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-icon-button":"0.21.0-canary.a6d6a1e7.0","@material/mwc-ripple":"0.21.0-canary.a6d6a1e7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-leOyQfXh7rD+jOXz9YpAaZ1wMnveMqXLZRWgEvOyhBrhrA4QIWqG273WUFxCVJDvVwqVe32XjZ6Vne1ZVDtEzw==","shasum":"9abb047dce0ba23933403bfe27ed7dea1e8d796b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2C6CRA9TVsSAnZWagAA+qUP/iWQeXKM2PTW5dC8DTfL\nnaH7lTHTXfKw/AJBhbwyedOPBGZCXx2MyCbS1wAB02HoFsOqvObzn4a52LAH\nt1Ct48w1+VBJ6/Jvm5op4iybFGE8QUk2IUDM+jL9nqKvl5LygRu8LWGWvHFb\n04In/raWouD0oa0nQunJ+343fHnyYKgr6NIV1spdPxlg4CEPQBDpNAX6CASm\nW0mkzFUC6gjef88UTF7Z74PMcd+J5APwABPQslSPdWf0QrHImCT2olc12vBF\n6/h0EvaOHTSvY5DJl88tj3lAMZEQjMmx398eGIQYvNQhjRCGb0GrPsDLvU1h\nRKynneKpFxfJsKscKXRdIRli8BuS1ZrzlBjmRf0l75hFGchmGGiwRPhWR7H8\nPjL11PkGa/3prS3YeMjbbRHDYGj2cYeoj0pm7mUv4yn3zIpddpV034ENs4cc\nqAkavAoUAx8VokW5GXgzPRd0dBl9LPrRPOdpsnVCENOSkjNgHarnOWpj3A5I\n6kNS1UxFj5kuGFzDhNzkEKkZsH9y5lz5k+UGH2lExmWYGfCVdSJMzC8vI01V\ng8goKRQdaMDjq7LPxR6uKWl/95PYXWBy7LiwMsz8hq5vFusBg/lAEVm/99Q3\nuha2HoGKGHMOBQOEMzHN2s34lxzVPlHECbNmMGvwsfJSGLxzNEvWSwa+7aZz\n+wkf\r\n=kW5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGt8D+EwP4++w1E8aOaGMGsFDT9cYrWt1lhtXJgyE1dAiEArM8d+dwXC/pG/SBo+UB14rSW8ivpQgOi5f8K4J2ehLs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.a6d6a1e7.0_1611358393806_0.9479440862222859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b95fe100.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-icon-button":"0.21.0-canary.b95fe100.0","@material/mwc-ripple":"0.21.0-canary.b95fe100.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-c9WGm90RwYOnINJAG//s66r8yuYhF7/a5agri4YCqZo0oOB47hEwEuO664KqG/0ZEeHh++xbR+1jJaDIYy6y7A==","shasum":"470c8db2cfd852ea3f030aa97ea610822acd0a69","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b95fe100.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2U5CRA9TVsSAnZWagAAWw8P/3yyx6+vrYtjsNnlxPGP\ny2HSg2N40I4pFMc//sVqzkBNm9KQ1Vi381tki9BKjIsOsfEF3j3m0LJCosXV\noRJ1cVq31vRgZo2dsCpDoHwqlxWtIxn88Yelt6zS8UO1kJZPI6Oi4er9NpQ4\nBm8M8KnyhMV3suxcxCig1YweTnollkyuunhgZJf4oP6ACeGF0/R+8akjDnzJ\nSAOT8gUGksyqAAKRVSkwxCwq6EdWeNIqS7vxL2QTnLmAXFnXPdwazeT1hBjz\n6/VwE6GhCQWLg7PiZFCk3sc0bD2cEmw353c2V0MeYdfmBpVObJ5vAhZEpNrK\nitRepjXDJ4pkQEapi0xrSBQcZuAYcCG3ifzQBQF1PmgudR2j6jDyi6K5J/hG\nOeNkfWf2HcgXfABEXmON9xzW2vVLsDKAL/FMFInCZTEogqwiR/zqhBKV1ol4\nZVioL+2C33wY+WrsmL10f1Uei4kmhsoeu8m5J1LPshmAtUZpX57W7FD08cmg\n4Dl84SbH1uYQGxXnBemzpKscawY+1VZXqNp4F3OxEtdEWQIQrDtbldMiwa1Z\nMyfCRNgCu5d0QKOtYLGH+8eJ0ojOjp9ZBp9YA1ctVpy86MkoABN5bxyYEsIR\n7N/BF7ogoCQCKT0vaCOwsO72bE0i3qHunCVSqaF4SfjISjn8G/M3gzXfGnG9\nWUhW\r\n=9x0w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTyLABXIV0Ia4oxJqXmq0d+5kpO3+RelDGejMf6dseHwIgEsaYuckwQPhxOYKyPl8rQPbyuvj77Jh2gkqeBR1/kps="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b95fe100.0_1611359545232_0.5037970452826033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.c8797192.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-icon-button":"0.21.0-canary.c8797192.0","@material/mwc-ripple":"0.21.0-canary.c8797192.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-abD+vbGeXLdEWrAeyLUX+ALWtVcZEm7wBcOmnlgdZayTnWv0ibFVLEd71qSyEQrkQe1+ECQbWmjNyM1jymIl3Q==","shasum":"6d4744e76ad1db203ed870045a04a44c648ebffd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.c8797192.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jMCRA9TVsSAnZWagAA3EYP/Rc5rJ25npSvlezeMH+O\nqNqq2PJ7gGV9cQxyGGsTeMr18QfQHP91VWToYctZD+9iGMrfS0V0ZzY/bczu\nl8YyqCfevRwvWKt1ufQUWIJ2K0TgtQYUda9hoAiwYu8bRb6KrcYX5HW4Z0pm\n830PhMIOdr11zNj0vN5op8hpKw80m7BswZbysnJOQzgKA+33qQUnyewhQ8ZA\n9ZrbJyjQu3BMr+kHH/7kTLAFdGiPaEU09bwvWbDCmRzky4m9k7KIxI82AU7e\nzytwChOtoEpScJR2rBPUmjAFYEqyZfMIK8NzHAp5XI7bwCSSwD+nES/mcLI0\nI0cvDAo95Z9DIDKt2wnSedNc/dhHouMarwgtI2/BmZCkuEXudSpKZiJWONUf\nhBXCUaThgG6VRBkfBuY2+jJeLiAd9zYc0IDC8TqIP/py/HxNj5ZG6n641ZYc\no/nh5rnxwJuBgwGwT+LvJU3v13BZYUCdjmVMIwpd9A3+47xJOMwysyaC3BbC\nLTvaJzpxR/qiZ4JXKZ6VUB+Ro6Ld6jgyAS33kVZA5FRcF8dJeEpdhDxYjohP\nH27jdPkeiL8bwvV0xxXOOO0e54r9d597u+EFKmdaoS1ZAZ0Hz9by2aKiQmaW\nhDchD/utOpI5njbbgBSCx0PUsRhqVbn424uiXzLzn1jBTrL24bi3qA4fXxMH\nc1o7\r\n=os8F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDba5GTW2SU/uw2STV0SPzNUjAm9nXEllOBD1ui19NCNwIgFmCF8A8Azi8o1TadxPX7hxQyT0FBD/D1H9QlGL6n/8o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.c8797192.0_1611360460498_0.8113615247347707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.946f5563.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-icon-button":"0.21.0-canary.946f5563.0","@material/mwc-ripple":"0.21.0-canary.946f5563.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hZntRxAwd2wbcqGhwH+d6gzZfHGe1O0FTNyZNCW3ZpFA7auTlBQnDjTAZ71CqHt5BbpTF/wL9sxGYTr5qqI8vA==","shasum":"717ab3cad8b1978ed6d7ec3fc687d97278d15467","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.946f5563.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FQCRA9TVsSAnZWagAAHRwP/3xlsyT7YZwZYP8sERPu\nkth5aiCVh4Jq8fxiCmD5LPCdvsFyvRBWccFv4raGlCHLIPt4v0q/C1lDWfCu\n1fe7Y8lxcmWUJXhZM5bNu1gaa6yE93kNUzswwl7Dbdu7ykmlc6nuIvM8F9CW\nYY7oc82oG9swMR8NWlvsZl+bL0WjZ3vbbODofF0aLVwOud3FqqBSQ/Gf2peR\npWStrbTn8KJgdOCfwMWiBKCYarBThwreP8SRFSaCdkM2aiwN50r6pif5ZxSu\nUbQOyMwpjwBhC4xVpvT30WthsI8p/fOsUl+vxVRCnI5MgkYSm4RlUCCGypG0\nyXTBx/kFebMSYBogEIneRIY9h8/O4mvW7H9vA5OswSrakITziQyrwW+5Ivy4\n3BmNOGvntdt1nL5cBDZs5fU2G3mu77MPkz0w7hzadfYTuV4+Ci1Z1301/mEE\nyFluFLB8wgbFM7rNx847xCEkjkmF23BFV274cs3WFTXp18hqlWS64EUQJzEq\nOHgWWKj/891MaKv7dEXcL8TLWhXEQH2A8XnD8Mmx7I1fIpH7kjTzQA/znmnd\nhFfMHUmKHouXqDs9DoWDmDWLk/FeNhPTnyBSB67NqIc+XrEqeb4VoWC7brfN\nhxr+ZuutugTb4SdC9oNkcMRXLPFYYKfhN6MTqx/zyuMxNSQ20WIP0zT0NQhb\nN2mS\r\n=V5YY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID2v6iRjjPHFN9w225aMZPmSlY35tKshJHhz6a5UICzyAiEA2g1nQdQfhH27Igh5hwo+cSXI9sMvytLgQtq3uWmdkK0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.946f5563.0_1611362639914_0.11598790415806781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.43664f0e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-icon-button":"0.21.0-canary.43664f0e.0","@material/mwc-ripple":"0.21.0-canary.43664f0e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p8WsrWOos4fQd8zvh1Zg6wkpyN370nFnJfaskrCvTU7gmUnxc9N4lMzlbYJUw35sICMpgKcJPhlfl0OcVpwYzQ==","shasum":"8117052caeb00cd048bfd7e724aea140bb3712c0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.43664f0e.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jmCRA9TVsSAnZWagAAAhkP/jHGUd07VKBq3uXQi4fn\nM9dO5aFJX2BN3bxZbfqQ+v6WJUAjcQ161OQNtDVHOjrjc9NMN/jYEKbRF9sh\nZXTqpTk9F1sDPkW+tTknyeWH1dLHWYZdM6Q5CYpNmFznNw2hPw9uQ6TZBGA5\nZbC3mWgwvG7SIvzAhCXmDAn0QGoiZXAZgW9M3KBJ8eUJFGCOZl1LrczZEA6g\ncdptxUbsFX0ZKYtUFaM5NoS3UKv74PWeqRU2Y2CeLU9RVW87YwO7dNM09DXm\nsT/2i0httEwLyg1hiGRd0Am30Ifu12NKXsCIl674asPSBuNJHP1lSiADzA5n\nZ048aLag73ndsXEzU4RSMAzGdq0/MxaTfEo9mjBr3YyyIA+s+Aa1cn51qFvK\n8qLifXf8zAxH4+JzmXMRi0/yCuhzaABJVePOksEsIFI5ZnwHOB7Pmslsc4HW\nQTThsahB/WgThSNkfG1vtHO3p5rWjUtGfzj6I0LWIpa7RAEfi5hgDO7NvujU\nxKPaxg/aD64ARJrDk3xALnoE6mNtgYw77b7e9JBLdj59QP9k7yyZX9SB6gHV\nQ+ckb1mfDtiqQEIAzFtyI49OJ1g2MsHlOmRgZvVRmfx2kVpbyJre+aLqQ2qn\n6wLHqjZoQ81ZDRTKb+EcppjBSi/yzWx7cCcGYMrkqDQjnnNUMjBuWL5FIQul\n8ASu\r\n=GLhM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxI0NTTRRWti/3kw4dePqqxcQgsq7gmeNq8RFVxZyqlAiBnAiecWAp6NzfO9WJ1rpjeSOgVwq3j2cwrxT+allqG1A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.43664f0e.0_1611614437674_0.04956167349862883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.2e769e3c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-icon-button":"0.21.0-canary.2e769e3c.0","@material/mwc-ripple":"0.21.0-canary.2e769e3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oewxZgvyFwERXnMSx/jl++xvTGNJnno0A2WIwLIGGvtqNFwfmL5qtuwf/UQz7/8wA6vHv56sekjGaQFSn9ztkw==","shasum":"78295d669b8665b3a05a262d2a0cc92f55aa10c0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.2e769e3c.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10UCRA9TVsSAnZWagAAyV4QAKH0ZqK4T3wjvcuoX9Zc\nSXOYiR4jsgY1kHdJqZlDMkISJkpyfrPrd34C6ptstCuGj9PvClP3zwUZCsDA\n98iIUNfiL/ZbFTEcUmKt1Pvs/B2KCIfnnaTO4XUHzC4/ww3noSa4C+cgAx7w\nNR1IQPaHG+09SnovmB1YrWXGSh8dmQwd82s8FBeztjQFCG6WINTlvZBiiR9P\n3Q5iEkl9BqWreXzGn4O/eoFCjG9pwNCXOVXCYO7TY+/kbIns3Jwgu7MQaVHT\nqXIwdW9rI52BY3w8+kV8+mhN+WCSVHhMSoh1iKuDTFGAQ5WSWK+6KUP+31rs\n9HjFxORh0eVym2XsnGsgvG9ClZh36gFdvOixjnzU90BnUUtI29bztw5VYQCl\nM7JMm2n6nlQ9jn4XYhq/Ypfzaf1C+2mCdzSPrnrv0ofdRLZOJtybXWRI9E+q\n74m75GujvHm+Tl00PlYV9iv8M/YmsgxZQxZW4yX1QI0U3l/0Jla3WX5tOewp\nba9oKWdy+1mpO3HJBJy+NFWh3mEqdNaMpaSYBXTYudoAWN87N6P1ctZjPka3\nh3FygFO9EqNQ+vy5EoOpVWsFJ4DMG19rJ20CxvtpeMwg0XVM2/dECwu3KdDk\nBxThmTFYFL2JYOAhKR6KznK1rUWNfJKM4XUBFFMEs2KnsoY7M9JvgpRW8Cd5\nlNEi\r\n=MZ+/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUl24OQEG9oCJkM7DOE/scKDeetjOhBylDAKbraNZ1UAiEAvNY1RAHnQMGxCaEZK4/4q0GIqzjJsPKxA8lwx7sHKQI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.2e769e3c.0_1611619604302_0.13345294937341157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.14e01610.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-icon-button":"0.21.0-canary.14e01610.0","@material/mwc-ripple":"0.21.0-canary.14e01610.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-590NcOOckdDho5lfIB10v5265/GPv3OG3pB2bx2csj0zAu4/AaK1wMpQjHiPO75i1RxpFYlc+/fPn1AIeHeyNA==","shasum":"55593c8c4f4101eceb329b09f06c010b6aff31e0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.14e01610.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcReCRA9TVsSAnZWagAAx9wP/R6ibPVK7/M7b/oO35m/\nRDP+PRxeFMAIokpF4+YDWCY273l4vpxaPVKUC0zydAhxEJP6l8ip9YbCPCqH\nww9qZ4MpsiiCZJbRPMGRI02YFHi008KkAM+AHEebgpmi8VNLpctBm8y/GKq9\nWdYwQ1k9HFi/+5lWMSE3VlaXc82Ftj8igHBXRVT0kEV4IAwxfKOZtQ6M4xyv\nqMsptZPTpdDgm2Q+Nx5oYtFcJT0KE4Dds88ncGSan0LduneJMB99k8glRn4e\n45HAvuuyvApxTTcTYL9dguBlrP2wR+x2AKYkPh7+qHYXWtIwFcXcwYVEw6cn\nSckzhk6JPV4yTOI6Td9hDHtWwjDSrMFhxh4qwDgoDKcymNyqBOxaSA+/d5W6\n0QtOvunTPQsTwhZ49+PyHsfo/1AMa+N6IKYHI7SDZoBtoa9JpxAY0N5qxOjn\ncTJH5yUQsmqeodNQw5GzGKfCM69onhLfeyJXLdXyKGkNNM9qPwwkudXNtKJv\nAfRb1t327XFfg5QUsbz83Iky1d7eMu+Mz4GP/eonUVvQzVFoTZAnnLFaUijr\nhgwIRRbpndb59r1Uh5wfnMiil/VOb+/qUuQ182kCh09EzFYO3xNsNa8naJKE\ntYL5jNEpvs7BJPiivj8QHs2r1m4/aEUnCmaNuKakM2823OF+lDLqa0AJ9ahe\ndTpj\r\n=KaEX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZ+sNqDzt2Xj/W2BXJ8o1Dx9zdH4B/kBf0RK3Pnf3ATAiEA8PFKd5YnXg6b9g3Bo+4cXY37E04nMCficnGIuDB6SCc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.14e01610.0_1611777117925_0.9750076554259612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.5de00c1b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-icon-button":"0.21.0-canary.5de00c1b.0","@material/mwc-ripple":"0.21.0-canary.5de00c1b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VTdFq1RF4b4hOd/0mxwR+YXvOrkydBCgFMYvz6DCko9/k5Xg8T891ilLVAiTX2+MCR89eAagQhmX+s/WSrHgUQ==","shasum":"50eca46f5bf4d36ded93ddf0ecb342dbfd51284a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.5de00c1b.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpgCRA9TVsSAnZWagAAxmEP/2PaMCBEY00S78g8zJUb\npcZjAppDDiHMeXX082NJN2eVI/lDyWzuciABpCpuG7xW+foE6DQM9M2vdGwX\n/63UTyGahWblMH9d9EHNEP9YZAgeICq+35tobBVS0GPh4qUHI18D4q4jp8Gz\nWeOccRgDvAoR18S04sgM3lbR68IcTF9rf2d0PEcSL0MmLyVbGeYKKixA7o+g\nWIt7NqBCl2wya8WYIrVkGNV6uXSQj5qv/NWcpTXTg+JTdYtJAtp/cb+494sY\nOs5vU8uVJbBFvOomqRtsZZW8SmIuO1ibpUik9w0XNRs9DV5Yrh7G3MkKPAHy\nLzLYFmH6vKb63crIc+YZAsShoQ44oJfPhA6xuey6M7iwbWcZ8KNY3PSheikM\nH6ZwUOBPXKa0TvZyFCiWFy2jKWkLR8CiPpnWDUmnI8VHhaVjfr2vb6WkTgdn\neMuJRsMIiyGJLxEhbYuePlme6ZJjNWd/NYzIjAS13UoqzaAg+r/AFOfbfl3W\nWTd7VL34LXkjr0+1U8oqVYKy/cq8gq1KdktshCVGRv3SO9PrJj5bcsjxcN9c\nXHyEhdrd0M5ytIF5cWWvMW/WG33037UeTtlvLYRJzTig+PTFuSpw2yEyBUVh\nTWbq2xNCizbkoLkFHzjUPOyojBPw458CGSzmtYplBjHTRmo8PnjF/qxLZLN5\nFe3A\r\n=XVWB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxHcpwX+o25Wy/wcEPsyOOP4orDAzrwGH0GrpVr6NNAAiEAlRbIP+NUZre9LfHpg848yuMyHytbtmelT6AJGHZ/sE4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.5de00c1b.0_1611778656064_0.8822734172070898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.5a328336.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-icon-button":"0.21.0-canary.5a328336.0","@material/mwc-ripple":"0.21.0-canary.5a328336.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-drUHkQDOOeayHYLvuY0pphZmkRqOQEsATUDgf+MMQ1sb25oyhLv/igYUyzTIL9Dz1BtYqX0tkBAZON49ma5i4A==","shasum":"94c129dae72a54297b5461085d7f507afd5d2c63","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.5a328336.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExadCRA9TVsSAnZWagAAdeEP+wXyEYF4sP0OSKufGUZB\n1IA30Arzz3MoCq/nBgH/mtUUhGHJ8YQCi/OA8PBozFUL+Yfb/a4K2q+d8yxu\ntvn5UmfXv9P5588dx9AM4wjkEUjrapYsiqF1u+YeuYsMCOPiDrucY6/4gQIm\ncvjHDABEaDrN5mqpPFGRFm0ALwfUTwBpAiHbChnozVCqCea3v4IVt8bSalPF\nTcWokCrcN/ez2WLDz7dEBz3nAQqeGPw5jPvd/YYFYsee8e3Ja32HVo1NhxQW\nQzigQFQ1Eoy5/0Y+ZB1LKeiGNOXay4Rk7aVPGvqLtIxEVGyxAst7VZlzZWU+\nCwfLWQ0h9L627Zc0JVz7jTQxnFXLBB3e0mPjQcNr9iP+f2noSMHBz4q9h09+\npJ2uaUxoEDlpb+gFgkB0aE0DZXuSNolo/5o6GLn3PsdLexqesTePL00zHccn\n5tkq8o6K3zV9QgV04tVUjMxdxxjyriBm5biS68yj6tq9/TxCqJk2TTYTYQm1\n+6IEKHdS474i80Bk3W6080F4aHoN9BxTGkS0LO93hoOTb9NMyKuDQMjqQRf8\ncn+h5U0HBHv+iHtfn+voUcvqk9NkdjHp0F+oxIIjzQocjkfp/XC9JgO/P5QQ\n7/sM18Q6OmqLOetRO8w1Pqlv/70r4hjFkMewYRSs7YBJADdsVqhraIEcSXGB\nYygP\r\n=n8QJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8uGmLc3wcYAhncXkVE7NmYpcNbOaF0SzKortDqZzlUAiEA35/HhYfLtjOo8Xb876xBq0q0/fTvTOvmtLfU5YBTqqQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.5a328336.0_1611863709413_0.6246307233182822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.533b1251.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-icon-button":"0.21.0-canary.533b1251.0","@material/mwc-ripple":"0.21.0-canary.533b1251.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-NRB/+De1voJkLZXH/3suLNCzt3SCprpFXPied9Pjowo6wvj06k38wgVbjE71PwtaSKLdO3n1dRQQbYvC8l6YPw==","shasum":"5e923af4134182d5595b3c2d922ab020afd22b35","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.533b1251.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCXLCRA9TVsSAnZWagAA8MwP+gN5veD7Y2B8+ytFMX7U\nkAWjupC0nZwYHXcl10DLoVh1MFYXSeFnNEt+9Dlao/ujQntRIANhvxxf3fzm\nU9tgzo1N1Rkx8azPMO29dH4nLQpqMu2gFnvdyll2qvsmERCC+dBs9s3EbZZH\nwwca7i9l5gCYxDDvs382+Ci/bGQWBLnA5/pGbjVXgQTV6xBav55L/Z/pL8Id\nGLxorLwaDS80EqTmD6G8RlWrCdkJYqv30FOa/V3W54CI7eTh6aHUhF98qAWG\nSyEhfQJ31IZsS43PXKIwlJTP/f47I4alMR+W6p98utMWjnMrGkomRf89Mwp4\nTX85VxHUab6x/BJ593kqg1YHhcITrOyv1C4oVnx4RqqNaypIufJMIu2d51uk\nGmcbho32GkInDpWqOFBokDpMnuTUNKaumCjeiEtgA5A5sSUdY0T+L+X57dHF\nbRzj7k7/i5UZphoGZTRjPr5RQFKzWGKupJO+X/P1df/q8gNgmkydKzgNWGwQ\nPjQi5q6R+qrLFxzyVYzLEUqKy2RSdeZsK63HU09jdXZPMAMbZ8kQ7tjm6R+X\n79Ibct30GMGjETi4yNq9QPaYCymBsv6DVlY3EJauf3wKONV/9qvM0UqMfE8D\n33cmFdW44Bt65QntAvklpSNG3rjuU8LelxfsyLfn0VBShIQrBNJWalbETBY9\nSjFb\r\n=/wIM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/t+iv81WqCR2UPuy1AMwqS2EBDItbyPFsYlwt8F5kJgIhAP7yBEOV4JnF8g5rMftnbI1K0zRT398J8qlWLnk6Ic+v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.533b1251.0_1611933130791_0.08793372925847587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-icon-button":"0.21.0-canary.ab5c0a10.0","@material/mwc-ripple":"0.21.0-canary.ab5c0a10.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-AtbobHVqwcfOrmg84hghkmJHq9MEMk2rNfj40dnyAgdrgjm2Ewl8r082JIlN2Lf7RqyrB7eat+ZwhhZiVPMm6Q==","shasum":"54751fee1293d658abbe61d072707017e73a6c0b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.ab5c0a10.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNyCRA9TVsSAnZWagAALdgQAJGBIalK/ckj+1O12rxP\nnO7frwHoPOymeVn1TJaJr1T6dX5DT5gmVH0yAoqdAooDabVLkdGo18m9pbdm\nVrINBa9p67RyelTHrDHvEN8LcYKWpjiUdjaE+jsFd+STML88Ce6lpeQpVRod\nDaaivDK62VDlfijB31zy9dOT8NZHW6uz66+h3b+iTgGXd8cZ7iXWUa/9+LQ4\nKs3yV9pTo09pyFiXtgDATVEvpUFEzMjanhG83x7F+1G23JwEwbF70yQAWa7f\nzei2KnRNis/juJg35ZxlNUtXbCtTVCDxk2MCAwanc3zIENBQwBpdQ2lwGltv\n1yNM0vvY5PwbANWVzfQ4cnVqascaruS7AxXk5i0tXScb1O4InLSOIKgsjxZO\npWzgF7rV4iDJMV1Mv3w+AGLeTVKE1Wa0AOASMflrdRwnL+8LhtuRF4pea4I9\nO0WeH4W63oPNvnkDBgZl9V47JIeH5pV1QD7kRdnon7cmT/CTJ0mLqEr2kHIl\nC43ZSTIkI9sfPbxEWp/yj4BiLGNWbb8Hh8PwU2kz8tfdU3KMVecEhwqHmg9x\nHyjHLiZ6RWXosiydYYhIwhbEMb/F1TRv7xvxyUgrEBN97RhijD1yaTUX1D8S\nlXXndBupPvdGXITUEAMrJdEJynm252VuGXO5+rWc/HdydcheiRCRE9686Jxl\nTHkt\r\n=8HKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrfaCKYQ3jsjsA6jlaL+RTIHrdmnew6wVYuarYvV5/OAiEA3X3lL1HvB4ymQdF8DoEp/sTlqAJV5S7eBzp0n0bT8sA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.ab5c0a10.0_1612297074261_0.6183865295894133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b7a40b27.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-icon-button":"0.21.0-canary.b7a40b27.0","@material/mwc-ripple":"0.21.0-canary.b7a40b27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-nD/ws8DO4lLJkHFOKumeL1gJ9sM3xNUJcVEoGGT05o8KX/tOy6OJrUqW2omNeh9b+B3/DX8Y/3EH2EtAQxt6sA==","shasum":"1648f48115d66d16d85069ea3d1636b877c6fa57","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b7a40b27.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtyCRA9TVsSAnZWagAAwzYP+gPCy2QFj4EuA0iM3X0S\nbTIcvh8pQnEW3pt5oXsvb2MtAeqQ2HL8QgiMnfjK2agjxhxumJRrzUqSzq+P\n/HWDJb1ljsDgHFLsaQnK7/VGnry/tfpIngkgU3pXipULQpKeojFA2eOYLqfW\ndQsnUPMpeXmVzso3uUVtFYXpOgQOLaAChviZrGqk6QzhXn969YqdBOHUfswv\nB5JHqyNJgRs41pCASGY3C5v3WKS3Tlqokhp98wWOC8lnoh7rkDGFwQxlCH+j\nQALGfl2B2FMr+zVnkp/airupVQ7lilEhMI60RJlmNboPpyV/AqHWD3n9h+S5\n377c9c4LR2eKRUax2X1bTVQx2b7KHbwbQ5rP/L3eCdD3IrFTlkfuUEvYpR3a\nw1/C4am2NCFNA3kswHELOmj0U3cQnXphSnA1KpgqkgUH+mED6guoklqEGBqk\nJjslGSP46XyJfM9Mkh5r250qKFv/cGt0f72Uf43+7mAXxNA91KGDdy4Ads0a\nL9KSVHkc7TBXA86ftvpMz+N0I02i4uRgU+Wo1wkG4h0oaFGQ1b22O6JAydJW\npeCgyYVVEq2St5KhQCVeqrSB8PlA1iZ8tfa7zfQeyoA94irhbQla5GAv5xKX\ntHrXrsILSa027D1J0aXL+ZxzZOXKnP6GfiA48vDf+5mOCZrkAYmkcec6b6SP\ndlnZ\r\n=GBjc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpRvdlMFDpzu9F3FuDHDr+nGZkSHS9JhpbvrCxodAV2AiBsX8CDQMIevMMRn3P4P7a4THiIo4pNHumBwvIIrjzteQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b7a40b27.0_1612364658155_0.7446929967785443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0fdee204.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-icon-button":"0.21.0-canary.0fdee204.0","@material/mwc-ripple":"0.21.0-canary.0fdee204.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-CwOI14MU/eSUJy87YpIqOpXqVx2Dt16yRor+3oNjQr3tbJHw0F2W0Crm2Fsq2dtXlfjbmCC34qgj3g4y/jJTNw==","shasum":"7ba02da71d72c0b79ca231d0cc01068fe90de8a3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0fdee204.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuy7CRA9TVsSAnZWagAApSIP/RAhib91K6mgvFtdd4a0\n3t1xwfIOyLmrhg0aFjO3BU/FQ5nGpSyduESPCdOYArxcO7QAAN9IoqymJPjj\ndkmVCXbR7THjQTyvyPbuR5r7u6i8Ku2nsgAJlXSJzPeZREQNLWsgmj6Ygdt1\n3ibjlYegT+loa5ywDqQ4IJpsCkvQZIk9ecWmVtF6+qj+/EZIL4JK0QHCgV2V\n3YxZ70+lcBGizLwwx1bV58WG+wvdnCz1KUYHehSr2dlkfiYxxl2JB//XWBvL\nQW3yyZbcQbdM8zJSA70/gtwSlBAeKBIrIRLcOXeRHu38sag9lslnjiNAZ78v\nRfZ1NhcP89X2vtv0UKFH1fU4LNBi7Xz3iRMKl31Uh7jjlVH2DhO8fYPfRAN7\n3PsgXD4++g40GXqLOLy/pOabaOekLdx2OykJuyfiWBG8FhqUJHFwa32Uxpm+\nhMjdV+vpTj38tHn0O56nz2D/ofkDGHxGIdKsLUa68o2xjr09TnEP3v6BGWx8\nnrhWZkn6lAWrutSDkMsulUBy7T0Hrpy901nI3zeYQwMJzK7qpN4FOVU9pFKG\n7+Hd9EKK9RUQDOXIHXXe6eaFuJD7EpcH3ByP6YSltlH9KPNuCDchsVu6iFya\noRLyar9PujV1G8cQ2BShdEkgqLo6MU1Fy0lLm3KNt1nIMaeSJzzmT1kGTMvj\nW2X+\r\n=5O0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGV2o4CB+nXhXkE0jRKirIfFXAkNwEHvezmbXe+t+1e3AiBRaQt6Tx0CBTK9+XADQwMsY9Yy3mDTbsKrfpGX/dUiBQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0fdee204.0_1612377274727_0.1508153941974475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.5160e548.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-icon-button":"0.21.0-canary.5160e548.0","@material/mwc-ripple":"0.21.0-canary.5160e548.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-veQvJvFYc5HMF2zKQb+ROt4moyvHJO+cyCw7t71tiITC2+gEzMxtTMWUOhFdG3QSrZizlWqtw3dY1ryO3GXeLw==","shasum":"ab8faf78ac86fd0a88a64a6793ec62b7c601a811","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.5160e548.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoQCRA9TVsSAnZWagAAWf4P/i5hJAXHKZlUoOX35kNc\nqQjkGUobervvdkLBLucEX7BeOZ3vl2Xm2Ju+6oU9glSUJ5gTo9srqYprM/m8\nKJ000sz4F5h380XIOf6RFuocfP+0jkluTByyEyrijYEMval8/ilX/qt6lPAr\nb/tcUtBllNW71jPt0xU3rnW8rxQclDhWqJg4pEuDLS2pDlSF9H+DCh+FGiMR\nGxAW6xYDBW09PkEZ2Kp6/qm3p6Pv/8Ed1AU/dZ4Ho71tSweTnju6QcNSAbg5\nlIYnUbjJI1izEkVnARcKWpxV3gdBQ4mXTs4yE6FDV7aOH2uKdsenaUivka/t\n8h29XbSRylnsRzHHqorSa9Dwa9amLmy8iNBbcaOTA8CzQN0iYcgRYjxvyixK\nRV/NcFuqUzBQVNPWp7YWOFaAGOWRNtIWgNH/CIWIBOyGuxwmJN0rG35vNYX1\nTthtdnjTDdfqoS41KQZKvtu3BEMRdz4o7GKNfjXMcYReW3zeeGF5VLCH6OGP\nr6JyTCod2ske1ERuVGUC99/qKQLpWPJ2eIeLU2gsDMmyfrJ5ozC9t7/d8QFv\nqxwrjpYSi9Zro4urkXAu9GYd1uWQpUHXeYoXrLnRGp9MU5WiRWvvZ9J8XFqa\nF1kUzDz0s0ourV2ATLY6WCrellaXtoPHdl9lApqgAgHYCI1iQ8RhhZSDdbcZ\nZq3M\r\n=ZYBl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3/Ik3Xl3IprwmeVcEtG0iAmDJXYqmnBuEl/w2sKiMmAiEA5z910G++HF8Px20ujg7v4blXhUuiSH8xzgUZez9A+xo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.5160e548.0_1612569104278_0.7865881841216649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.4fa2daec.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-icon-button":"0.21.0-canary.4fa2daec.0","@material/mwc-ripple":"0.21.0-canary.4fa2daec.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-lEFh+XOUVF5+SiaOf4GWMVul/T21G1HXJ0Pg4iEU4d0G2N8JL+0CWQA+PFHsxqySjiquILYkqwpUVZT00+0ULw==","shasum":"30cef4de8a80a378a01f88ddcad9f78257359dcb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.4fa2daec.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdUDCRA9TVsSAnZWagAAk5kQAJzQrmfLNwaJalAa2sLT\nFx4GHQYlhjRoq+v7vmRpe1KsaPI1ARjeRFndRTPLparsgT5RtKf6NFGxlpgj\n0LgOXFrPxn0j7cr50vVjP8wNu55SZDzw23AJ/STUQrxsRUx+VuhdF1DvWxhT\nf39R6yI7RCkJ2BIaLlFy1h7tC2LxVloV5dSu7IawHo2xGI8+VE4EYiPI7QU/\n+yoNk26qN4bpaT0X8dgvQjO+5+EbZbpaQuz9QUHRV+YXlLfZtKujXw69iWUk\nNzpOzS/047iZhWCHiYXSpavf7xcLhq6JouHKVFxhWu2cQsmwDqMvqUWxK3Yj\n3rHTh5EgKG5fI1dz2FSWhfQWUuMwvTQpDHD8kLqrS2kX4qcW64e7kWCXfRI7\nRN6KKdj8WYh8oxDABk7iGX8SgCCAUXdIwtkZdhnVf4HNgK62I4+MUzXzRTfn\n+FpWZIG2eSiq9gxqJur0PWSsQl8DPcJEjeUNYkEx6dil6uo4yoHdwmjkfV1A\nVNn7QYNyLZH9Ex5goN1ddLgeKf0W1lOu/L1S8T3JHN/NMcn9P1qXlGNu5IdF\nskcyBnWk2ZZuaIRNsI1TOULxYhPPjivDbvTUxDNi+iVKTyMM7Kjw3AYM4bNQ\nzX7UKNWdM+RdKj5MPFvqcdKQoycu2lckmK9kjFdJqCionfaPhXT5NncYh9GX\nt+8C\r\n=H5qR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUDp1xd1lTgUvX347QKtIJwqvlGJV23qmcJluIh6rQCwIgfmiMxxsF55EkxK7saVy9hG6sfblFc0Y7D3OZvaho/rA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.4fa2daec.0_1612829955352_0.014615387325705331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.67f285fb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-icon-button":"0.21.0-canary.67f285fb.0","@material/mwc-ripple":"0.21.0-canary.67f285fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-hWt51rp7YrwHLIgHBDKHPOfI8sdt8Gl6eVHMtyI9IQozDAIYUs/t9bYMrnjXq8cQDdLJY1aWJUfw9VnKpRlHag==","shasum":"e1cf034823c13e15f85fefb5e6ac1a25ce0a0b41","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.67f285fb.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdycCRA9TVsSAnZWagAA2tIP/AnBrDo7QEjtmIxk749/\nrFt/HKvbHAKGCVjsgM5go3V/dPR7aAQmRmlBWX+FjA4iVfHZgaao5i9V2auj\n4uTX0nb0+t6NKF5AOUnq654+zXv1/MfcvYyqSepIzJNayUx5jI0cDzW08mTQ\nkCJ+/9QRGb+4Fugh3zRvV9XFcc3EJiJ6QJA13j9t8nJK1z08SmeN8ip3pX/C\nnVzXeE38JBxcLJZPHaYd/ee0plMG+ZxhCH/2gIEGGIIGVnN1ut61pZd6rUDJ\nfHvwIMm0DuonytvwKZwbChjr9m1iTInIj3I3EFiFa7t6FLm+qxyi4/zl5bpC\ndaK+Yd2TQ53mloIvfhY7ei3UvS9IUXIlpnHZrU84uJeNzEL1d5smNTjkzFLg\nFwIzbHm84JpuNmMVudQMuX/Wob14TjhZf0DK3OqT7AIK4m7tfra9JMzt4Tj+\nmmWEnwBXgAIbOS/zljvVT6RoLc7bRuvZ9qR2JBGSyuEg2i5ZbJB3fsoYUfZP\ntVs4qmRK8JoXTpDRUZMc1I1q4QKEsXDL5g36NQkbjp+ijOLbp2bmRAAzzQgT\ncSQshkJ8bSGG++aYvsid4cUnnhDmW2kMt4vciPXAzpN86JSbwILXbaFCt1r4\n/ORuAgvCGcwX9PEJkAOf8pbXRBEB1id4wwwW744/TH8gbHnP7R9VlMQB3CE3\n2TT+\r\n=TEWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdvlB4BLYZ4qHXROwFpSd8JVjBGMa6frpGmKuU/8kMgAiAvsUXNN6Om8bsKDtb9MTvco5iY6T+a/tt4OjlwODsePA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.67f285fb.0_1612831900053_0.2352429429828109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.58cd5a70.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-icon-button":"0.21.0-canary.58cd5a70.0","@material/mwc-ripple":"0.21.0-canary.58cd5a70.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ZnjCzT2UObQiYh+PfQdVIfOJjraLjekA8a2bTT1udc4Zq+vWRx5OkQ6+ryBnCf3/wVw7SkoZPrzHwDGWkGipqg==","shasum":"37d4c28490ac82b0f564c9fb94e90a4416a1ed9a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.58cd5a70.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdxCRA9TVsSAnZWagAAkakP/Rne+zep2EQ4sPphv/+G\nokALpc9VQOzFg4tOe/6oTL+sn3FVifrQnNYGnVTLl/5LFsS5wR/f/RyGtbZl\ntODE0UIZ3lR/jfU8R3Qx7IxQryhpDWoJTkMOMCGXARQxrnHrW5Ranoy3Z7eD\nny309D1NKZiZHEUSf0ZfEi28E83cqTVBl7L9k+ugcY3JwUkM0apQN8DSrAWw\nBqJDXClRP6dQ2AIAPtRrVMtSBE3CJLGaX7Qpca60wXPhdY5otaLYMpAM5Jgg\n6J3tOvLrj+YORVTLjFke1AQqXZrJmLaJs5IBjeJpv5NpmN4UIwp6u8EXmphf\n453czclH9iGIKzGL7HXpHfpXoWRbZ3RMpZC5MfksPCc3DyiC8OtwY69aULAl\nbX5r/VQDL5VTzMe3PC6dHGDsmTAnI232BIg1F1bKjwisYtagGWGMOoVW9jBl\n2cDTN8xk1MRlwolkSD47x9fKn5+nzufsvXm03mt5nb9E8RmKSnp6FZuxCQqG\n6bQGd9ZZwe9GrvMrFYqws4yHtbgcOfKIcYKfd4eVWBLmypkueahCGnDuIF1m\nojoBQmX3vuAk8nCcMLHQjcDQO5IqBji2+Lkuwa7yI+1K2aZrqIaO0dW/6iAw\ndIF9LPxr1nAMLOeiXx9fE2sGqQkzKr6h4xCjZYPDF/XBZs1awjeOliOvBPAz\n/h0m\r\n=8MAB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8pXHiCaZELoAlbWkOQ2k3Csoo3MRpGe8erukdGpI/sQIgDhq6mKgLbdAZCuPTTRwsEVPIo08P3NNmFMxR5odMX/A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.58cd5a70.0_1613076337061_0.20464409877834622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.8107ca43.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-icon-button":"0.21.0-canary.8107ca43.0","@material/mwc-ripple":"0.21.0-canary.8107ca43.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ur9IivwmKo+tqLs6qQ71uQGaUGN5godYnAqn0yLE8lVzHT0BQmkR3jg9LQYexuP6lWtskp60H5yEqLhRJJUsEg==","shasum":"37624d8ab61db93152cf8dc85c25328b13638024","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.8107ca43.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3XCRA9TVsSAnZWagAAnQ0P/3qdJhnbeQThuDATkE/8\nuLgwsMVkEyJFgwHNPp2zEReFWIxkwcjzOq7zMibdD4zF9ewNjCL+vf5ztDZb\nofb+Wwe9RpnOf5sGKRKU7Vtelrh4LDpW0cY94Iv6qozT9gYh2OqDzD5yP7wS\nQ/OURadju7Qjgl2okQ75iweoWXFtExmPvex4Fd7hjlRleMTA4WJ+QcgLUZgl\nSA/xCug9MDjWaPZwY69dq9ouo3GW4vD7NNPKOQgHFpILjpmqtaGa2zX/+yF/\n3+mOVD9Y1m0Z4qfk7tKSfTgpWCik4SJBkxtzkxs9h+6mgGBlcCN4SLRHQ9Vo\nv3ynuh9S+TT4ebK8EX9x/JtsKgwB0oYtrJMUyYru8/CMFxhVtruqZF17hZm4\neAdOojaioI3t7bqFGY5UrCa8xg3YIHj7tJKKDl0CUaRhMprzOF9ekFN/di15\n51Qq1UDhZYTQbEygW9wvCX8SmcUvfQCHgtBc3y53nk6mN9wqs2WoIxaNc2L8\nG/AHkGS1NXj5Ei5yOPLxvE+HE2r0r89nNJR6dCXtyKY0Ws27BBUHpCl/yuCJ\nU61wJY3ys5thSuZjDRDMUHDiLDQjmoWAEoAQhEocJ0G5FJ5OOX4IfAgybQm5\n0PrVHLxo9BXN/NVGnhxHGQCaBYBAy2d+zhZv7Is96gvuBIbVO6l9YKKVjN4l\n6xyV\r\n=Qbas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+7Al+SlfvJt0/wOuiZSXpzSccUtyJm5aZ4o8j8vi0CAIgEkRTlJPEUzg0jhxC3XlmTct16T6OdPoxZHTfaGm0hRY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.8107ca43.0_1613086167480_0.9637943026535634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.d35d64ef.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-icon-button":"0.21.0-canary.d35d64ef.0","@material/mwc-ripple":"0.21.0-canary.d35d64ef.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-//lxKOPN39jhqaskqrRrP/cgsAzHv86vYrJY/IIK6dKxQqIO3yzZkowJ+epSAizJmVlaThLGM1vq0Y6Q/pe6Iw==","shasum":"485b48f9b7de5f45aa0f349d35967a726e625cea","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.d35d64ef.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEoCRA9TVsSAnZWagAAWgwP/21Vp8pkBrkCzhR0NY/W\n8pONFo7jtbzzOTs6D9dfda8sx3Mzr0jnukEqJpYcoi3pegxAvHGK3kczLbyJ\nDOq+Cp8o4f0R+yDuOSOf4/kmsK4+lhMfRWd79+HEtH28Divo6Qh93MgKRto6\nS7z/EOPOQqCJz0C2vWofiQM5p7WhP94vK6G9hEMaotgjGNnJA92SQWezpW+h\n76HVd6EJKMr2UNhIKNPetSxzPM+7SL/ruuVR9x3hfzxD9DhcJ6anbTX2ofbO\n7bvtZLn2GtNhsZ3Cn2AInQNhrgHePmDybeQSGDiyYVWmF5zgmVzFgqXF/I3R\nFHPk9UICeOKy0+05afZh9VAIVjk1zN9xaHV5aDp7UZayE4Fy0RxTlYAcvxQx\nPG2tbt3BLe0daZKN8h7SakK352+dHftT08KHoM68Udnk2Htam2irdOuyMQ1J\nj5cXaOhugT4TEebYZEB2u/njfjaRTL9MY4+Et8YfCUy0PQr1Reu4vdDpaEXl\nN0fvK1EBLbNuy+WBaAc7l0kINO15UKV7/WzBtVEmNvGxbC4yWH7sXir+6Jjy\nBZra1mM7E8cDarKBI+biDLECfplBEqUbximj9c4GLaNjMK3l3mKuMuKTQ4JW\nDYY6owpS5sSgqTcSW6Om0qMrcqg+c1DZrbGOehXeWaFT+u30SmRi4nKoR8pU\nBYCu\r\n=5urz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDege/wx6pmvK7DSNmHf+BUf4JzW+R7aETvmZf/twtEOAiBYguVDWDbaGwWvatuNH/j0t00e4Cn4FcY9kzMjaZT4cg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.d35d64ef.0_1613087015911_0.6254247857507638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.78bcf058.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-icon-button":"0.21.0-canary.78bcf058.0","@material/mwc-ripple":"0.21.0-canary.78bcf058.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-FeqqvPJhnXUGkE8aLmKv8fW4Qd7sucqXKZayVRb9wgeBXDcmnV8270FouOxdekAV9X1FEyrywHNEQkB19Xi47w==","shasum":"bfbd69dd0649e18cf6a82bfbe9485ec50f1a5963","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.78bcf058.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBzCRA9TVsSAnZWagAAWHwP/3K0BTjU5hTb/AL4vhE4\n+RW/F0qTMde0Whb69V+hjgCzdceFWPIQlL2WkEYJ1RU8DvR0BAoF2HPFLWZL\nIxp1Ne9PXbDDpA+hyR1sRaeY4yon6u15hwPQWtexoj6MXZE5jnlLPcVouQIL\nCidfoPFSHvgYwhOTwAoQ8swf1Hs8tcADSzZWU34tSS5UggMNGgq2Bp87gD6h\na7Sv/kMCx8VsCVSPH92OPGAbz8KaQxVJEV0YVedf+EaOPnIcn79AGJyNXAWL\ns9f6WY6Q5kvpRBFSykN6uiVNiS5EwYWdIYp9bYtgy5TBr/xsBKOPlJZBtA9o\nUS7f7Ay0hcpFgBfdyVh1R+uBDbUY3d2ua6GbS3CH0luDXVSQXKyMvFrOpS6s\nLvNy6EdmPhJm4eehxci0FWMkTJaHl/vMW2IBImBXGWMZBfUxI1Qn13TnC3Pq\n1Kk6VfoKq1xtoOemEau5Mc8r6mv3iTMi+zmx+IHHUHJgrfLpTpPNYUa1Ykni\nkoqk/vT1lALA4sGPSaCpMapQD/UjoS7CvZCzlqetgZWzcWJcC5vQssMtXazj\nHmhFkQNkakGjCLDtZf0dG+p/tBsFlAaRnKwBC+GeyIaN42qlpCYy6SiDuwFl\nrMx3gTcZbEopLGl/BJBhhmysv6yhkkL9tZRH3Ydc9fEkeYt+K0kniA+yuNq8\nr1Wa\r\n=7n00\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKnSuvwdGJ0nxT5T/zhaOg9wNcaO2udoZLyJ2DsphrhAIgGeVCjQBDgBNdhQ4RnJJBNU/BPFG6k7rIUzUmxLgFtJM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.78bcf058.0_1613090931472_0.30277978419121654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0c6908fd.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-icon-button":"0.21.0-canary.0c6908fd.0","@material/mwc-ripple":"0.21.0-canary.0c6908fd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-4bfzX4SjRBmkkGbWSYlKHHFmrFiwofegskRghO05KD3R1bl1u6yKdLCbhz0X6lkWZRd0OlIjd/QINg+jT8bg8w==","shasum":"462d35431039f3fa0c71dce6eddc0ea98f4d2d9a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0c6908fd.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdkBCRA9TVsSAnZWagAAjP8P/2NePszT9qgFHIVlLbX7\naXSwWUpw5r6JTnimwIci8mlZww+eonbBjd0SpC60zeALTLUvB+cWPbNH93ec\nRximfKE8eqHO3ulW0Vr+Q7bGdIyGd01ggC8fpBfc+vM2x6Ix0qmYLDBQ7S2c\nbZmvn1Z6LN3BRUkKp1G64IQ9hVGYomIwjEBLeSuj9/oOb23wzOTipntO36ZT\nYeh2B5YXJbfln8/1FsHuB7yOPsomDqqKfmRukNCCgZN+osCCjJK0KPZRjdKv\ndqalqGMOpkpYHCRrjSJJ4ou1NevuXLUlECjvlJVN3XqDoGqd8o4ictPUOHhP\n1ihouaxTgBvtgO/0UNKOjJYanHvzre5JOPB45TEuffTRuRPPGh1STNpyneza\nRayEcwwUtcs+m276mhQyC4vykfI8v7bmS9M3tq+qfEQGpVMtH6km269wAgQG\nB42Q4P3dtmUN0St37DHRy/ydZJ5sI0zWFtLqWAHb9fc9iMT5r1oiSR2NZQ4U\nyPAKirnSzaw87hqYhyfWagw3SZtX0NDZ3K5CcPWFLXEllwBk2a389aNBcNkj\nLlLmdNsjsTzMGimIk/ZbOfj9qnnVMv2K60G40ISMXodxZQk2sjwFiMewRTUb\nWEPKcb5xnvpZIzhlBZZXzPQOLTS5vgcMX8aiGJWI05FA54s50GjVCeMmy/bX\npDLL\r\n=IaHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1yJuLCT6xs3XIeqoNmCrstYXzkeX0jORiwJafPHVJEgIgd2D0vgDxScup3hsrlKQNPRy0y8AyAGEXrw4JdX7dZN4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0c6908fd.0_1613093120604_0.03385779136327294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-icon-button":"0.21.0-canary.f1f34ee0.0","@material/mwc-ripple":"0.21.0-canary.f1f34ee0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-N3HNHn70mVTHh1hEBdP3H/04WmFTWkDvdpohiZaFqjR2PdCiLbEnBBwjfI/qvPGTnjGi/JzHf37GITT7Sv5MxQ==","shasum":"26bc45c4239b3b31f76f955498ada57143156283","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.f1f34ee0.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKZCRA9TVsSAnZWagAAro4P/19eRZz9tXKUjH8Ig/J2\nJMpLexQ8FIZr5uQJnKCFDQ16n3oXmU8ld31wkCdeg9osSqEBgrFXDqIwA0zT\nKlUjYNFKZ8gLaZJUnlSHa5zMCpaFbZB0S90bx4RkjGTciZM1d7qUpq10k2pl\n/ToM0JDWFkDun8EEo95GFJP++ikTINf47owDTvcq/vHCNpz9Q7p5NzVzwZz2\nhOMnvA7EaRzwNAOftpWgw51rvqWlyGLoSlHV2IIfLbPlUYPwJw5vZuFL3yL6\n/wP9gBufCbmgg7y9WLfE83wYUoIpos3z8wgZxN7F2AW7wXaZI1NuWsnoQOxQ\nJdFB1v1Ip28uOMuByAjYmp16111P7fHBNtpgdbdwjAF5jzm/V8ooVAp1ahBG\n9bcz9QZtw8Kj3dQcervK/jSVa9n8mP1nd7G2Ht/JmJDBV7nfYBDLvQxfF05f\nYEEBiUp4OmGrBR2sJqmSQm0J80kXYqtsmF94F700G1OT455b6rnv6oF/39Rn\nEqpTn/KYc0V8BVXiRsLkF0Q3yIq4PlJL86HIAIZAiXf5G6Gx8oHmBjHSd1gy\n4Cl7PzUDpX/dZjWIIfOfamW6R7fITtQtQM1HJJ7kP23/LNUptGTCZqpO1qhM\ncDj9eZzxhJ6yeCEfOlHABlZg9OWU9VXPx3qkRWz3JIo7PwnrjKQfrb6h3S9h\nC+Rj\r\n=R8Tk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBgmqIXgIaU8+CUe9hXfyvrZo3R1sfjuFIBi2nzX3EJgIgHFbIS09UP7geyNlUT8GZrh/+CxFhhp5AhhvAAStrsXQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.f1f34ee0.0_1613161112761_0.9893390121564285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.d84df029.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-icon-button":"0.21.0-canary.d84df029.0","@material/mwc-ripple":"0.21.0-canary.d84df029.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-r9M9+ODEpFudJr/cfuN2T5qthvrPuOJ9NvrDEFFw3hu8Aaa/maoSmYUHS/9wxGglAhVV7v1XDGvOAG7pmvfukA==","shasum":"98e77e0b47cb023c712269ddc3fe3b677306d8d0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.d84df029.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBg/CRA9TVsSAnZWagAA11kP/3Z8jgC7nFg8j66lNE0O\nOjh4ew1qkjtpQWv21nvxVUn5hmrGgmbNmEL6hrmr+qgHRhPY3h+JLeg7ONXj\nd12/TkZxQyiMs0+9lqlNDmnTNyPcNNQ97PLvTKLd4akQZiIQnGJTOi0kSvXc\nKT8KrvPnx8CJ7PBiZ2ZqeZSiUPIZk+cObdPmQnrmrfNtEPcXVx+vp5sIz3Jh\nbnQn+YErn7Ynij6MklOiEs4waNCduVOLh51BbJ5bjD6ZpdowTrMyeaD/s/5e\nwptU5++1q2Edc0wyCRhLcW3f73wnjhQoRyJTeJ686Lhv4tP7KDQTAPY58+Wj\nrn/NpRyno1uDOIWu8qD8xf+MxjqYiVVPFMQ5DGL2xVYwU0G4FtSx5Uc7Wp//\nl9zfjwuADHj3kpxk5ZRm4UfdohKG0Nx96mBa7KvI6ZkGjC2fnQxtGowvZAE0\n9esu0nILamPAMeZYPKWz/KiY9H/M4fE1d8jn6xYA1Q899C/3HVsBJstSkx9h\nmod2QvQj7d3bgT6eb0EuSEduJQxiNGf2XtY4LsaaPNJbUfcI1Buqtqr4u1ct\nmcM5bYWP/7Wh0OBfyh1JySzxiPKDvmnAX12pVA/9+ejWO1AkHj5aEiej28NJ\nb4TmAz8gF+bxuMlH1jft5pPm7wN8d2yVIXw8A6p0yh0qebzZtzDoh1O/StqZ\nTaKA\r\n=nfsR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7DbNR4QTDueXk7T76PBwFCyHtSslmV265YO9QrOtPbAiEA1AfsjyWuLvLUWRHb3+MUVHM8NftAqpReI14iF4fRYAs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.d84df029.0_1613502527409_0.220540137245407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.c525f471.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-icon-button":"0.21.0-canary.c525f471.0","@material/mwc-ripple":"0.21.0-canary.c525f471.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-93sY9modDq2zXYDwu7hjrrYxFNaEpeav6QFwFxyva3QKyyuBmuPbFH3G8IQ0VDVB3CEwcEg0Ga096hMrW029OA==","shasum":"765c964ba72a9488221b2ef95c9a8a37fa9bb8e8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.c525f471.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJtCRA9TVsSAnZWagAA9tkQAJNGWchMUcAzeY7vYRbn\nMvF2KfQ3FZy3nYbSVd6Gifa1OwblUr5lHbpjgtkcjcpd/455BMPvtp5B3b9e\nJW1NOlaZUgB+4/k205wWzYwzWX2MOa03rGjPu2JMcZ/ariU/G3Hzm3A+9MKh\nYAvpSOh0yfv+8ht1GDnJPiDFZ9dwdjPDhmJ9OKGGzrbYFJSdKIM+ouiSIsv3\n06cdPP/H5ZEgpq9pxifyTo51mPIfcsWGof/CTR2Vm6aB2VRmWsSFPjXzIJBS\nvkBxwUGpABd7BAp0nA9828Aal33Y669ytDlL78+hld+9SgtkSC8/2SHGu7ap\nVftJ5Cd51hi29YJvT6vMl1rSqc1DOkvU4q3p/aaqK9tFm+4V4xgm5c3gNRai\ng7gcrQRsj4X3TFppLh3CLsww7bKJPLeNRd0NFDlncinIkQI7Sfg6Ekc+qwqH\nQhJMRhOqdczsqBf/XQXW0yrwjgz3PmdQWLBNPR/kyBZwogsesJ5qh8E6pYvX\nXBQqg8C6c/d6rEON/tsE1HhciBJOEt7Mf8ZA0ChNzkWfREEtS7wf1YdTb41P\nqi2ckRW68hLD8CzdyTmyKtTOAZkx4zkKVfhoMiOyhItyZjp3phugOPNMnZ7N\nOKittTH0RPjSV4OUFx2Wvrew3QhE2YvSEwm02nWcB7IdwvIFdZRKLJtlpjPd\nV3CJ\r\n=/fCA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICNM/o+zshpeEOm09flRctR+asMew47Ts5uy5iaEajTJAiEAyAgjY9x8xPzHxLrmmQEGCD4QKnXMNiQN700oxq8ETyc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.c525f471.0_1613595244930_0.9464623307879838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-icon-button":"0.21.0-canary.ba7a1b35.0","@material/mwc-ripple":"0.21.0-canary.ba7a1b35.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ZfKYGT3arrTkyOIkMQ++QAPUBzh9DUB0p8UOa428qZBhXUwX4zHnRXdlmv6VtkGRvS441UyYGQc64GVHgENNUQ==","shasum":"30bfb8df17540575c9477578f0df5bb6efadc276","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.ba7a1b35.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLmCRA9TVsSAnZWagAA6pAP/2xpsxjdKAcsdGh45ps0\nsq/wsNfoN8ev1wYYBNHXy4S1m/KmyZGPlJLGb6jnEW7WsVLqOxBv7W6Nwx+S\n9y7uikgQLJf5uPl349O7tSy0YA++2WeVpwW/mRm+zF5Qxadn6nmuJ29ecils\n1VfkjbqHvUrrwGNzd4RL1L10kigZ05j2USdRXNdxF29XMbr7rZb5cyMyAgWl\noo/SstNG2RhddpcY0v8W3ic51iY7A8+yh+gHZTsjLSkinqfP12SEbM+JqTvO\nt3d53Vyq7tuLNk2u7FUK0Kye3bIJNuv0bCptxFP9nlj2t2pfFDGVOxRUV1EH\nlGGdwUSPOSbOWYf/MfneYCMSmwDTjBYBcgJeNI/c/A5BFg3Umuztsp14D0yp\nLPh0mtyqPgahbZHt1c9q+/ZxtUYZUzZEu7R3Opod88VDn6CrVq98C8nOK1JC\nF6muL2d04sL1brtxFlK9H4JfGhWAc3EKV9t2NJKcSPbkKmkyTIEooen5TdNl\nQxhT6Kdh0vvvVnjQ9B235WM95F4MURaq4EoRqnjS/I9B2Uf9gJwkYQfE88WR\nqs7ZYN5w0c2uwSZCLXau6o/AKJrIeaua2H/Azb5r7hzDNP2Njj1+80utRob/\nQPo7rAMD5g4hX6Yl3uPlfpyZesGccrcVlLgPQI3/NG/PX9JxJIrXxoAqELWt\nYl7H\r\n=FkAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkOUZc0W7eACQxsXFc952UPexkcwFFkHWJjqjTnNCvzgIhAJ5yNzFsiru5uBuWAaTXsCjdkwOVlykoe8xaEuBMI4x+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.ba7a1b35.0_1613693669534_0.0116412519587481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.9a566dda.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-icon-button":"0.21.0-canary.9a566dda.0","@material/mwc-ripple":"0.21.0-canary.9a566dda.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-QGUAlNXdMduTO3650Vkt/xthiy1PLsh1bDTVAzp6TLBL6elZ4q1FjWh82R3jcPh2BYkiiVft1gB8/+Mn6Ny7fQ==","shasum":"35b1c8e6436c08904a070809d887eda275dd9112","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.9a566dda.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWsCRA9TVsSAnZWagAApBIP/2Ss0Ul9ySykN2w2qc0N\nWRtnBOA3u7R/RraLSJPX3g2OorZnZs8bb8/B2Yqr9d0huKhWwleZtD7EXGYl\nx8lZueGvRXGmtS9S5ZVta0n8qAj4mvLumgQ9uWfx3K+xu3GpmuEdCi/bQ93v\nUgo867V94uy4Gyc1TxP+jXTYr1N1k7N3JEIJ7VjpFT5CVbyJxni9w/WHmfht\nX/vIlXHqqEdZFO2tEa37FwKFwpOHH4TwmBmxGkSz9zqJQ6ZPAu55c0NMCN6I\nhrx7kslEexpwfDGFYDclifYT0xhWcqPdMHau6AoP9BEpv42QFqjldEiEtbHf\nIUi1Ci/PSZBYsjOk1YU21Yl2zlWKsOxzdUclVOJqYLknZHWvlUb5uhU9HSob\nQ39uDuhySMhsif7bV/E0fUhngPjh4tPyE296FiA4Fr7diwHVCJSbjKdmrDra\nI0/0MStEAYu1a6o2l4L2C31wj8XqXjiPxn5ygNsu7z1rJ9IvkXWsRRx73OJX\n9TmQ/+8m8ZBzOU5QQQa8ciEXTgfYEd6f48K85BOy/SWfbwS45GBdUrFrJqSB\nCVNJscmOscTUeP5c11RIxpvTY+wKi/CYCx7MxCldBX1HZrxZmWGLI3BiGoyS\n+5XG4/FBGXZKihahs1IKkRmeR0LeBNIKJ7hnvv730cv9/QvDExGM58uYldEq\nxSmm\r\n=DvYs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaKYUkl4DdmW6B9EiX+lB7a11UEr7ZQyIgL+NkBq6xzQIhAPZOS5Orcy6kkDMIrNVgjoXph2kFSHwlIMFzIoN4SYS1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.9a566dda.0_1613759916317_0.9707489791525485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.55addb8c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-icon-button":"0.21.0-canary.55addb8c.0","@material/mwc-ripple":"0.21.0-canary.55addb8c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-CZADyVnIotdw8/Odt4a1NJ0LJriIqtNcCGXff/82y7xhZ+xCESfTVYLNj42kpfumizlullS9Wv2frBtGKz5CDA==","shasum":"5318c19750db9903c043d0d645928781cf7ee625","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.55addb8c.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDWGCRA9TVsSAnZWagAAxs4P/jmH1aVrBI5zkR0NXpXY\nnGcJn3g4HGr7CwfKB4PV84NqmiqNWLKMhdmDI/rkdUS0WrU4roG7kjMbIQPp\nC2EEkgkaD2tnQNPJ6f88FuM5aIH7VwKjDeyUVHd6VdsuQ3I12Wt8aTDLmJXn\nAdylevYLhF/dsHxXmxup+/L6VvsVto45aq+RDpKorcwZPXJgPdxdEkhlMEcI\nHeQkPlRWgP3YqrDJiKU9h2Zl2SsncRgh/rMQsUB6nwpgdn/8ANoaGwbZ6yjF\n1u/FYVDiEyEFdu92olhAoOfkX1Bg+b//SRqMmpeSQ6qGz2l4FkwmqtWOrhSI\nOnqXTKwyQDss8kqNJRtd5urP5/Yf1kpcrPEk1dpqQtiN50bZUbxsOaAAzQOL\nvBnWIHiy+7zcRSS0f+v2464tpvW1KcfpSPkGM76Sy0e17zFayDkN1ImaiO9C\ntWD788O5AwKoPS5S3Dm3G+NP7bDKgKJYM5ZqK2+RqhANL4Y0qdAMA7RsH6FF\nXQiRXmWMbFo0Hi1mX7S9m9SErN4MkvKW8CpEyAYeGSOfa6iOduTcLJSTVij9\nadl+Fq3RsOUdlG/3l6TIeKfDtJu9ZiQPYUgbyCr96voqq3GWZQbZhiYLlR+5\nepuTXT6tf/m8fsb76bF31QUFWVUZjRpemCXw1qOg1m/BPn8uBkMxy9tSQzEn\nRDRL\r\n=/CXG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQgfHL4TlpgvGnUmMZj+581dMoGPEM9B7LmIFfrHQwHQIgOAtB3RmCM+sMcQipqYLthEbQshCvKRRh2j/3+ofMFew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.55addb8c.0_1613772166097_0.9075748002590021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-icon-button":"0.21.0-canary.85dd5e9b.0","@material/mwc-ripple":"0.21.0-canary.85dd5e9b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-dsSvMXWklujdT9rAp/S+UAU+XcKDkXBvabq5PWUuIPUwHbQKbY3/tsx7sJ052IgZxn8o03WiRGXI+hgAk2c4Vg==","shasum":"98bce15d17d46c2e13696df8973401e4a2776616","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.85dd5e9b.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGZLCRA9TVsSAnZWagAAPLEP/3KWWjwKCmyjpZaHHZOl\ngfY/VdCb3aXxucHXl5LK5J3EnE91HDP9mgWAvPbfJkI9PhbUKea5YoeGp7V+\nvnbGCwok22OCYOTUpCQMMRR4+SPLglQpkdcfDKmyyGkkJAqu82AAzUmw1Hx5\nJICdFZ7NKpfpDv6IKS0UpPBrJYF0D9wzZ6rVC/kT60uVtXznMalOkvEiIsud\npIsZPCK1+5sTGDPz1ca/lMuE/vaJcj14LxLWGdTB3p0HGBHrHq666vzRNUpD\nAbY5sXokDXSHzl/8oFtNgGeerrJTw50C2IVfN9QLk3zhesdq7ktg7mDOe3hs\nnv8WZup1++tcH5K52MexmujqPwC2X/owr/Ud7LmWrOro+OYIy87Y/hCBjdr/\njh0gcykPz37nJ9gEUDC6+aWqjogIhM0K21sDeee6C6CipawxUhLWNycLAInV\nhVsCynXE2EpjtOhvmMAzgFZG99KLuY70M8HoD9n/9ijsEAnz6yjxiCyiuH02\nr0rKfyTtJshkTeEaPyvamj1dy1i7fn5KUkxBKj/vf0OdpN83ITilbFVe/qOT\n+JRI0zoZ4ucnbO0iAg9v9iWlPzwlAMha5Z32YMFLjE+y4iCDnscxMnuRwj9U\nW0/PZk0e9I1omuhR87ltNAcxdCo7LTrQ3A1KOC2DKtg/XXSNmHrcFSyGak2f\n6PEc\r\n=33ZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj/WF7AcxlSBCU6XVv0896mwPHe+71ko4snhe34Qj3HwIgIg4u6jlUARpHS8oZ4nShkX8QPfkztBFbA3luVk2gIBA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.85dd5e9b.0_1614046795149_0.16341864606882162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.aa3e078e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-icon-button":"0.21.0-canary.aa3e078e.0","@material/mwc-ripple":"0.21.0-canary.aa3e078e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-De2/tIR/Zb0JAJq2uichkDWwpcM7FRc8qI0lFKg6EleiPVSK+TDjDjutlxKPWZyMW3MLZGAyZJudIeiDCGAkNg==","shasum":"b7485c3e192fc856da053b6be250f1534aacb058","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.aa3e078e.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTg4CRA9TVsSAnZWagAARxMP/jPXuNcDHtG6M2Qm4l/q\nIxlG3qVYY/lk7RGFUcy9mmekWwYiJtNZwhru4vBVnYZCSLHOxFD48x8d9F6l\nNzT7imQt2reZzXNT8nw+eFEan28egu7J+fV/QsrHsrWZTepWXXwX/4wtohWI\nLZKGXO8GCwrIVMX0wQJk4pH5F/E26hk8TV7Hd7eoKr4sMmsrxVTcSWsEHy/S\n/PF9vZJ+hAd8eG+3Pb1A6OLQJxJ4LGXDhxG/lkP9YIPq2y6RbSnoDPZPYWGW\nefR+dFtiV6Z452r058Ntu8OgomMcpv6V+1i5pOiplVr1EnQraf/yLMEGaEeL\nfZYyxiZAsVwVYwYa5KmUvb3JETG3rSLY/nWpHWwWB2HhbrXXn/xVZyKRtqgB\nMBjTXsPVz12F17pWIwzMcfCIWnGa26IuoIwDu396mmDFypojBbwYZ5NnbS3W\nS98eF/cvIjkxaJ76SCsFMdZoYdJRVZ/XL54CyHyMewfO8vmCMwVK6fnGc3oO\nBKnDCUut10GVOEaCq22CPtDmlfZNUHVBye0kv0YKiAfYaoAO6C87ZDZsMMy3\n/YOAsRrCZStxCGqcXuOpXABQSLFYcYJ5YvVJ+hf+xYvMwoKHxnzKlPQoHHqF\nNW2TaU3jsMhog7nghfpZY2QgjBl5wY8Lz5Q+bF9kN3bmOn3YsCVf6XQZdO/p\nxwxi\r\n=Dp2J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeterCSY2y88vQ9TOM7denb+YqmFoGVX/IXGuQ0G5/RQIhAO4oF3/BhilSoigsnNaeVPwEHZDsCSinVGQnYzy/rDVq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.aa3e078e.0_1614100535664_0.06270265079642612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.dccd254e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-icon-button":"0.21.0-canary.dccd254e.0","@material/mwc-ripple":"0.21.0-canary.dccd254e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-hrXKFQYIioGNTm+EzdzKAd9Hz0S3yaJUxRFCik7F+GqreR0YSdvaW/r8nDfUNbasuBUhJdJubmDlOc6Wl1UqJg==","shasum":"fda1f16a62dcae745158378ca5ba62defd15e14b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.dccd254e.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPVCRA9TVsSAnZWagAAGTQP/2yLydp4EbcMfD32xYOX\nYI4C+xWOxIFp0XPugnSUqGRRyfK3/28vxuXRC3/PRN68EThjvofjFXpUjFha\n1DSSYH2OYncrj3242+jAA4+24XMqgzVj9f5ou5Z9lm5GpBGOTIlFabWBwtII\niuZwc/KRhWSDsmABnSQqcvntZOHejEsG0cVr2bmg8JZNOYNTdh6cg/ajSFRQ\nvCe5dlrRz8lYfygRVhH0vjy+/3F+5NHCou0jgiiSWQY2m2c9ZR8U4zOOsjo7\n3YTk0W+OSoHnjUzyJK3DKpDNthoyGZsCU33s74pLgRys4f/SfY4vlRgVrlWe\nGT3l+Sq+EPj/bFHjRLD0Z1Xip0v1RP22t7NgMlW5PWuHLxdX4QVXe7GSruog\nHvmcoLkKwyJ0gYbViuQmF2uIL6fM5Y0L4uB5JP57EflUF71/EIwlO4BsHal3\nvBb5XryI9CHqYAqWKOxPOvJEEEC4M0L6RFrEjY8eF8F9hLFbLY/67OCs87xS\nPD3wT+w4HC907mwjjS6suE+NSKVtDndZIaUQ+ZOgrwnue8YMTkvNSw5LXVP6\nWdsnt2/3QpAiEmMe/aoXO+mNqPqXWGCEY7Ar4o47w8FcAJ8P/tnqGdmE2KBv\njruj4WQp94ms+hxMltONg7IWchq+tp/WahFHd/VGHSTHvuhRdpQPqebfcaCI\nMN3Y\r\n=UfWu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjIJV76VP/ZdRTEDfiAYSVPeCwdr1emNixI3ebdq52vAiB2VFERklR3Qj5DoNhP1g/xawJqAqy+INSnlKJbbmPLqw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.dccd254e.0_1614373844683_0.9437917245472207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-icon-button":"0.21.0-canary.7dd1a27d.0","@material/mwc-ripple":"0.21.0-canary.7dd1a27d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-14mlAWhTfw4lsOHt0pb4IkcyHO/oymv3r8iZ2Cu+DSabbbpFe7I8lV7BewLs+MS2f06a8BQmI47IGTQ8xCHsqA==","shasum":"ce69d71bc7a53baa11c924325fa92e4586e49a81","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.7dd1a27d.0.tgz","fileCount":9,"unpackedSize":40171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWRBCRA9TVsSAnZWagAAfsAP/i4g93HCoZo7DxuMG4l6\n5xXaiH5DLWXWYKjgKHWDdq/halBrBRR2COgHrkPeyGZ1XHAmC33z8CwiPYzH\nR26vzvcxs1LT3tdXXdAeFUR8kNFsWipJZadc0xtqtNW5GUKb2S/wdheokmRw\nGESiZuFdj+xyNK6alMSirqPojziMCQeLdE8VO0E4CKVW3jYLjPjRJ/0UKR2M\nEXMaArL1g1R1Qf20YbnafhuNYqL4mkpLe0C16s9FAhzJ52/iIjWFW9rHsTLI\nSqvojgERi5MVFmFX99yiF0ZEyEgWj2LjHv/x3MV04/rlZW9dwbsf5R9dwuNL\nN9uCr6plIpXG2GudO+a90zD9XRRQrsnvUt1sAjIZg543TNxvtESLm70ZpGUF\n33ceBtQAPf28L1CahM3Zc2Mg6UpsardLKaJ/IDW/rTW1UIPNsoxTGJeSpODN\nL1PIvDnIhlJFomJ+/uVaxsbAfUT8+aqfcFRBYAje/6R4OTc2KdHHq15XYQvV\ntIHpjt04SxlXEPuV6QEGDHo6kpkqD4a+Vj3YLd0zulVMVmCdu9FhXnDq8Ruc\nF/hmnwjrj8w4Te7+1KRnQgiiyn5+55W0nifr5wJKs7nLg5nZ6uHl7tIBJCdi\nFfAO0+JzR71i3Hw7Alz4uTIGxRvlRydc4QdaEmZMCxnEdQIEetEpBKIllorj\nPopO\r\n=2jl2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSbmLYtCZcyS2FUAyoACI76kcqF6+/OG0r8WfeFtxDnwIgV9p+fral+aDJPpHUewlgJKIcHj6WV/RUJkVfZTerJ0Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.7dd1a27d.0_1614636096979_0.06631819853410215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.12574572.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-icon-button":"0.21.0-canary.12574572.0","@material/mwc-ripple":"0.21.0-canary.12574572.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-8PtjytMIhfJYxZ175aDdHCp4+8nTCm3Ikg0k1p8D6OVbmL63iGpf6A9rEfEOaEx9nxKvX8DnMZDvX5sbzNO1EQ==","shasum":"c2322e46576497686344c5149e231696767c35c0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.12574572.0.tgz","fileCount":9,"unpackedSize":40189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqBFCRA9TVsSAnZWagAABU8QAJJGKlj3zwP20iOQk3gq\nymhs3hKzHqImHDHgPn7QUFeLeUECVJfFUdwcfpiT8+bM2GHysgFU8xVq4HN2\nHj1pAyq9I9+zUObfjzVhOgJRiO6mFv7AiD6b835FZOHpXgzSkIg1y6+jZnVX\nA0unC2gCyIv7qJALMuPTT8LjkUoo3cyePN9F9Fmcagb9W8QDw8YZO0ZR1n2G\njpDDdkgv9S60a0/3xksHTegR+7p6g4Mb5p/goApi9eb19SzDTXjr4LIp4sZi\ngZAJuIYXCUud0fBTDuDNjbRceSeSDeZFlRlxJ8iHPeth/2i4SdAlQ0hlnPFD\n73vNhrK4cutTkGRrQ+OLQVfy/9fQdocodCycI+SlF9VYUUEBv+3ZxXjXUGom\nhcXhHaisTffKuUNoEMkaUJZNDiUIalDWc5EPNcbnpg6Cdzgsgf8U4SuyJzD9\nMLvb4ZWWLdGbbfHWvZrtjvHnEtlz1+GdBRoR8QpKXYAeG4WCsneL/WbrsKbS\nAO5FtTdjlXsyNuUjDB2UY6xWYfLRXhXRAA+tVZtskhFoLtK1ksaMjlF2q13q\nGdTIeWVUgCmaY3qdSwdVuGybgmYmQNaD1usnD3AcUHcuXSxjpXt9GawItIjU\nXZ0zlkApEMeEV2aYLvLzomLjO59hzHl7UDKhyOc+3QJBbWMaqDEq6NgIgLOm\nQsm/\r\n=EAxv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC83pcT4mw/1MO+ld6EV0PGDIJkVHmSsmNVyoqs6344EAIhANRBFgH8ANhbprPWLVTTgqUJZ0fgLskYh2UXhrmu3z18"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.12574572.0_1614716996608_0.4114208940316264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.1109a3d3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-icon-button":"0.21.0-canary.1109a3d3.0","@material/mwc-ripple":"0.21.0-canary.1109a3d3.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-BIDlW2ftx3CaJnPZbOkW7qPVVKQt+T8N6jDAafSAqZg3Se6h3wVAxgTrFqDG/6gGYTCdo72IxFDZAKGcb1EtbQ==","shasum":"5c7bc5b573db0bb858c35158372b2761f43f2405","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.1109a3d3.0.tgz","fileCount":9,"unpackedSize":40189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqGDCRA9TVsSAnZWagAAhfcP/1RWZVrdlL4hvZoGu703\nNPX4m42Su19bU3FF3XWMuHmjKPH92CFjGICQ9rh4RR8r5eAH9ewtVFf7zSte\ndvytcNKFgBojzFNw/FJecFDMCKR7FAFTJKaEw/L+7bP46y0G6l/M3JMoUiKG\npa7Dxsp0TSnP5JyIFEJCRGMrmahRoeMlIkvnLpSB23g1ZeZ9IGlpzpjWFiXd\nqimpgN86gcxY6Ud8lpJB3hOuF/UvSa1M9LTBaXrGssEfN/GHpRqd4lTJ76En\nB0GPOOmg+pxCBnzB7lqjPZnXhnMItBDgGYznS1F2h1Jx+zv9QboJNAdEIKFZ\nyGuWrjbGBWTL6ir6mm6fchf32kDDfBgfG3dhz0BBL8Rjs/Eaz7wwJxVdRu4Y\n3q/Q0iE4DfLbv6pU2ZengYl9Idf9/SzuzQOlKb1c0p4TD6CVody39fnB7hup\ntmVzc+nvzz/2FdzCUVt4x+37/cQxPp/MJMSEcITWmetiopCLROsHRUyy5SOO\nNUIQ7g6J7uT66waUiAbY2vLxFIBxM/bBF9xnzkv7iam2zB9VFURpxkReXPQ3\nYIvVvu3MSfCranF2KAIODgpxKteO415ZNV4DF3zAffpL0ca5DdbR7627kX+n\nZiUmJ783hz84CvNaDJWSMqrwMsU4dFs1TJ+SZtknTNZEGgnXgA/bzZee3ZGt\nagUa\r\n=gAct\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICElPLDH8Yh2y4hkN3bKe76Zc61QcVulnlEzCJ8axgbLAiEApfAlBUdJwATuqWm3CpbkLYz8SOqBB7K+nTofdrPrx1w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.1109a3d3.0_1614717315228_0.31528065266687344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b9cd8739.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-icon-button":"0.21.0-canary.b9cd8739.0","@material/mwc-ripple":"0.21.0-canary.b9cd8739.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-nP5raTghAyqsz6fr2Yjq9rU5/NXODjbTtJmQcpNS2Cwt5mhh8FiNVKWFgIJjsDVTXYF8//aRPqsTvM1tDhEYmQ==","shasum":"6a2c9aa9a36d12d9241cb9a5fec0db32ed5c36c5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b9cd8739.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vvCRA9TVsSAnZWagAA8vEP/jdZ2d9efhp/uJw5uAKw\n+KHWJ3FIMmFh8ufdetEcc67YwIm3V3bnUqmhs2Cl7vS8lHxjyIzM0qRZuCFp\nioVAcYebSoD7fm4/26H4PzZAxcPQy7AQsRDNYXNmv8TNVlj9gT60WeV0s8Tv\nbx5HFoO+HbaFUA6EC+9zD2AG20JV9HgAN53iKyFc+3L0c31HpaH4EgKBrwwi\n0tmMHfkbJOmSy9wKzzgTNB/AdJ5R/VhHTEV3hC3Jm1L3eJ0fHEx47KXzV2Av\nkZOCVpCEw5uiKlI81CqMbb9hRYvb1QTcmIhpkQvnReDuMSSU1WVGPaNYxWCG\nBlCEAunKitA4mGg5/nSNHSxh6xDJ3Hk2asiSumc/2cDOE/rYmKNnzgO/dLGj\nDZ+6EzXXQo4NITLk9WuZ7pO4lFP9J7yMTnLwg3EaCF3Zids+7KX6WvOLzhKY\ncP5vfWYTl+XnwtQU1pKbnDsYf6yCXIaWfmLDyDnzPcPd2aWLx7HclqCmDfN/\n8MyFG9/ebpEnzEtTmnAzo2+YFsYtyzUZV5kcIhC7U7UPQfOHcljZzGcvgtKW\n8D9NvUFjmLVh4BqrH0PncxqxseSStGTR/IOG7Jnd9LvBCkbq58sX5V2qBj7t\n1nrTuOb6Zs4+Q3DHnFHcGFmFNsygVAOSOIupzIPSsMaoC1QqVy6ffdO0MO6k\ntnjO\r\n=LiC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX+9HiVxrnMDcvPqamqtgD6xVoEH1jkAEkLeBrvdc9PgIhAJLJVEUZwdMBWVcuX86EsI8AmPAD35ooShAKrDFo39eR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b9cd8739.0_1614793711219_0.6304639779946464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.71ee796a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-icon-button":"0.21.0-canary.71ee796a.0","@material/mwc-ripple":"0.21.0-canary.71ee796a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-XJWNe934Wg75DAAxyLoxsAZ65KI1byK1r6JWbTYUoeNOsUQiVoxA6Wxi5fKHVbgVEy7R4CWCkOprJrcCNh/B6A==","shasum":"237949ff03ef80a005451400ac67b8fce8fb9306","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.71ee796a.0.tgz","fileCount":9,"unpackedSize":40189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1/CRA9TVsSAnZWagAAilUP/0LPwy+RfBspZti5/s82\nG8+rokNwY0TI4QEDGSOnAT5cOfHZbDvWn/+v8odjSSE5DM8TKEB/52GVWERu\noTSAlwFMSE9C0Rqy/u3QkPg5ADoiw6GbtScyf1RKwI+4o8iRrHUuILNMMxe4\nxPD/tuT2VpOOzRlmJv8hcN/80nmvYACWABvkvAj/5R2dri3wFHUI9CrGZcHC\n6971b460MupysNeZ6zb73yVbOpTkEsjI359yQH//0GxQebSj816VIoMj1CF8\nuvAHa8CC7ghnq6CojWZx4maKyaW6/fLrvgzjrS4R/v7oSbei5eFRznEGtXOA\nVyW+gyEzJompvRr5d0to7wtoXHmT7nNuPGhoJ5DOTjfjGTOs6HE/815wXGYk\nW2TjDi7px4JXEJSasnbMbgbctWI61FP624sW0RGeBSXRnqrEP6Z5AoimfmjT\nhYQbqpPlAyqZFkzSPcNjS8wyaQt9xhAHEfQ/3wBoKb4JPHBlWBZda7GWwUG1\n21FhnPoNYCHhnLIHpowOrjYFvWSt84wSYg4bU6k3Wu70v8H19ycM07ov0Urv\neFBvummr112ipNshA/th12M/gIrlMyvMQB6eZbwGXA3q2m7qyEWoU4TMAUA0\nTAP4ZH0l5nngLLS3THIxtkBPQpFdJBIYYVD6D6JI4izRmCyQHdZtp5chVgvV\nWvV/\r\n=DWEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1h73KgIOuZBQX4j6l38jIKnse8xxk+5RhKxxKgfkN/AiEA2uiDMHqxr997fe5DAJ/jujm/GLvUDDJPaMSWC3R0hM0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.71ee796a.0_1614802302651_0.8136700172107516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.2be191ed.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-icon-button":"0.21.0-canary.2be191ed.0","@material/mwc-ripple":"0.21.0-canary.2be191ed.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-WlBrS8oqOxJqGQZpFcbVd3TXKLl9GgYnB/+OSbRFp2ReFBqiGfvV0oi/YAr7QiuQ7UpyIxW/GkUQuIjylESRmA==","shasum":"d1c99d63741e8b11c2f6d9c0743f7be20e2cba7b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.2be191ed.0.tgz","fileCount":9,"unpackedSize":40189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAUMCRA9TVsSAnZWagAAeYsP/Rjp9gopxDoVf7uRXOCD\npME3XzIzjJ20wkCETeql++f7aE3QBAav9XwyAbM+y0Jw2/qPsqQFgd4fnMOm\nBbA7AKNJjD6p3oHfEBDDTz9dTT/bUSVIy9cSiuoLQctzLtZA/XqVDoxP9cDF\n60oWCVyKWcpwi/wzFEX8j2rqAt4It0dR1A0BTJu+QNozO5ETk0B24/qfwwFl\nZ6+xsb0m+5orIM2PfkYHWRVwwhUEIB0wXuZrH3l9JgjoW7cpANSPJ3sgx9zV\nQghzYBDKX5VglCMpMP6nBocKXnAX6q+KdG/9t5KeEbVMg3hGZp1N7B1VA97w\nyEXcoVwOgz7FDTDuX2Ma8rxO3EGaBw/7FAcBiTO2TSzYGj2rtfggxkdOxa07\np8biOAxMIFWqc+eKFdTZ+CfxE2SKRBupb+NlmmiII01of9NVE7iXAkaA1WZY\nhlsktG+EO42iC9pzTcPk36sOyt1D9EVAE0Yhf9nBWwb7Nm5BLYV+AUgp0rXU\nUW3AvspJTgHlPB4H92k+NMeJ6zXQtrI65WMcCHwtt02CXO6CBGL9EL6g7DeB\nAybEM7RqOtnphfWv/f7pbQz+nvqrekVUmYIt415qkE82wXTZvlLO/Sc66TPL\n63wbKzNMVVQjDIk44iT8ab5djZEBDuTrCcUwQteMrQUuRog8Gcwwy8Cyjvv5\nLfhp\r\n=36PP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF9Fa7NP58ogYFfIJlTQcliZZw0BVqWfEMXz0DxDgI2AIhAPrSkQ+psRsKDMNGbe5/VJXzTFu1LianMvrusG6Y7xvQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.2be191ed.0_1614808331791_0.32962878342245827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-icon-button":"0.21.0-canary.6dc7b06f.0","@material/mwc-ripple":"0.21.0-canary.6dc7b06f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-74/mBHpPDuVEjFSgNnaIP3qXb8Ga74mnbIeeSkhDKFUpE3iBVgw8J443ZFxlODZUUZ8cE1q7VUpar96NoNe2Hg==","shasum":"16fbb4abe24cedc970dc395470e33584f1914d2f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.6dc7b06f.0.tgz","fileCount":9,"unpackedSize":40189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXngCRA9TVsSAnZWagAAQb8P/1jiIFGUA6fSGL+gxSMQ\nvoEHXDGEjHV/ngqXfsfEQEIItOikgdhGapcbX1PUA9K6XX8ySJTqhl5r8e3+\nJElx3EJ/xL9kfXHJEUe+0yVsWwiMeFw/tlflYGr3CuN+25G0qxp7J39xq75c\nQdUKx7ihmOyzvEh51R0zhJjB9MtM4dE03yUA90TNgH6nZBw8KRhiGZ/F/NLP\nqi4DciirM5H0qAM/06gFYJN+1HFZkKRHJUR4OPXFOT3AlJdP+xON3BWBGRbP\nG6xUGqrOsW6n+wa62R2EmmyBHhgRqExTDp25y3TmpOTc2GyvQUQWpgb0d/X1\nUbgcaXT+Dg/9EYQBgBEdilr6nIKetLAAkq/mXm/Y2kMpe5uOaKeeas1S410N\nICp78Jxz6G9/HuveTXMyzDdYqU5tVAlpVtcXtVpmm5fcUWo6AeDUeVsdVuc4\neUUNIBsm5aQqswQ70/SWSHA0FRe8tnB6tKgkOJrwC8RYxIoZVa9ATZy/3DsV\nppjvy8FO74+o6DonS1gpB2vwWjnfLRG6QQOipdpvFtOlpHM0fy6h8v8nsr78\noYR+9kfnaM2pspMbCXPvytFEt6EGVqVl/WHipdl0bACdJu/S49vAdYNQkFG5\nk/ROdlwKnNp2qPxqqPxHjPV4nU0USKM/aEm5Pc3LEPkQDTmBIGxndJLTHHIX\nvt1G\r\n=QHHu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYWbGm8PQbPPKL+oGItE3jeK1lqUU4Y+kfgksCtaB1xAiBBLtcGfXv9g6Ga0psT/ETIVS2eMZViWRL8FUC/awMNjA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.6dc7b06f.0_1614903775826_0.8121514107484902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-icon-button":"0.21.0-canary.24fe7ba6.0","@material/mwc-ripple":"0.21.0-canary.24fe7ba6.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-p1DwZW9p1zOQBDG9S/fxoI6euzWQroSUdbZSAXcmlplW7TYIXYw5cmRFkIhbpMNrQAbvp6qf3/LK267r0BgKdA==","shasum":"6f623ef8f1c05d7058939ac1751536234cd77f58","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.24fe7ba6.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmoKCRA9TVsSAnZWagAAEFYP/0gffEVUexYIxH0KIvCj\nSMrRr4tlx1PkxBFBkS5azSvJOTejStwFV28oWCaZNxmxaGPjNDVqWVQRe1a4\nJGIJFuRQFDukNo+LaIvyue+P/T6PcB4mtcwRsHBIIKI7ZBavISVqfVgHVfPE\nyA2QfuiNM3LSKPW6FJ+nI2tLP4TVBaC6Zo/gx8pnNHiZo/ic4C6Dp9MmFXq6\nus1v0IuukzxmvXYKYJPNH2blp+fCy4V8m+7A0b/p4j+a+/xYPCJHhtuLDECv\nWsxPPmHA8MpsRVepe2m50nDrGxkH9MJ+M4EYe3fRS0EvPFm0VV9kSehHOKoV\nDIh4mrwK5KTV0iW2DS5kFMRttzwKU1CkmqfvJKAWmpBCPC1fifVUzbUyQQhC\nr7FUZZPSRXst2EKYp9tdCxDnYieclPo8McUJjNCjEMpxIGKVtGtr32xDfsEn\nQtJzKh3LG9Plqxk/bZME8gKwZroWNEVFFzSJQuoZ6JIcE0McQdbj6vHzRA1K\n34NbT3xdzlRWItNOoRF0HJiMYzRa0O7Q149441T/y3K89t4HszpUmHgYjiBX\nJIlzKj9I7yVsob8C+G0V5oSNNlspnOKlcw21LX68+91+0iYCP4o2RHATdKeT\nKedf2LVuYSvNJZ9e+s21EWk/Ryw1s85rVbYu8gbC5o2Gh9XuqreAboR4mfkw\naOew\r\n=Tr8H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8d1kPqddUAm1p3jsyOwxACKODl2kYXnCwBtwvDpUMJAiEAwuqfrwI7QpDYqM2lysPEeY+Fzpu8ZuWNjFEyzN5rYUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.24fe7ba6.0_1614965257766_0.17690082519655448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.12c477d1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-icon-button":"0.21.0-canary.12c477d1.0","@material/mwc-ripple":"0.21.0-canary.12c477d1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/35KfBVObj+RQnjfE4w3WBYZwmtmSgvYF8FLr6GX9nha+jYoXawTSx+6pgcQjXamvPhsAnN3bi3ZmatOPg7Ktw==","shasum":"afcbbc8cd75dc1e9a842d0f52b9674edebcbc6c3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.12c477d1.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqQCCRA9TVsSAnZWagAAmucP+wVSqyyGyk86kOenS+fa\n6zS7w1+QVlFmlC3NFhDf/UNFdM5/QPeTiGjdqZMsFy60f0QLWxkW/nPpcGjJ\neMvOEgvoHquUlZPEsYc/UOkiJkt+5/o8kEL+GDMOwzRMXJr3qAITAcD8ys1G\nA8urOu+9y0tWKO7s/FxZ8TP7GIR+pi+62zZJxI0SmbnwTPeElrk0CVT0WOuu\nSK2rqjH2dTwIRjZrKjvrNAFGVqHFe9NM3yPtHl8gidKTQg0zzhcowCMfdlqk\n8BCq1AxiSNNyqWBktONXLJxpapgcOsldBuDXbReJc63WVmpmuyEhD3b/M94v\n35HHobITJEB7l04hjgs/xk702WdO5WNuveJpEzLKuDYIbbSvHjQOhzOc2FCf\nNClVPe7QKpMB2rABhCn3vf2msSlvSK/l9gOkhiRry78odjt+dC3baTDCDmsb\nxVP4Sy5Rwnb3j/50cN8f5ptpbmFab3zI++9+RsDhnTLIPr23ub0mkpMdcbfF\nw4Jvyinu9YpI6gBxBjy5CUl/rQsAB6+4kPX7uAheUhH+voyrG4m9MDqIdwBy\nVYoy01lNWgytoAJAhk7qxc/cdDCW8pSqynFlaRCmMTAwMvKMQO+mn12dapwu\nACQ2xNvHNsazxZWEt5y04QO1oXkSxeS0a8SwbCmyIVEyw3EualmuJotePTfi\n5LZq\r\n=z9Fy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiVIRdGzKvpK014Y5PMx2OiTCFMqUkKtYLTj1o7rLmmgIhAN09i/NXzfimTXDVqu84gZn1wmV9xsMlOLmsldWPtiKP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.12c477d1.0_1615242241661_0.29875299392018717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.4c38f801.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-icon-button":"0.21.0-canary.4c38f801.0","@material/mwc-ripple":"0.21.0-canary.4c38f801.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ux5HuSWFwj/UyGojXxw0esydMbrZGb8dqBQ/7J7/NbJf3qDJ7znvBwAzSgH4tnuUpMc+ZzKotHG3XwVwxkRSug==","shasum":"5dfaa666a3ca7fb5354cfc0a85ea4e12bb9acc6a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.4c38f801.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJYCRA9TVsSAnZWagAAGrUP/02Jy2bP5DIVnKgB/xDn\nmEkzr6AI13or31pEYti1fzYTuHmYh9IueXSBU5hyf6ejoc0LRiBIGF6a/k65\nc6ed0zi2MH1063zJJLYmUTRy6Dwqgd7PRe8PIs04Hc7NT4YNj9IB2xsCOt0h\nZJv+fTW5cxRdEcILsVx3mhkF45hz6VhvWxJUUbYQz/tQSDgcQu7SLv+BM0uM\nuTxE2ktcYOdLkKOVoM2BE2FcWXrbRp0YOGXzCi0NmDWrFrzzfK2ZFgFbgLSZ\nBsbqQu/9wxXlrVUqbblX3mveuTe0jg+CyaeJaVsKfWz40uuKfma0R3fBRn2q\nSzQWTIogGC5ysmvw9BDYzvg2MdWW+9sOtDV/bedcEwF1Eovr06nwIUyY0thF\nLJ7S8vU8xirWIAoaOOWanj9uPEKy5kctS1QGj3uv/VFyf0s2W6RuClNISVMu\nYLhiMQp3JJtZv9PP5LCO77QVCtOHUzPIgFcOl2Lv0z06ohbBWWS43D0H0ywQ\nshqWtEecha0UY66TOVHYl/B7Dz8309zXlgAt3Sl5Se6BZRtBg1vd7y2yMR+I\nyZoU2yQnsuRWMyDTrGODBtOluRPqtkqVlPlOA8KUdow9/MxNgFOodhjr2M5N\nwLMOX73R5BU4PgT/alKLIh57NW12vxTAaTusoiGmoIyrk1Bjv88wfNXxnR2U\ntZej\r\n=ls/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2yx96helOGiA1s1xmvDJidHooaiaInd7X9Pfrw1jbkAiBhik0EfVUYxyOyM1EgUADZwggEmaUsxXGZmpxjxQE4sw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.4c38f801.0_1615245912086_0.8685028287626118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.8795b83f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-icon-button":"0.21.0-canary.8795b83f.0","@material/mwc-ripple":"0.21.0-canary.8795b83f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Z0N4O0brxZWUevVQzHayIw8OZVqT3a4UdUhFX+GsBSSZSZfOZYnKRYIxolwAW5J5RlVExkkKztfdrWL4+c/LQw==","shasum":"df17a0f4e591ef4278cd22a989a8d1018a768cbe","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.8795b83f.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74xCRA9TVsSAnZWagAAzJUP/0uffVf/qgHmknufV2f/\nfuTYlO4KhKeXxiRxcTmH6JDKD4vtpaLrTPAWYye8iHsDkPw+vPf8VL5/vOEx\nGfNn+PRP+4V10RtH/tK8d7C7E4tvhYVSOA7O6gkZYEEXO/pK6WgYxiwzWjLY\nM2wQ0Vfx5sz5msTV8nG1gxvsKdTNV5MjzBzj1aat0dfp3+m6hEdvq68L9SqP\n1BMDSuwf0GQF9/Gz2YJaWVoiSHo+ogrTHeco6ozzpQyD0AN2CKmDC00iiu9z\nwn8bjgQCDM866D+EZQSENFiU+yXVKbUoUnNzvhgB+zqNVdoSyTHg7EFOjps0\n3AiUFtU1GHKd5JZCNo08Q81VcMIgeoXlX+4pTOiEdajG6gouRUuSvj/1M2G8\ncKcPMHUEBsSnWudkxukEqOOInH19mdz3/5Drany+CwZrdTM739T6QErjPD4/\n1U9TJC0l+fEAPouHbaGzJfZTwHj/veHd+JKkE+RZhKd3BWyZR1yJTrvC+L/7\nM/B/PKxrhMN2XgVT2vuWTEyhWE2duz/qNrs8IWTpB09Za0CdvnI/zHZINq8d\nmoHyLLxBvypC+2EULUiqkDd6ion3+Vu7JDvvKsjURB9v5Lk6tzJ6Afc9+wwa\nZM6plZ+HZKNraB6D60nOI+SLpqXaDHCzAQcP6JfayWDMojR9c4Qc49jiCtz+\nqxIi\r\n=wncQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDv7cP6HyvKnsw9qAIzhkj3nyzCUwinoGcPicQ83SvMgAiAKjhgqUw2SC/at+m97sThU4Rv9UW0L2DjXjjd4p5OUCQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.8795b83f.0_1615314481451_0.43717712998027913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.12b84cb7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-icon-button":"0.21.0-canary.12b84cb7.0","@material/mwc-ripple":"0.21.0-canary.12b84cb7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wEKYkbUXyiTXCO+aiJccY51iZ2NL+BsjJO7Bv7OMxV9vkmHe3hDzpMfI2bnZ0YzAFPr/f/Oz3eJG2Y2T30T77A==","shasum":"db4496a1c15d71f3e5c527471568f4977668c628","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.12b84cb7.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBXICRA9TVsSAnZWagAACAAP/12+oEvStx8UNnS6mL/O\nGyKFRAoHpXmQAGk2hwyxGWV+qUyxSTvx0iSM/mVUjkan/c9UcvXhnMWl+2Z+\nkCDC14hGQH5L3xjBbIBD4OOOzsIM69Wrqh213zijPIQexpP/HjivpL6vUr54\n3gt6O1vbNFakVFNrznPzjKOkCv5lpMfxLJU2ZsWHpnvoLRK/qKAZ/hzycRq6\nevxLJoT0b4nhBEzp1luGTT5I890t6lDEHltc5B5v4xvNVR0WBGcI1s7eexlb\nh+zQgjRGJIaFRCtj+PRc2QagPnYJhlJIIuI/OUWcjfezPkv7U4I1AmgssW2I\ni2uqyo+ByWk9yvu2HT5Yr+wXWOgiEJUqQ8lRb791QGe4a/XdeUXavvgPh5YL\npVQafslPie8Qs/OyuOMFLlFdMs9N1DGLbagFI62iim+CU9c8Mmg0LyJV67c2\nLhLFCFVa6GDMiNC1R54llvoYSsFTu34YZygCoBWJrCJA9+VW4QgkcV8BwIGa\nCJx5UbcNivx5zAejKqrsLLP93wUB+VBJesxpkWQNchwAQX+JPIy/151XY5kj\nKbEmkwKuZIWd3DE8m4seYpIanhklzeBYDx94YXDazv59HQIkQxZj3oXX+M6C\niyHhzx16GvJhdGVgjrKexqNokqR6eNDmO6FwJ4BVxQXq1UWGeVHD9mu51OzA\n6LHI\r\n=HBnI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLW9CCGXJv5kQbPqW2SEiE/IJcWt3ot01LWpg3VGQsPAiB2fv63oUYek8BTQdzli09fZb2xhfxleDqQv+mm7qlHVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.12b84cb7.0_1615336903561_0.5560929889071731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.6ac6784b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-icon-button":"0.21.0-canary.6ac6784b.0","@material/mwc-ripple":"0.21.0-canary.6ac6784b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WskHDAzCPMY13FL5z0VQ7DTR90iSVFUkYuXSEWvxNRrQ1PASl8INoZm/9b7GVgADzrTZVh/KnXOe6jcmAhTuCg==","shasum":"262932c1476ccbffce09ce9440c0281e9401eab0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.6ac6784b.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBg4CRA9TVsSAnZWagAA+YkP/RodV1ZrGF6jmPQi+S83\noMUGdCjY0J1CvkffD3fySKujqt9Vv1+0AK/lpxJpxcn030q6BMI3Q8b+Oh2B\n9jvAoKHDABTrOjOWXT17echI7/2sKP9UzLu00UZyr4JcDyt1dS0628AHL6Rp\n452js6bs3+63SnYWUHI3tjt/Epm/D2TW6ifpwWf+jPY4Bz2/Jmbpja+GJwkd\nDmAjxYwh342xkCBIuCkZbWyY3ORA+53gple3klWyMalTx5SQhuYFCkwn7I7N\n+xQBC+kjjQr15JqUIkwPby27oM/f24PJWx7uwjXqjyQBi95NryaOUZx/0Hsc\nCdnwnvvumP/o1GPVpj57PGB/8mMhaWknl1ofgYk2Ofr5v7ZxTQN5THy1sUlD\nfV/QYg0s99g3TljsCMC5TCWAQ2HeZdExH0u0Lz5KUeRNvjScppSvUMuVi3VA\nOpPL6ETso8/XvNUdBRZ4EbTrkRaorfjgke5elB4Gsnk5du+vIQr5WqMmaH1S\n1nQnLGHO1zo08NsuQlP2QgeNvEqkKGAEm/G1zIYc18J2Cm/jOvetowxGdN7l\nz5xKc27t9y4U0yqdpdZ3oHGvjj9YQasE7dxUltD5oYy907w5T0ft8AdqavZF\niHo6+5pFw3whIL+mPx3WChelsymh+6fsHSNKuJh4gD+u4nNXASOnPqhFkV8v\nIOWe\r\n=td+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWeMjUDJ0sBjbQOKaq/xJvgdZhP/0XTecjqkarEfcWKAIgNAOgxc+yU2b1Ppygqf6s6HxaBajeZi0QziZOABGReqQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.6ac6784b.0_1615337528296_0.3902790850067257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b6d92934.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-icon-button":"0.21.0-canary.b6d92934.0","@material/mwc-ripple":"0.21.0-canary.b6d92934.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7+U3UfL3Hd/tm0LUMmP7+kqmueovPf+QXLT5KaiIOw5XmODnLOSEjKz6E9bwOtR80dA7Ejf4fZXSnDEYkh0r6w==","shasum":"6b5ad27dd062bd9d707d2cd1b44702fb513e9680","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b6d92934.0.tgz","fileCount":9,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUG4CRA9TVsSAnZWagAAwFsP/iu7C7QHIPKuS116Wy6D\n+7qNp8PCdPrvodC7hzsyHFUUEbd3U7UgUmbiyL3Iws5pdgLF3lZgK5SD9jBf\nBBxMbqo//evBc17PoM4iboI3FIGwOtJhZszc9QzuQ8PYKzMaE0IlIvrEfUqz\nnPZe5YeJFrOPF+/eA8abXg+Xwmh/regvMi0xik3UrGXmYDnIl2SGOugvSHec\nwXKHSf9ZQ1PAYMJ9L5f+xygsbUnTvzk99KH0qxI3llO5XdbBoHGQbwksY785\n1G1Vc650vSYcM/sa7QmufiLx+2clkbnXKR6ntpsXZxRV1YUVcj3D2wyzSmky\nrCm3feQzkdR/ZvYArvbRHu8aqtYHHcD8TEMAH1QvHLK3IJ3jjyglu1hq1VRB\nsgkJnaAW5rXY3WuBGZQlu3zGvuCzniS7ZTmTZboPtExDcN6o0i1lk+ZWhH2t\n7wEN3w/Jh3WKIU3mnQ4NGvTjJ2IabaPE4BZMYb05UCD1NXmDlMmxpnYZ7LBj\nthhzUMiowBdOwijMdmTV4KoTNi3I69yuYOLEHsZidzDixRTIB/n/yTr3ad8F\n1KH0wU6suT0Z4Dm8IoH/Cj2ddUv5M2cPHq3/kwzmjB6fucZtL95p8FzuhlAa\n+MsookoRh9kdc45JTIbSA03O5ldlzWyj94/m0/qabzjK6AuaQA2mZaoTlzrR\nEHZR\r\n=Vz+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE2EQt078xPPJs+RH1pHGXA1TE0QZSWFntc73cAG8ES/AiEA7fodak5ya9q4Nd4vkH9ar5ZU49KNGWbAsmOoDKy0Dl4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b6d92934.0_1615413688271_0.7095654877343138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.99a55b9e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-icon-button":"0.21.0-canary.99a55b9e.0","@material/mwc-ripple":"0.21.0-canary.99a55b9e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KUVGgouowQX7dQ79SoqLLPh4zuWjFXDdoze+lOERo9fqa50kBNYQQABEaoCkxKgR1Ghsm1xt6VFx7ykQ4p3eeQ==","shasum":"14c5906d7f200f0dd50f2d3913b672aab18e455f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.99a55b9e.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2gCRA9TVsSAnZWagAA3b4P+wWC+QcLbsTqAYHyQjPL\ntMey4c5HY1u/eYiCO4OOqq7yqkM4SJg/nZBXUwdUv2rrdwxCoAVsGNlZEHB9\n4ODPSDGEoF2CBRRmq9ylgts19Wra5jIwAlois9reOXKBuC/hvxAxBIgVGTpD\n1WQy0PUW1dDTkn8kQhjI/k4cjl5piDGew1m/antW7amS0JbjFSOkMPR6noNN\nwLqilvACMHvNqqXfU2QDGSjF+3CcA2P/o6eloNf29AqF23EOcfOWVFQFR4J/\noGF+5xhT4lj1rM+2d3o1ZCMFLagHuC8W+Z54ej0uwj5PwH9HHNRcbhFDSkQX\n27fmg+9Ll5ng7YFQlYfNO9mqiZ0b7iWYigBbsbNQ5jyr3pGmX/iKB3GaUVxp\nBmAwipftYRIccrJwgSUm5Zh/PPCe2Qb0TGUoThL4bnSxQfcPekuZuzlWFpVD\nLDSx6ue5PX/SM6kkPGNyLdlQVVDlXCLOFYJ+1EQ9wNR5OAHMxFrGj/zDlvUc\n8owZp+I9TtiNY2xFdT9k0M1DsQT2JB81HxJOrLr5z6e/e4F32lhzgkkA7TbK\nH4gIdz3X7dVaRpllcIA/VIg+GuxlTwkhJblgGxu08zGkYXHU8MC7aY8FAIBO\n1dWy9L6Q2mX+KzuDXiYJcsBZOTEWnEIMRhR1Yvu2cabjIQeEQTSl4DtjbBru\naGvr\r\n=Nr0n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYBQjw1O1WwP5AkyAdef+Xr/3CWlUJyjxS2XxxVyJTkAIgPpI015ZYbB9yG7rHTHuce5S7d5zRB+0vUik6K9d0EC8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.99a55b9e.0_1615416736127_0.6624221811250715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.bb14efb7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-icon-button":"0.21.0-canary.bb14efb7.0","@material/mwc-ripple":"0.21.0-canary.bb14efb7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rxtaCrY11RC8ySCSq/wssb/WtmCdIsKjYstGUmBqnSOrIA5PSRlwSD3Vt/vemvhu+rLXGqt8ZDKpDiNPdGxp8w==","shasum":"5434a61e54568eb5cb5de76d7097e67192503498","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.bb14efb7.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVhLCRA9TVsSAnZWagAAOkoP+wahHHNrwlwkzDsBFo6T\nkbGA2gc4QOUpc0KCMhvVyPH/b5xiu2zZLmrT3aj6C4EA83KYdTAQ+Op202zx\nxb3ro8Qz8g8YTlgtzPrpyXcLwQZt/dVDMu+HPWYcgdE4hAGrLlE6NGL91BaA\nJiQl193rF9CAFrx0XCqwvLZ1QUWGkZz0cYOm6lMDJsAXf6HklN6xvSr1yWq/\ns3wt0rpjRy53Rv5nKoFuC6AOWAyIEoZg3k1RxKgoLNQ9oLx7J+OoUq3kj6Ij\nbnF31q3rgxMF5UrjClajDQKBDVDSpW+y/of7IOp0uh0QWIaTZweQNubxDw1H\nEp83EU/ILjwTevDKGx3z+3I/mWmSbBncab7c6Gys22vYq/RVKyZ0VWAKx7MO\nqjgF49UDKsSlMbIpfH+jP+BmaXkP/rXwmWKDWpklIqMsSxTktnVAbaYeLVNA\nbumslyB9uxCtsit4qFnE067+oBTCTJZvO+5NUSVUC31UpyZZHfaBdRYXho3t\nqyafY0NucCek+IwAYOuR1OI4QC90/iuOecZxu5IUb1YWZrhgUo1rdh8IBYzG\n6yZJhR7nOhQ0djmpPBA3HxuatnOzgxWX5IWy0CWLzQdp/uTzYIdTyRPeDaYr\ndtoP7jPzC3txcxrPm40i7bcGvQNCHLUsL/ybzMrVJXFl0Cr7pDsvsqT1JU6H\nTbKm\r\n=PiWZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0AIGhLfBgIEa1dNFw2i8lf1Lw/EvRSbE7SFu/iHvaiwIgIyFv2VnkiCkKfz1Y/VjoYocRmfOzkOKJyd0lJYbNE+M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.bb14efb7.0_1615419467329_0.6886296610554237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-icon-button":"0.21.0-canary.9ecf3bdd.0","@material/mwc-ripple":"0.21.0-canary.9ecf3bdd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-z1gdNefZXBtjeK5I9W1lKwD7Iyps8zYj2gLTgjUkfXr+F5dNPj45O3E5Gre3pdOm7gVDELQ3hZWCXBGnjdocig==","shasum":"9f53e1897f4b6b32512437d0831bce6e55454755","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWM4CRA9TVsSAnZWagAAo+0P/Rg05i+XFvOZ2l0Q1vYJ\nxKdY6V7NxelaAGGC+JMfOk4g+RYbQ7bikt1amLQDgUGhaD5AspI+0XIXWeQU\nrXRLc4F6gwzQ+zE8hUcRyqCirc5dIkuEIyNIa7FGeJjrpLzSPTYSVvVS4Gty\nud9VMlr1K93FZuYu4oYH0aE+c0r55BvzZMk6ghEQ6RI73bmplHtviLr1CqXK\nrdAyh3VemBNAHKTNoRPlnBay7OZXINdP2zvhtyQ/U5KYmzTEpsd5JJQaKm/H\n1KlOXbN3x9bgnZNfp8erJ7jFR+u+m5NsPeH7Rg08D09JhE7bm3hUqH0I0cHS\ne7kC78ZZywMvxA/3rieLmVCQgcOv59LsFGPBy3CWTre4MljCkSKUVxYSPksa\nxCPa7nppvXOwaO6CZeQzufAKNGowdFZAyuEU01KhLtZg3Ufk71jjPUi0noaH\nObaAyPbHoyT5TcaSRFjjsQW8VoIGRtrioOk/Ke9+fFzHNKZH0vP+5SGUAizj\nWxIbBA1vp60dw1PtN2ub/yfRPiQ+MAGoNieco+6EmZ+oqD06GPCnXZU/Qer5\n0yCTOM435Ox7iefnGMdf0/fKToJxiTJ4SVmA98mnR0CYP41Flj9AcDax1q2z\niTfLvqQoVkx2Fajn8z590QiRp4RZhwd1KoXWS7VFH6ngoNQx8MP0uQodc2gZ\nYU3p\r\n=k4OK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbl++Jd5pqnyqydB9ve/1g0uLo6jC4SXAQbzaLWnsG7AiA2k5ZJSRxCralzGnSx6IeEdA91e9Mf6RNIQatpm/O8FA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.9ecf3bdd.0_1615422264032_0.37736990510462864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-icon-button":"0.21.0-canary.7c0e02fd.0","@material/mwc-ripple":"0.21.0-canary.7c0e02fd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-srcuqbdG+V7Xrmq6KtnFf2DaHxgM4KGbXxbxOI6W8m7aTYNCY1cpj0OKMF+yHbJzAUZcCgS6pVqcbCARVTNEaw==","shasum":"e443be072d50591da643590b636a38fa13226484","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.7c0e02fd.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaeCRA9TVsSAnZWagAA6HUP/jFel2VpRnsRkBlOBt24\nW++QCmJjkkjSNtpBbltvkTPxpelqqMS6ztXHFay1X1e7eBa67qF8qBoaWJPm\nCY3n9omtZxP4EG3psfSfh65bNMMlJTVGd7IIEpf8Hl9k8X6URj6EG6N3yEXQ\n8Pg9YMRzBfUmPwYIogYLEiW2gXAKoAntmLaL+zR1SUyTlQHyRbfercj/GIop\nlshHN6517sJPzwBh7O38k18UotVAxCM7YvlT+EcgIW1CJKnRAjGMpZc73/MX\nLb6zSg+lbv7A8mt602Z4Bcpzb4Vivdy1jMOMmIvVbsNG9pAtNAeFF4UeaJcJ\n/mb+7JbD2n0TFpgcM6QmQ59DftMNhxJ6yWgz1Tf5aSqpX3NPs7qt1WD1tRTc\n2gfitpUyQv9gtbJLAQDDnF9vZUa8y8kkOyhMCMoZuI0IHT01+4CAINgLxiU5\nDdM6bp/Fod0fGnmwy9MoHiDMDibZgwX5qflbnOO0wmXHZfDhVPFeVD4xG225\nXz3nLhkBE3E3ZPRi+VU5rfXVib/S6hE/eiJlgquSlzZTEynuDxddHryT9TMO\n0TXX8P8cdzuh6Yz7qK7QeEA30FrR+PSifGwvuR61HaxBK07u0AdlMxbvTxa5\n+WSlwkTenqbbBG+8agj/SG1YaLj8GOMnNZ0U8W8HjrwDm9w1V+Ky/PoR4W2n\ndTTj\r\n=vNA3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1sd681ZsMnWXPKcbwfAgDqmCCDP82HMXxivgtBxT+6gIgLrzqCRiyhpOJWL/bUgGrxCZc3TYqTh1MK/mbsFx5oiA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.7c0e02fd.0_1615427229975_0.43051643531002437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-icon-button":"0.21.0-canary.2d6d59cc.0","@material/mwc-ripple":"0.21.0-canary.2d6d59cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2vgiSN8UcQJ7Sy63ztDeJV7NpeDZ7YK1jgeU2m9JvxGhByfWGExjnurTMgQ3uGNgsLSuogy5b1lHNYvMKKLKDg==","shasum":"986297f4076bb1177be7594983700416cc35fbae","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.2d6d59cc.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGwCRA9TVsSAnZWagAAQYUP/3X8YW+5jf/KJOwfLIbl\nVJiB3yjN5v/pOTOoaxLmYMu5lFYE9T5XrHJVQVKSiJEd6U7Gprdy+5Iup/Av\nvpDYriCerXLKqDu0PPMe882hTw0Cc7XrRMh9pos3Y1Sp8TwsbQIk++tBcuK+\nWdu5mRUi8GaschNA0tdr/YA3a76aJKbpE8HCdRDZ3ciIoAl9Ga1DGJYDVbJu\n4YRRcRR78RLzWIgFIcgv2qGgpOMvvkVtqMH4brM9TfU31LAJnpbAPLvTnWpx\nBOjksSTAKjzCfw4BWUQMZ9YDEsrjapS4ZyP0xvkudp3ippbz1HoyeR0lHivP\n/y7w5RKeT4Iwo2x+GvVPk6C1pn86+fzU9b8Mb+Hz9J9i0ZnbNx+5vQtKSC/+\nTFHoSlf19t2xWdx8pOVFbiHqiJ/vyAnGKR19WvQdEl3suL4I35zPnVsSwSE7\nCQqvJWnTMLPcgXKhVJCzUt/EoN0JpfwxNjp9NSoUkQA9cW2oP4hEzahsm1Kw\nHSnq0LlYBurUMWuVw+QBexb95kjsqmKj5kSuGsoDE2wLNT7+T5TKEQMjP4IF\nfl3wue9LA2bK5beaCw3Y6q1D13RUu8TbbAJeEUD/SrmB2Wj2YYfeqH0bfDwp\nzxe1Y1IiUeA+bobn0jA0eDqCLzqBmkIG8aQrW5UbVo2m3B9+7K7e/NIbGoPV\n7fnH\r\n=YjgW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp1Wdd2PHn1WDLQD1a7KqhcOD9vw5zJOOdoUo7PhQr1AIgdfHZ5aSjowmkWXmyfzSVuELz4HRFiDg57ksAGbTe4GE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.2d6d59cc.0_1615487407847_0.18367210010050994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0138863c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-icon-button":"0.21.0-canary.0138863c.0","@material/mwc-ripple":"0.21.0-canary.0138863c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QaB9KxmHpilTLVnAyEjU/G/E8SqfTcUbqDvojgvn318JjwHiQs9VVyzDkOUDVoDwXCtv0LuTsmquNbEkGTMPIQ==","shasum":"13f739dbbf4cb27f715f034a24ae56194b1377ec","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0138863c.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNlCRA9TVsSAnZWagAAGkgQAJ0yQyDddvHaJeXuB+dn\n0B1srY0/puU5ZFuCA7bDR1g7WMFWtMIXeUgfavfYAXCMXalrl/BUG4uDT61l\nJjlQkB9DjYonoRTklw7+rNdbMcOKW19v74sWdTafBjgZpbWmBSEfLxNeiOtN\naEgp0+79TtHU5FroWch4lzsA7WVlUszTKKC41HDp/PzK5DUqWONOKJd3P98z\nLIpcKudn0TwcCJCbdKRsQ1asE8HYsYbSaqaFK0siwC2GQPsxnDm1zAmnVMjm\n8FRKe8pPFcupaIYluA/NNauMotZSXpq6haekDd/GlzcZtCC+HvPpWKYdM59s\nQNFqF6w3WQxtlLUoEZfeKJh+ZWFzOpn5EhdQZs+Qi0gEYeD4g10+sKsiRmwe\nBGasonQkBv1e3oqwDDFn3Ph0jYIfFmdLC8wDkdkGrGUaPw8uEK/Gw9cdtG4l\npFbVRrIeQMqSHDjaLhJgTTwtTHQVPsNdwipxpU7FcgM1DGoXLaYpslVzYOG7\nYlY2WiVOEXnlHuMynmjDsn/XVJ8RW1EPs7YQYh8pnvcaujPwB69WI4tVs2gq\nSiHSbx0TCLCpLja1MmHyVOEJ1khw5cp/Fo/qlETNlXowXnZwZ2Kl17FScPC5\n6B+4l7I9AhgPYsU9HkFE0TuaEK2hjFr8nuxdcnhOhB9ofVvKLwjB8Mu2xN1b\nUTjF\r\n=N2wJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaYU7drP6gS3DrlZpe9TwEyhMs8ICQSzOlT4HBT49vQwIgPGAyma70AXbn2cHKtDoTRF/xGhcyuWpULAujBB+eFEE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0138863c.0_1615487845500_0.1082017086289333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.926f5bad.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-icon-button":"0.21.0-canary.926f5bad.0","@material/mwc-ripple":"0.21.0-canary.926f5bad.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-COsqc4M5TsfVxjMeSxAhbY0Er3KUV0RN5LDLC0erIX6lBW7k8UcEKExzEus2OlAhQPQkqzWatL3fiKkYIIPIFg==","shasum":"bfc4d473d27492fc7ceea5d0a303cc9b589105bb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.926f5bad.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSntDCRA9TVsSAnZWagAArMIP/3cMIrix1vTqmL/DCmaD\nAiYeq64iEBS2la35bG3EPQVyQG7O+dsJXMoPz9H7xMoNmXeLCyGQwoL8Q7Sk\nY3GdJGQ+fh/F4ui0esi5T87wbaKd4xPPwA9HtFJ1/JOOfoAXyGE6iwkNVWUW\nEI1vVp2YAV1vZI4UiRCE1riSLTTYYFxDLzA/iyjExkEbSjyFBgnutATqekAV\nQZquRSshvABInlZuZHiJT8Q+zlSmVPA+yb8zlpjWDtptf06Ke0LBPr9nxk+X\nB2RoiIwt6fVgucEnPEXXbttStbxWPPwlzyo4hLgbNWRE7JKNIbbOYyXKUwg1\ny8GemCyB+mhet7VTJH3Jiv2xmO9Du6oYg/1TZC2081DB+MuHqS2P9Yfd+X0U\ntZlQGn000W47+JIS90T8OeIdcREFaeFe9szq0HZ2+IM5DMVxZ9vAuI7rjzdu\na1XOuRrWRsDZX2H86WWaHXVKu/+J5VN6lPvKpXsGS/fZak6cQRI8QZE/a5bP\nLQFbU9fU7ciC44J9Y56Ilh4uER/dfwHM+Vhb26tiYYapIdO+5MiVyO8kHGuJ\n+yZrY9Mpb0LX0lDpjH6+1M3NJ+R86FcKmr2wLz92BYGpstwjM2QmlrbX3P0s\nVDBWdb+SDOsk6pcoPqTytfcSk+7+qRnBmU7iZA3QIoVJ2o9LKUTUa7ix5QgW\n5Dbb\r\n=lcg9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGEh62AAtf6+aF7R/rAafhfdMoRyxI6BwSixBlSFvefIAiBDY7UnD0nxrC1iBAhF/ubjvDJ/0nNIdrIZquPF1k7q0A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.926f5bad.0_1615493954628_0.6410468317174491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.520290a9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-icon-button":"0.21.0-canary.520290a9.0","@material/mwc-ripple":"0.21.0-canary.520290a9.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YyjoRBEdAq0h2hGCjlzuS6lEOXAy2QRDA4zB1D/eG2cCUVZDgB04qRTLvPRNndh11taWzC78OD7YKBcL5Wlnog==","shasum":"73d956b426ecb392ec08170bcb502fa4736141ba","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.520290a9.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmMCRA9TVsSAnZWagAAw6cP/i59Lw1WyHieXV/0Muhx\nbzNZkxfc8XDOWy33B0naREniDYNhG787XJemREGo2a1Ljxc/Z51lWNLy1IaS\nsNvwmSRzA6JDEST0oFriUpHfghbji3lZRKlc9+KxmnvlTvRWs0WpgUI/z0yF\n51ypQjXktsP0rS8jBjSRp/ackl/RHKZJahxALDP693A8/KemSjBTOihIjwYP\nTSG/F1uZzKW3Y4lwJlDGWw2q1ynSxX57fnUXF7MSZnMbYkxtt4r8eJOWywj8\ncDJlji2okYajXLAvGjWMjpE1PJ5QWNRn/Gf6o3TpJl5SWmzqE0YTjQlcJ7x5\n5fxjnNYtt9v6DVeWbt+Dgukfjp7cTzNmtuWR4uG4iiDFp0qSE/anbcpH17M9\nXEQHXEg9Ol2H9MWa+2RDjDyx/l9oy/I04wA62OKsP0MXiq3dOyycQG8BMlaB\nPatkHXT6o35zZhUY7OyWAHefGbKwWuYYTaUuIRtCI5DrsAjCFthnnGi6bW1a\nxCqZ10H70rZN2rFIAkyEoWwBbU2LzngSYePGTh95kLRW0yeVmaHpzrFrySCZ\nmWUMjv3SdS3XIDJ2iBwP7/o+pJRDKz8YIgzRkzO26e5+qwdxREFhbzUqegoM\nJB3211rgiaGG8cZ7A7ZG4G8i8aCyFNV9Yt5QD51aK3h6fHAHfkcEEt2qViRx\nJe/o\r\n=kZla\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFutHLnTIAcht37un2iXymOt0h7QHNZ+x5bIrHS6srmdAiEAjCWOWBrfq9zvM88CftmAVet4gi8nAD/KrKYQBIpDZiA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.520290a9.0_1615501707726_0.08233608089368616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.9ec431d1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-icon-button":"0.21.0-canary.9ec431d1.0","@material/mwc-ripple":"0.21.0-canary.9ec431d1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-v8yGxRlXl1n7Zh0qMCXSMKJdLsgZizq+RP6Dlh8Bi3PDoZNmBWNgtnlrxgx9EZivB84xlwwDLbJYfI1vF/Jwbg==","shasum":"c17518fbfbd0cc8109e57030cdef9b80fc4a6b7c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.9ec431d1.0.tgz","fileCount":9,"unpackedSize":40597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqbCRA9TVsSAnZWagAAwaMQAIiMLV0axk6uFcGRV90v\nsbhiZwQLlne0/+78epGvUOl2dOoa5UL4AV/XDObpZESBLhsaCgEpZEq6dIoh\nMHPdeWUH+Z/5fcHsLJtYal2OuqbmVRQcVRc7uwT/mMDxEMgpcGaPGys778YY\n9WwsjHZalE9UkXOPOKpXY6pZ9YxFJ90nsvJOCTtwNgHTJA3OYY6HbFNektt1\nDQJ3bmkW1X3hHJxsiCxb3k8FshVLL9XrexWAVn8R3U5J2cv3ABrgp/5xIMJQ\nSWPnqJ8ultB9C6x7MthWzpYMb7xPrC8Ko69ttKPT8gL+tYH7Pl8TrCW6VCfT\nYanV2gS/r2dmmoN9eOdTrH8zoJbZEBWfUqR012/Rub1nY1KrY8Cr/9bXKk66\n21JUgJe7tds0G3Tav9iRlaXto3Qg6hF0Zu1bgjlZ28MXsu3NRHFfpMThuml6\n4DWWRnjwHp7YJLds2ZoRB17uJ6SL7aUVDpMWhiUC8WJwLkvUeeSA2ZFOKAJO\n6NYm/1ZaM4DjckZfpBWCN5EcsLavdHl9koaCVwUCo+h/JCcEmnfz5FEYbqTB\nYs3Stgm2GPRz7MgwmHZ/uJsK5i80u9GtyqGuCBI6Nd8RV6l2jE1Ok779l+i0\nUt4Wm8CHpJPgP9/XJ03hHWcubRPiymCin6Tkoj6BUJVKrsM2gyD/RskwqGfP\nCQLb\r\n=uAcu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5oT7cnAGitUcLiMqNTZt8t7aELfpbEp1AObYR5HDOCAIgZtUYcSVvkCidlC8b9lNI8+c6t9GnLY/kly49Pmj5Y3E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.9ec431d1.0_1615501979025_0.03854202839502374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.4246c082.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-icon-button":"0.21.0-canary.4246c082.0","@material/mwc-ripple":"0.21.0-canary.4246c082.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kL4axtvb120wpY7xh6NvEvIdLjseMhsDXQjneg4vYWjqmHkiVEochXLSIxUQZXGOSAzZMr8ebGOcQI3/g9Vatg==","shasum":"a3b979c1a8560f456d99662d640befc47156a6f8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.4246c082.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpw9CRA9TVsSAnZWagAAb10P/2Qy319krY2p+zvesCWj\nDm+GCElLqqYxysUyf+ATNVUBjVyTMa4/V6kBXBlFWul8SxLs3hn0xukyyYJZ\nqmKS4IpsBR2g0xOyDPEJVT2/mc8G1wn1io75+S63pyHhv7soSCotuQ+oHBtT\n0b8T0NMSR+8Qcyibk6Zg0ebhvGaobxF3WXqWcYNrraOcQHAERseAzfEI/OIj\nRe3FKTGcWxvHUx/MGgBrGJVk2okwr9bKgiItC5LDObau3UJKbBl3BmY6osIh\nBOxLVUJdfWx6b11RhkwzS+SZ1wWJd0R8OfMp74EKYB8u20+SEhYvXB6gm1kG\nZMpEB10gXIZBxklEz4D+hczU9gswSYPyP9KBU3aHWyfQ01G+VYMpJHp/1N22\npMqC3Fh5s/Bl5Q6M92i71Kg0zHxwPD0CPpmhyAwKXQy2gt7i+RtozAh40tZN\nWfRkYjJhR2N8QrtENTl80B8QmHkgli6gteazEZ18V62UWLxt7Lb+e3huCw0K\nkJ9FRrZ7UemXVKjfcn6OwN27C9cA0NobPWlgQ6KLhGmdgKA+p+chhxng1/jk\nw9xkJ5Vjt5i+23wxWLRnqTdPBNQ4OEAhN55wGXsi67yU5qjnBLV7RIe8MVA3\ncbGku7gPXak+cAayyElV7xJfB6TSkDGr+awv/egtr1PAQ0cHlwRULsxmzACw\naA2c\r\n=d6L6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWUCSR4MKZmxc6qD34JCrtT1vOuy5DEBrO3iUWT167hgIgIZGNTEQNX6s1O1o88EbNC2l5/gjjbMTXyeoBoQMh6FI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.4246c082.0_1615502396861_0.3508987184442651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.2d736253.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-icon-button":"0.21.0-canary.2d736253.0","@material/mwc-ripple":"0.21.0-canary.2d736253.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y7B/sePjH4qflp2VHzQFCMBrkYGMKCjXmO1qct0Rnkd6osnJgqLeuq0tvmPeoYXA3GJzMk8DXx/Cc0hE53SZyw==","shasum":"c9697e53091a296c06398681b8d52a8bdd3318f8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.2d736253.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FqCRA9TVsSAnZWagAARkEP/iaQDH3Cl8YwDQILQCeJ\nEJW2soB+1z5E5yhgYSuSaBAdnIY2bHJeklaw9z7xdXLDdf1rxdqyhosy06F7\nX//9JlMAuOgAQ36gDzku5ezKXBCoiEZ5xHbXrmzRFLgdEZm9GG+dqztzZ+ko\nNiPUMIISjjKEZ5lJ71CpsaXnRZGGPd5dWNM3M7M6f0bhAo3LFCNOE+qxwZMF\ntJG7kJyJ932xo+aUkgBkjXajB5L5fEKqAH9fNiNWnAd2D3+l8JBtY1YqpRDo\nViNJyhFMaT5wCnA8se9J7Mx8e0OephJZaFfXV5yHiOV52DAmolVu4nRHAGkM\nrIznQMxpw71GR/cu8hSdAo7VQgDgR5rYuppXvwie14gh/WhArxUN4VjwphpM\n3FCNJNmEP/EIfYyk9Ptpj9vuRCkm/yCbhiin5p0kyGjb0XEGkp7tUi54ywPo\nE5rRfyM8FJlTC1g1oOkTJjIDuPak4Hi0KmU/Pdeuq+tRnqDGjvURCm5TasLZ\n0uEcJCg37pzGAxLX/8kFrdwdYTl/Q0by8QtyX3bNxm73sqPCtLv1LqqvXKfT\nGLbxSg3JMIhTI67dxvBMjGorg68I4iHs5ocxwo1JMr0YZE6fLuk5ne+C3rZg\nqsGIu9a8RdwEnHvq8sPphDpfFwzG8UpBnHsQ9ndBT1LHGROYfc6Q1pKitm5X\nD5bE\r\n=jrX6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt28ug/96eixvgxEQNL099p+3V/6Rm6o/cD/Y98vlxIgIgTFeqb0M5pfIYZDFxO6GlijmAJfvm2EefklVwjDoBqU0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.2d736253.0_1615847786417_0.7764033232478869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.7033124d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-icon-button":"0.21.0-canary.7033124d.0","@material/mwc-ripple":"0.21.0-canary.7033124d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+9AUyUXIT+WJBFBVqALZCly4TQdk5FNpWMZNZrMloFvPKLI61cpJ0Qlg7OR1sohzl3ioXg76g0cKRme+6g+Jfg==","shasum":"db4c6468e8e5e774a2d8257dd185ef5f38a4f43b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.7033124d.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsWCRA9TVsSAnZWagAAq2AP/3ooVZi+MALtVP9gcuOa\nhJzuMh0y05Ekaj+r2h7ZEpQxwExrSorBK23YHrOH+CesmSmh3ixSJWri9qH9\nx2uqQYxkfoii+2NMg3gRoF/CEwIH1ncq6DbJdSj3al4T6Ip1v49YzFrDDBd6\ntincSIC3pYKXBTbHXgTUkTrNiJjLUOHoyCVipkvnGFT6zdudjMLlr85rLJW+\nB9jIb6npjSeo3LeBp5Bh4UIuHkfpcev9lLPo57IK7DF+rrwgviZTy2V8Fosz\nqmYURRJlJcl39LJDcknXlU9BTgbyD6dEXln7Om+6/lxrbw5R/1yrZcbvggbY\ngyNMTq1Zo1Qbh81FyWtZEd3fpVryELpxNKGfEGGkeEXOoz81fH3X7GQweXkN\n5uEXjJ2vymoT5g5s5TcKhZtRxy0dtDP1BKwGh+Vwg/gu7q8XbduNjfzlZBp7\n8eUnSNlhoy5A8p5xaDrGfr+AWRuFpmPFLjxqYBXI0yaGmOaAPdYeL7Qs0AEO\nXZSCW/0aONbbZC8lqbT/3V7GRtIH4/SMt481TcdQnQOm0i76iwHFO3mf5lmQ\np9x20LLjp2JTH1dlguK+s3CWO+q7jYnCPC3vvuX/caWr1lnSRGD8txPcuswF\n/cNYa4KJbeuRKEosdbUcX1kqFLMMf1UNgqlJhfaKuGrvaWYTIf2Ec2A4y0QL\nIATs\r\n=XI4B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKRK+uXwoYbAYAOaXa/PHfr9t7wMlNJ/UsEnJ6mjLzTAiAws8LU3ZsWWAozVXD2IIqQANfOMkHAcf4YwTFrElTZWQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.7033124d.0_1615919894226_0.9585769782200468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.6c0ee901.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-icon-button":"0.21.0-canary.6c0ee901.0","@material/mwc-ripple":"0.21.0-canary.6c0ee901.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3hKV4BG2qv9XFI/fCrlyGscbjBdZpGKkn8KEKYx1SMSFTNDlXUqAOiBFE5d80lLkgDdJu4aYn14EcbU/FR4q8g==","shasum":"b6b07cf6161c7322650a7526eef6a09c169fb4c9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.6c0ee901.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOpCRA9TVsSAnZWagAAOXIP/2Uqr/UhkyseluOW8l5f\nG2nbFq06As68Uuspi845Hgb2jDWg5PrIgCzrZDK/u2DWYeMVy7WxHYk/0kLL\nVNNfABBcdSRDYxksG4zR4MQklCCMBOzRd/I2Swlj3RX1UAIQpiNA+9kj3tdl\n0QyVWDioSOiV1RHYs1BvMwd4GE7slRvQzP1nziJhU6wf/JHe9f+7BzxJcDd9\ncJDWLyhk0HHxTWTVlPSjfd1tDS0FIMCrHJGgN3FoUCZKQ48+2r5cjV4HeIg2\nJe4E0WvXDSgN4j0ZW7dA47KhoTxFpBDmIEin4OJ0p0U+uaJwW7mYnce46oa5\nJG5UtCf5UM1S/06CgBscF3YNhoDv2ImEY/icFr+cjiwDvOUZOfgQnwTejo9A\n8tbIwfQd0HGmNE1pjvRcwcX82bJZ5d4zQzxfN7jq+aivJ0Y2gCTRClfXmLzE\nJcYiTqz0giEGCrKnGQV+/lLqCwKSFhCDY/lmYZ6sjxIUWfbkVOV/UUijAFDf\n15Xmf3hRCRF+JvqXGbMYVo4iBhTwdD7fpOlZh3M9dL8gpF1HL5MAC84HAHMa\nlkS6wx3cSFDidLE0DLWb09IrEqUGxJMeA7MVkv0evxouUx5qWb+C2ShzXLzD\nWSiZl0LYOkhOJ+FmU8ndo4SjiWakvCyukU9OzBx6iM1psutLaWtjpxTE4VD3\ndNW+\r\n=bRMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD48ec+5aRjmFGxCf0wphu5sdI8O/ZvVK59kOPwMSyrmAIhAPRb+WGW0346Ed33dSJR+40HOzxWs6I/wbF0TBjwbqcE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.6c0ee901.0_1615934376564_0.8438891297657216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.7f0d605e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-icon-button":"0.21.0-canary.7f0d605e.0","@material/mwc-ripple":"0.21.0-canary.7f0d605e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Qy7Y2+jC37kfS2YxpApZWtGEofh3/Ozy4hRUi871dwXMUsQMe1qJ0Jt+Eyk4NjM9MQksgR1CLCBepfKfneYV7w==","shasum":"81b33663eb96df82e52474ec4a5529978b9d61ec","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.7f0d605e.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTdCRA9TVsSAnZWagAAWWMP/3AkdtkhF3QKzRvHDYrF\n5Xbo64+aWt12jl9cyU/LaSveXnnd2OSDF2FKFooRwJrs+L2N2ehFRpCkj50E\nBCS72QunldZn8Mk0joHsebIazL/Btx6w9ehhc43GosRGFJv5UMjIioNLGdJx\n5oKmFjcUfV2cfUlKit9qrsSrYkFf0Q45rxVgfNFyYq35kVwxF+3lJg2/ua6c\npNp7jbniXK6H4EEYxSaFobW7vMtrAwS6++2IOL9SbRh2m61wSKTwvtUunCGw\nUW1Txq/+U4Zgvmg2vAf3snH3Z7s2bfe1XO9/tcRS+RvIFg/kDfM4r8fmcN62\neIVUVahbxUBM8qoiIhN2qKDbrzyowZvLOYsCWg5p0XHEUTXIkxVPpJQodOd4\nxrwUV8gkxGp5M1eRkzt9WVtE5rzD4g6Pw/dI5IMwkJH848S551SMGMiSHd2C\nIoaykLIGD9hJvijgMm9KCamIlajg/PpUILSByzPeciSIqzTiSScwh5B31uT9\nrcqqJ1O9LWpfBOzidbN5jkWcexlP3zMwtfu6KbGbPt0XurqPuR7kgvM/Hldz\nKcXsONNHlbRS8rTEc6gIpEXlEX6Yn3T4xLVIvN7HTwRqUPpvQtuPJ/JVz/NQ\nptrx9h2e2UUc145rrxPHJ9PI2+/c/xLh7vk6Z27IsyleuKDjW5QLyeMaPXBG\n78nW\r\n=Cwlk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpehYDbEO6csxigtvGmLGDT4WkWCZtkKaZ57e7T6ujVgIhAIOZdaCcsqhgDQrS41E2I25TPvAQdiySKJInpwZ5opyU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.7f0d605e.0_1616004317355_0.3217164995553874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.572107b5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-icon-button":"0.21.0-canary.572107b5.0","@material/mwc-ripple":"0.21.0-canary.572107b5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-AO8mWNHAPo3riMJgpDj5J1IDrgVvFiVaL7W7x5YcZeJQ6/cNJhSfXKzWEfhZzzuucPkEeaBzidmpRXirnCmsjg==","shasum":"d75b92ba09c9d33ba433b71aae9db50f55a7892f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.572107b5.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+hHCRA9TVsSAnZWagAAuQQP/3ZhUBGiAqgPrxjV9E7m\nX2QDPX2HunfHkuXW9NCVo9WP6Kqy/Ivgnna/QYIGyyA+wvODRVukAomZylB6\nM4NDlSwzjfy9TNdAbb5aMtqkAadl5jGWPoW5OE38dSEhPBUHjfa1YXEb7675\ntqC0YTY9nmERv6ohfcF98rddchUUGzQ0UjHy6LnUJlkPzuc9Ka8x/DQI9G+X\n3lG6qlEwpbWOwVd33DQ4gaxCmobpo14+hdwQsChTQ5xZgVRdY+rspvejXkbN\nsQK8GJ/qavwY3OHWhwSox/SKrJgx/6OIty0vhs0rn0jwGvDEP/uMiSujhM4W\n6mDMXQJ3qGQ4HWjkrYg0ypraBa4wCdyvYnYWiVDN1tIMxh7SibJFwu5b++pp\nQQuPqsoCLagDbs2/pF1WKtnH4lYLeJeCszLib8VugUhKebqGIMYnNS8W5Z1u\nkDVk37K/colc6y4iMejy96Ecrj7SO2zopkPwOR+gV1tUuXMy0K6DTuYwhNne\nrFs8QEi8Imuvrvg3GVYSlWUnF8eY7BRlXVQ9GC69tEv8UL2jzzS+/xfLzM01\nFY4SEuS61wfo9mkCkQgbyjhrQVwoPIiXJcj3qzY3NmmIUxOPntQoa7QNYWLM\noHVVVoa2UVf5DRxz5FmLuimfa2aNAKB3NYE/3mrzw4KAkbbI4I59S/7fpd7y\nljp2\r\n=mcM/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxULor/0fJim1R1/tq7H4jSLjJgrZYEH6AtUSWKGGCAAIgTXR6fZ2H5Qyy5eBmpKMwp7hEJrAGPEgOXpqWQntu4mg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.572107b5.0_1616111687287_0.4068088155654175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b7b220b1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-icon-button":"0.21.0-canary.b7b220b1.0","@material/mwc-ripple":"0.21.0-canary.b7b220b1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0NoqTXJDKp2GxQgM+OyXevPDEcHvo2NRwfh7/fvfQ10Bn4tSCmLeNvgiLPXrQqULELzg7swedrEY5SkEdcpN+w==","shasum":"5233c85d91ef1c36eb48398b234f71c55cb1af3c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b7b220b1.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5WCRA9TVsSAnZWagAA5RsP/REujxn0XLAu21eVKky0\nwBKc3r+SKX3JFvu9yPCgIhhdhWLsAYt1cDUXsKCkMHjzqQemo3Ai8PS3c5gw\n7kY6eJ1yUcLZ3elSaHXl7qHCiPxPAe32Ja+7Gdn/gWQZOQRzmIG+U6PxOcy9\n8L6M7xg4eq6NmHU1TNJLAx88clx7LN1fa9f1gtOXSbcqOD1XTvhTBng+qdPi\nf1KnutPKa/C3Fu9Z55cJV/KvF9kddZ0wRoul03FzRE1OpFHKITZ7fUSaTLPA\nFXxUQmYlEfBpjVQ4eVumtrEPCNfJ7FUFxf6viLrei0f+/QMCefBy6Nblgf3Z\nAmdA25Yn9ccJ2QGMD90+cA33NEAvLMdT0u60pHSQ8KSUkWrRGbQm7E2GvnK4\ncDt73tPDBaOROR2IePBsZ6kRdG+Xd/53QmXEAuO6FLCTtBY6vfLLRMbN726E\n83gQiKfXgmus69hx1e1vyxIbuLEZpTq0DVyivYs8jh7frvpx6BF2WfvLhxPm\n6csrBafYTt09cGyTY/Yyn7IFGsZp/E+TSI7TvOyPvAEQbB02wXbplQYyYPcK\n0bkmo7jT402JKYUEG410oFU/bnj+FkziS5JzDBIeawBWKH7ImEaZ2wAg66ZQ\nyKKY52cxV+XJ5pS3DGlbgoz4bDZG0yOP/HwmN6XobQZFj8rCEIOMOegOzaBz\n0AE0\r\n=5XWv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHc0UMtOkhswZ5WdG5WMp/TfV60AxiK4s/jZArTO/AKsAiBcJvG+/TdX7Y1p0L/6kwwvhfRgCFJYGh1aVU1byrGI7g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b7b220b1.0_1616113238150_0.510650282366883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.233b2de7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-icon-button":"0.21.0-canary.233b2de7.0","@material/mwc-ripple":"0.21.0-canary.233b2de7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Fb5Y6Z2hayiM03683t3C+e0IY1dN0acwmZqd3lL8eBXZZVrc6yCj/t5Ky/DCT3I9mVpLb+UDhg5Aoaa1Ife12Q==","shasum":"c90d0cb2b1488f1d452d9f57fd8408b40ec82d6f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.233b2de7.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO3DCRA9TVsSAnZWagAAkHIP/3AHAUXWD63l3ZUkEwJX\nH/XJtkYqClGSkYIHESn6/Ggw7Cshtu3LSyRo+XWa1aYFXoOrbh6sGa6ylyLS\no89o31bkmF704rAsK7zYH9Z9CjsDsq5h4KjD1objwqp4+mYuUI6EYLpDEAJi\nVxOQ7BVn7DSw8sgaYTakhLOtXV1Mn8UTRyuL+L5kC4lybf9qNlRsW8hCfO/l\nVl4KtsTUj2oxFUh1aTbimRwU2UXWy2f5+2aF0MExVzeAG4NlW6MwE8PxM6/G\n6Z0mJrZu48V8z7bDlkNWyEwmTvtAgEZnVbZwS+Ak498tLso6M7bW9bTq6KhI\nXB+mizeM8CTwtWBwbMFjOsf79yfHe4hiIpg3wyw7G0AcaYAK2ITKpbDb5N8D\nCkfs/JSz1+ri74jI3vJ1G/SB9eI3+tSL/ZUtdFiDdoMDFFApL8VP8LlkqzJG\n190n1eEwCx1CFwr9zvk037eNBYPlPu2rTU1EklRmGV7geHQf/IqWvaQDDEW2\nmsFgGD1O2Dt/8eD6h0o1txLvIUovUvJlkcE/+P+QD5olGMV6PhJl3zBKDbmX\nNXgJQbwLk5pahDe4E9ogvfuv3SnWmuwB0OSbEGft1SmgQn7SBODQLVVPuFyl\nsKFndjviIIW86iZKMtzybNBBtpf5GU8gw631EuQVNIMG3I/tRIQYXYfxdpog\n4QXn\r\n=zUuu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1ieGzazAAFjePsGYztCDvgpaxBc+JorDfLuKG8StmvAiEA2wcHFjOIiR83seglxoeHHtOA3Zq/HN1RWhNWgLWlwy4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.233b2de7.0_1616178627229_0.6057504266156799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-icon-button":"0.21.0-canary.0c1a2d97.0","@material/mwc-ripple":"0.21.0-canary.0c1a2d97.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WaPaFLMWx1bmO5LRJU3BOj86YIYQ6PmlRfSO2YSx4TXqwXIkB6HsF/RCWZVpj4qzU78JLG4tdctm9MwEncAbvQ==","shasum":"c6482b6b17399efcaa47da20b6852b398e1fd9ad","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0c1a2d97.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXyCRA9TVsSAnZWagAAu9UP/iIHEiWdQPTWfDWVzPGC\nawqDTHzEqnUSlveo6hu+4FF0B/RTwTRFRhCoJOR3sYDVMtJEK/bm0+cdmiqf\nK3djs54ftfCG2w2ho7ZgnWF3TUFv0TC2DmIislZXSR+knfEQik6Nj3ZE3YRG\nsxVELd68FfkzccgQnaa9bHQfOlUoqYMIfLRj1r9L/CDJQJOx5+kW6fEAYVl8\nR1TQGLaISYGuz6nFaFHpZXKBNrv+al5W208HBCr+I4Wd9W3fwJSn3RZ4soCI\nSOYk5FHdddiEHxC4Lh0V92nuNiraMwW0YDr+gZkRkAzOXi52CkKB5KKcl75K\na2E6ZLigNpVw8idYWZee3PEPhKCKvChQBdcfRQ0rd9b5tEdy8K8lvS97rMR+\nqNYud6YnfxRjJJlDH3PCPIkf9ThybZin1uch23ZWBtwUspgHPBHGr1hrpcn2\nFvoeXovRpD718LCH4Aa25ZKDMpMMbj98QdxGeUvxSOYe4pS+5c/iobHw/BXd\nyOGfILkXi0sXCzYTAitWtCBCif9kXuvffRSXczeuJA6/s8AQ0NrOxxbqV/si\nSUoE7qLJYE1OSGrfnwxkYTKqBtpTYxG4ZSJLwbF1yC/0lbIAXVbznOIsAi/e\nvI8NUf6cEe0XcPaIn843OIY76JmFegMuXolQwlaFK7gaM2fZJFwJhQifOnuz\nM4zq\r\n=dHSf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBG4kxLLW+VB/ztOGTnmR+no5GQeWtHQPIdm8qsTbo7rAiApH56SHS97AzVonSDyCIki0wx9L9GENEjrjZ15+x6zVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0c1a2d97.0_1616188914373_0.06729115529912977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.57ca2e73.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-icon-button":"0.21.0-canary.57ca2e73.0","@material/mwc-ripple":"0.21.0-canary.57ca2e73.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-u5qM8Cl5WA2jucNrWgPt3p0ftstkZyexoJwxGOsek4130S7Pw5skoD+D2KA7P0hmR3oru3THnWnpkDEeAsrwIw==","shasum":"d1b504dacfaf64ce9ef129fec34d915fb3025734","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.57ca2e73.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSiWCRA9TVsSAnZWagAAPaUP/14Am4zd4346hotErM1K\nreV71qR5C7dzZck0fMACsKXkYsgtvNq5qZlXELeRxPaDiekrDQlUUa4l4o+2\n4HBIhXGYYPrKdppgwAUTwcIAikpOjPe7X+f5WUjBFbTodwAvJvgPibst7f1M\nS3UPsq+j9yggYhnXV7uU5Pvnxc5FH3m3m9PrhVpQ48vHQH6xTzwl425u2JkS\nHDjmRVpmj7RWRlAKQD0nfhpD3W7j8nsIMuknoqBBJI4ASpJPjTdG40cHjCqo\noDdHzpslmJ/CWIQgV+Q87tS1BHS0yBtVNxACxIKabp8ZlcJJGHeT8avFnUnr\nEBWQoF+jEt2c+KWk096s4WBJINE/Own+HRb+0Us3cvGmlqklrthzCoULLeT3\noWezklz5416yInw/eGVOBO1qtyIf1b6jOtSLod0kZGHVAZ6WXJTzWeKsgsS5\nQe6VMj6ZOXXX5ILsxW90iDP81mRNKu2JpppBQNoVIry87VuBk3Mb3j5oifcE\nRnQSukH9zM6h6aJMywSPZ4+ns8YHXA1nrUBJriNSfF1RzcbyFE4tTSIYGTeE\njBSea2Oxzkv73ipJwHeRrfDyvEQp8LtbKkRigDok8Ea49P5w9SfD1DYJFqJm\nUYYpk9PORQskqMX4QcBojXhhJ4mDz63GEI2nTZvRZDYUGrzC1H2NA7wa6xkV\n+V2k\r\n=RzQq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6VKvq9qgtManh5x2q2b1j+P2q1YHt9F8b9k9JBKBJigIhALrULSQmZrmYKfbVs/k5st6Jw6CCAFEE/xmMAK9v3o47"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.57ca2e73.0_1616193685996_0.17678430995181094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.5c058f4b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-icon-button":"0.21.0-canary.5c058f4b.0","@material/mwc-ripple":"0.21.0-canary.5c058f4b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CrtpC5oO7yhCY/4l04t6B//mJoTsAPe+kNQZW+OSUrAZUpLK/75BKIuWAlEZPSNTW+wU4yu6AYFNKDfbmxCBCQ==","shasum":"dee47af01817fdb138e423edcffc930f07ae8d01","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.5c058f4b.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUTCRA9TVsSAnZWagAAV3QQAJuCw2N7WQNayHlNbZct\nvZnUwfcF79mdhBXqXw34L4VmOJImsEQ05YGYH10MjHEFvdZKryFQ3RV3mr+j\nRzXnIVaT0RofFo1X9CCM/wjU2vdyqtaxox4/Unzg15ntyf4Jtrxd5qlfa24w\nLrnHc9rA7ZDBc6mWmcaxLj37eaAJJ4nF0XX0G+5guHAyLfwJol66dczk81XB\nzk3tGN9+d7W25kKUZj/zc+GO27dFSEdBXKxtv3W5xBFA8vbYzq/OXuuj6Wt0\nZf7CIuQ/FeH56wNmDn3bItZULcnwDIpxcKpB4bcIHXhr5lgpL7fe/6UO68em\nfDn8UGAKBKCS6HMKA5FX4uTVeMqDeKXJ5VQEYgjuA2dp4QWwZhoQYtF5M8vp\n/rVDZwA2V/KfADiDu84pFREZSEs6DEncsMI7fjr0vPbR8tA5+Olt3OFROPRA\nsCZzKMHpCbpnyDVBwxJgOIV0SqSc/gOKz/aaEKLkGzFuDhFOKKVLlCiJhJB/\nhYfdP34IaCcWMoOSH2J0bpt+LVzWSSr/xbKsfabY1BQzIoOb3XQIgIYspWJr\ngdH94F098MUqAvHRf73YeyAdqI+S+LY5rVLSHMAglUGxN8b1HgJhIRzt89dH\n28A0QvWLNRus4jJbt79UjdWobG6lWTE7w7RgG2hm9SWljlanskOYKGVHl7nn\nyV6L\r\n=qx4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNactZcl08TFz6ScJWSLAjygD8g9LFzrobnAWIB13MkAiEAxa1sHJw6NbAUmCvMbNF/+qXZ800xg8V4Lcw17fmECTo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.5c058f4b.0_1616540947080_0.7718712569261097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-icon-button":"0.21.0-canary.e27ef7cd.0","@material/mwc-ripple":"0.21.0-canary.e27ef7cd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fv0BinyibPCMIVEJ+wldoAVi2I6QGFbYfK9enKyAYLSE2Zh/a8eb0NPeH/hvPfA6B9/tyXrDXLbjEzfOGlc3yw==","shasum":"738f0431caf886c7bd70844a085a13ea4689f924","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.e27ef7cd.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YMCRA9TVsSAnZWagAAmaoP/18PNJikMCE/NIoALe1h\ne9IQK+A2XA6SwLk4/25gV7DuTro6+Y1xHKaTQBdAL9tmR2tSe8nI0lp2u5UH\nWIqFPPlDYK2kVJk2GkX0QgaNUjuCFV70RYu6yfWeVii/HF5EKkyp4M7QlPcN\nEYPZdWu/JMCkxpkJdbOn2GM7hOkGHfEzSRBVeC9fowLR85E/jpjuca48Z48W\nzrzp/rWjEuFAMart4L73BH8eQ2Aaxap26HBGsMjihdclTBdU7c/LYMN8HKzI\nVGtQx+VjZLmzf0oYFLfjGwL8GNfK9aLZMAN+MVk0hFk69kgOhMhwiupiuERF\nYkUi0/kp5imkCpnRuqwRTvh1rj7mfkKv6aRyGFPv4aTq7dOYW3v/zc5p2vno\nWDyhUCqU8jUz7/F81D+GtZ2QyslevQGQnNrsiGLvC02AfC9JyRB4Pw5St8mT\nu6f12zpceEisXBOc3b7gWj7Kil4OrtgxzThkcUGHeSoo8ZX5mcCY8gE7Ku6D\nGzYaUN05VRR5gObMrwTPLUsXuRY4QH6UoWtiultl931qsXblb7qzvFeQ+9Tm\nSeuJH0HngVPsvANtokqn5EV55ObDEBTRwFukzPa3vG4OS8tgcAFkjgnAw3YZ\nyIDQRG4ovl3xwQ16z0q2f5RH7mcNHCWXSs4PbwRFJIGnEarRwU7k3ZbW7lAw\nhwMW\r\n=iaad\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1CW1WgAlhskUNVBrS2P1HyiB8Szm4MAZjhwrqzILNVgIgUQjEJ/+LtziA/xo7QnSAlEUA7Ac7SkQsApskGyojbhY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.e27ef7cd.0_1617135116047_0.11415494726944297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.15c09e74.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-icon-button":"0.21.0-canary.15c09e74.0","@material/mwc-ripple":"0.21.0-canary.15c09e74.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lYpGq200+jCfr9S+IyNS0/Lw8OWu+DbEPqfZm+XufgkCMtopWS6PXBYSBAnBlblseeFwW6ydG6Y9Gw1cvqk6tA==","shasum":"f521bfb22003528300e708c4b46b6f5c12195d92","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.15c09e74.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKfSCRA9TVsSAnZWagAAp9UQAKGWqW+AGmV4QhSLK3DY\nkKLCScuoJZ6Vn0Aqj7+6e14y9zdcYlFsnznKxC7PfMORaPCNsWG1l1foezDV\nCOmgl0sQxWTbs3f+ogJ8PbzGarr5kfsy3O6xLigeDdRtxU5V8NLFwKc5lNun\nhtJ3ePNRTlNgfsJGEpes7sYsws6fIA4CybHCL1vdZZjxlCuBSEF4NuxiDD+n\nA6MUngPrnuZqWraD7SmCHNtaFJyQ3lWvazInmdcmR3ziEL+pQrfd5Ix1fMQR\nGSsq0MfkVEuw9NdR5ma7BplXOB2bDliF35ceCFmVDHVhmpYn2aqDfn46/2D7\nzKbUMsROtJpQW4APLsmkBo/8z+k29d8yJRKFQINm+rHqzN0MVHT6e1pF3yW6\nB2XWk9luRsIBTNDEFHDqnWKKWG2+oI0jyfkSDU1Gh+szPLr4/5/x5YWbN6qn\n9Szz5p4f4ey85bku0H3lMHCxsR6Q3HC4r3+MCnSs7tYJQuI6NknE4bP5VTmh\nSVU8N7MfM3wrWVQvJW7/5CQ6yM78+dFet5Sm3zxoWoXjF0l8QvauixRJZ9l4\nUpsE8qLNK3qe3BRM4yAab9Z4QFINKGj78e0uetw/Pg9H+h1IdjUdZuXKfroi\nGfVVvP7hlMbmn/O9f0+1vIwX0AURFe6rsbA0MdMGOo0z6om7scnIw46M/RZ6\nVVmj\r\n=PjaW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTj5Hb6yxH29+W5PjyzWcZJvePRnzlkvNloB5lUuIPKAIhAMwuG50leRSu7a/3KlUnOS/aKkesqvgTgHjtTsRHxEIN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.15c09e74.0_1617209298369_0.4200032613542206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.4dc32be3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-icon-button":"0.21.0-canary.4dc32be3.0","@material/mwc-ripple":"0.21.0-canary.4dc32be3.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6W/nuf5D4s3X0D72PEpjE8AYIzXSfel6L9dmQIW/Pzi7CHXBSUeWbXcHKs/b1yOKiuUYTYvI47ZrgscK2TEpGg==","shasum":"b5072ec174321f6a64795336faffdd24a1245d69","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.4dc32be3.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpfCRA9TVsSAnZWagAAy8YP/33dVBQS09JGgkfDbSsJ\nqcM6YFlAy72u+UVU22fWmVUEhh0hFTqLm9knUodb8NwSsgVvoHQeg2R6l66D\nYc6f4c1vP+CnRVsarXxDOfOrco9Tdmwtwx9AFZGo+wNAwVpZ2wjzNMkXzz/5\ndK4QtPR1REW3flrKO3OiswGvBaxg3ZpFq0VDNAuyNcnp4wjZm0n9A9SKkMK8\nltOz0rObXEV2XUVUmF26yKzpEgqGLP1GX+oaIBwk3rcgLcK+O2b85I9I3tWC\nATuMosrve48Kx24c9x3H0u1ZDxt+N4H/IQHjs4Qsr+MUORd5RCj9ZRjhDpMg\nd9833wK6ZQi4xxdbKynF4zWVZpCrveVt4nyqUmUJwE20JNUkCPkfHoBOwg4L\n1Jf/AdyF1731amAckZ+MYlmURIBW6XwamT/pzqEg7XyATlEMHmLHTSTTfSrI\nZqnYBKgJj0ERHjjEOEBKYUcK/5ckkbUN1lopeuIALhE0ir/FhtEBS1EIBZ1S\nidS5C+/bUrHyx2pEI9OG9ouVhO03XviNRa4muEzfa9UMI9yLOtMwwvD7Z3GQ\nojsYekrFUFyuDwJWkPm0XpcBfvuRvMoZsK4nwTaSScbYAlv/LWJYZyJ3dZiH\nF/k12Hu9gt2eMTUUcldEnzZLhNY+6m2vzmFgiG0KU8OcXVdY3GCqV46wCK3d\nUapF\r\n=Lwo0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn7axrc6v7D3Us++AcAdD8yf3NOC84TahX6jOM+a/k5wIhAIDbPRaG0j0QZdAnBc5t0hRyObUZNOfUPw5/MzAophJ4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.4dc32be3.0_1617234527143_0.459351053261565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.4b717f65.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-icon-button":"0.21.0-canary.4b717f65.0","@material/mwc-ripple":"0.21.0-canary.4b717f65.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-muxEWc22JjyR+Fm0BgewTURCFUlXSR+lFy/DUXpVMSDwSHRbWeXGoWm2km+ezIKUVyfjx7SqWZArWMt1WdrRfw==","shasum":"2c039cfa322df099d9b9be2499cffba63179a539","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.4b717f65.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2vCRA9TVsSAnZWagAAM8kP/3cZVG0d/EdA12Kzg1vA\nqG8wLHHCGd+0mxzvK+vBerxTAW5LebyRtOrkbswFwOgzEDX4+myjD5X0tdH4\nLRCjhK30YSMRlu/lDnLsa9wcgajy1lxdF6lJxTjnuOTUfCcAdbuyAERBbKMl\nskxCc8CMj9l8Yx8uCqk6mUBlGNl2n0DuqOJrUskiKPaskmZzOYoFW0Vb00y7\nDeD7kVgW4ToQwotWjjrjjZMm2byjTbx3DLi9BBcOyJEI5ccPAfPBTZdGCVY3\nB7i7TMVqIgZWxJlywinu6Zw2oL+6+mUYF3TgQ3OGbusO1TyoR3ta0NHkF6En\nAX7eNPzXRBvlFFQN6fU1r0v4LJTXu2hMIFXfCNu+AF3Fs+3BKQECVtM/A4XI\nAeAorms6oay8Dqus6g1W/TvPFURBVN36pDrEPCkR/VyoyYpTJ1HM3gqlt6oF\nqUjLQJxvY/WVU0JUrm9fUnxQ5wUHHbEv1AHOnvBdvCya6M534/oe7LXKeON+\n0SXp3mlr9bBZMjAWlXcsdcSRc/iUmw3hB06b1LTNURyh7Im4zGjcEUkLrxoP\nChA8n5aFQdxXs4lPyZf8orff4gyVJ7XR6yZG/x/8PqtxuVEY/y+Tih9Ff6bj\n4idaYVX4fR7edWSjSyQMj/a7EfSFRb9hN8Q+NjC5kmMB3cQBAywd7Wo5Wstd\n7Cic\r\n=Ujyt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVW1KGKhxvsdYbcjNTJm8//g9RNU1QMJUZUbVqNNRp5QIgdn9phvNtdxgWA/WLDARQUJKODxMZ86D2AkYDUKLJzjI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.4b717f65.0_1617300910766_0.9529409070737236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.c6870f20.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-icon-button":"0.21.0-canary.c6870f20.0","@material/mwc-ripple":"0.21.0-canary.c6870f20.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xXGRXabuOSu8cbpD6U+wquXTX0VREWKZ2oTwuWhOJDNS/FEp+CmWYN/B+cWuC77ZoDJlTngKoKF3cR0+mSjqIg==","shasum":"547a14b1352abcad7256aed29150b886fd10417b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.c6870f20.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpuCRA9TVsSAnZWagAAAq0P/0k2kuWMF5HyvsgCproy\ntjLd1m7gVf3QoV8wrV+Q5IYjNKPLKraRMDHww2QcduocZUUmmVRBPQw9X1hT\nhMMcIYNWvkCMMxZiDtmdmsMXLkQo1hA2l8k7fAIWE0WEPP7Wie5KXpAZ14+4\n0NL5jZK5XEpHLydzZ28Bik5A09om5YG82ozWQYO4fLorAm8xcIwRl8bMh88d\n4qVv4VE747qf6zXPwWqobbb+PabQkG2RsWqYsnB68fa8MqjXKQk4FjPqDcwl\nNxdjakVnSst9dq4CU/IQkU1D7qugvuJi9N43muY/AKlqt35jXkOVisXFaUtP\n77FIetsIk7tpRzREFnLYbVRwltrVyTqiKD4G4FA/gd5z2uy+jDkuAnHMfjRe\nR8594Yg3awXCKqptdbCkkT86Ra3SNjSpQg6s5OOgzJJ7d5LzJI0tM6Zfs7d+\ndIe/vE56OSf2xVlIE9kGsZFJuPksvsu9JCHcWhkmR4+V9VqkaOi2IsUdH4hn\n92KRaN7YM1goyhU4gz8oj2GmHe759CDzPNANUUA9NIqW0Qat/Q7YPEhCf1p+\njB8vSwhl6fV8bSlO9v25OWS9mGN9Zl7O0dyHKKM4YhMtk+SOpR/swbrg09jP\nQEqsz6J0sIv8hOB8+kCe/t+YEyTQhK9yNaRsBhUKYT01dw4Yepgbn9JsNsIK\nnxot\r\n=wpSi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2N2S3OeCFDEuAQofGU941XjG3DInIy9gmw92fQ/daQAiAzdj7eXqKgpR1sbfdLVE+F0TeyMGxTqNcJ3aIjr4doCQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.c6870f20.0_1617320558363_0.2423989558058035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.852f873c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-icon-button":"0.21.0-canary.852f873c.0","@material/mwc-ripple":"0.21.0-canary.852f873c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tDvA0ZABXX76ABEdVV2+0KnBpiiI6hZt07McN6FeCBFKzdvUyEYap1GULEd1l3hT03ekndLdFydAjzdNGAdjfw==","shasum":"b44b8037bab8efc9789413592d8cce43d20e3565","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.852f873c.0.tgz","fileCount":9,"unpackedSize":41098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqogCRA9TVsSAnZWagAAJc0P/jcD2t49871vpSEHqNfX\nuAkJfjet+L7AuXBMVHhy4sE5VyY1zPW0+uVZgV3b1W9BNCf/YinGfA7RlrWH\nv7/j0XtSyv33QCRf9Iei5hVLqtReHT5Y0kQWjSRqFkV5n2VZkRQ+iOG30wko\nOqU+EKim+h6gFcFd15b65HNjocWRWcLFM80WXcmihg9MSm0drP0Ocgrf/jfc\n42100EBSHcpVBjOANiCaJl8n9X2uqCKDxPfzt2n4OsJ595JzJixNgXWRQBNU\neOTUs0wSfXCmgn3vypMT7Ppy8QMtov7Nd1mX0UoGFv9W4MpzOitw801tud0n\n5r0+l8ftnkHoUiRC/9yZ4SdBteKeauFs47T++ONxkC4CqUAB0qW55EeN2PwT\nwPw23xfDSxuAQjcsToOpWFpOSdJYWmILxARBMpXPXcNGkeOE5wANo335XdxW\nmacQRT9gvhRHS7PwjtQtsK/6ulVkXkqTelxJ2ZMz23BYIO5SjxdiWmL2XSQw\nlwLrX4Jif1fNU+sIdiSiz+m5Oy9MdbfgJxbeX6ggvn3PpN5hiyewU29xykja\nazmmIej0QzQfLIXKuLdjqGfOuM+HqvQ64J5N3Dsm1fMmrtFqsu6iA2UWDUAr\nzGob6UuOFlAOFSXh8+KavTkZkoo6gTuJo7FOp7Sy1AnC++/BfW4dXwNjVK0c\n3cii\r\n=I3Bn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXqil66eAMVze/+nhWRDHQZYuP2on3oDHuXlx7emgcoQIhAIUKHZm8SsIA0mYwKP6udvZPp5iIMWngCPPquYPG/Izh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.852f873c.0_1617340960529_0.24616998967923043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.4a674a1d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-icon-button":"0.21.0-canary.4a674a1d.0","@material/mwc-ripple":"0.21.0-canary.4a674a1d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HNj8WUZNISiAlsmwoW32XamypdAZQYYjIeL2h5DGQ4fGfoq9wJ+XGbx7QbWthDRNYMlMOVNs9HaaHsgRG4/Kng==","shasum":"fc64f50a23d746e42da6789d96159ccf107c62bc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.4a674a1d.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3kCRA9TVsSAnZWagAA+GgP/RnGcJkPn24Zql975GKl\nfPJcmWLZqiEBwUkIcp1sWM0+LfNaoqHtQfjhAz3dUn4MVbVjlXvObD6dwsAZ\nDt/Za6lfeIkY0AonYbZcTSxY2dVVuISm6K2eZHdTb7rNhJtGaKAj8pZUfpJC\ndNkp5GUm5rHGdHQj2H34R3Ma7nL8cD6Df3SjtnS01wPwisBsQNV/EOGeWUIJ\nDAZpvxtuc4527ISuAVJNeBKWV2U1Q8vrKu5rbRRF0qpiWmEZizTt8AUKlmQW\nDgXQWikoszPXzNVaLbZMCAwY1g19PP+oTYVNvACqXSh48vi7yRZvinV6Qjmh\nHBE1VSMmQ8xRAffK8Pp8BI7xn+oKcvV2Nntv4U/nPHWwWVuWp0Wp9zsOSZhn\nGfEu+yPeA23gP9yXkbhLgaE+koaYxbi9I1lpxZ0xoVW5v8I/TIqvwZsW91c0\nLtNwKRVr5JJOzKhX91JNwyGcBe6otyHEqQDOjtyl8qGfRvKmMZ7bt3usmFR0\n35gWqVcVZMWHdQb6Wc2rPGbicBDkYahTNts5t1fPIgix0PX08h28jjQmRjtz\nhAjIBxBhLhrS7cWNrOwF2yCFD1l6+iM5EqsIR2crPlb39QgSvEfpCdMWzZNS\nZPM7xmMqLEjao13eWzPsVJD1YoghdCuFwntFbr+r2VO4BtxhpHIyAyiRQbtl\nbFG1\r\n=0qbn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqks7ajFdR/DzUzji6xcqoSFs7SYW9fbeWAi7sSN2sqwIgRfIo3DnX+rj8oar0aTxjEZJJILZxx+zPlKx64A2u9Fo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.4a674a1d.0_1617374692114_0.39367039521213765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-icon-button":"0.21.0-canary.c5b29ff1.0","@material/mwc-ripple":"0.21.0-canary.c5b29ff1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hNp6IQjye4rq43HdBZB/+pTJyO4sm5PQvmu+6Lh+Iq9As3qCy7QVOBw71uty1xt2nBVHQuMa8q2CFLz7wvi4Gg==","shasum":"29c6acb09061e13c176c66ae6052681cb9c0153e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.c5b29ff1.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03rCRA9TVsSAnZWagAAz1UP/1/S1pL1sFVYt+XrvqZf\nWCTskojdrKQd3tYk0lHd1DhpMXXL71M+f3uNczhwpsHALdoDqbi6ZGOp+bjK\nTZ1tOtcEKjrx9IgMF+ejcYOHIPhdgZDzef9cePHyZ5+R4Tivd9GVyYuNJYUO\niHPJdkrxgNqqU34cWNNHauhyzBrhEyyCm3iuWOFdoYjXTJIPPLHBPccTq5hA\npHaP1Izv3tn4QHXLwe2Aim5f8wuPwRi/PWeBomlWyOQKX8xNUWDBHmfPVI0J\nVSOOkqYKIVQjXUWHi7yJWX+bTc3YfM1euLDuGf4U+H0tFlfSIHjxhG/4xrcY\n57VQChphiZ4MnreDhp5bLBkJvKwOkmkY1+SOwi9PmxEV1pItp0EbwfNy2ftW\nnOo0VRcLDpQso3uoS6diledCCACGsnXbjT8afCOHR0V07cpN2IsnZcA+QOUm\nijjf3SMQXhljc1hDQZ8rHokl7jFACWB+Y7HfnI1haeS5imCk/upTamsnrPln\n0thc4ZXsDJpOxLl0VMFuWM044J4HNfZhuroDhQ40mUEP8+/cI4Rhug+mWlCh\nE2mYrv7EMcWTSPBtvld3+9tI4KV6K614kJCl/Z6eDoRSx2nh1QG625Hdr9gL\nRG72YvKfxi1J41Jc6Vt9dMI7IOYpMOEYIzCVIgQIdYVzRkOTrjqIbXfPBf1K\nFFK9\r\n=fEvz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLKp6LzoRnP99f3XZ/hEEF/TITa3+8FmXGlys8EVKxpgIhAPEWa2fLH4eoQml/DOy1JM5AXtg1NyyQZs2euUwDwCj1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.c5b29ff1.0_1617645035110_0.7302830404506044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.583644a6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-icon-button":"0.21.0-canary.583644a6.0","@material/mwc-ripple":"0.21.0-canary.583644a6.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yJbpYNuP+TzELC1up31twv4yNs2OhM2+K/AQdIP3kkLOnEqdFsCHt5RIo8wcINCXq/AHlO19iER23QKLhcH6VQ==","shasum":"a86adfb01fe47b8a786475ec097daf542269445b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.583644a6.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04mCRA9TVsSAnZWagAAhdEP/1giMvbj4E9CF7tH3I58\nxqMWwd+bwJdNbL3wXvcwxR1MItheMluqr0qUm7bD2XrZFFMfKQSN3DYp/D+X\nV6/wToxr/8Q/DPGUlm7UD6OOmzKUQKYEWhZfouUM4GHC1L7HqnWNEP1Mo7tb\nmMCIS5yEoc8lI4+v6blZb5bI6oIu3CZV+RjvAZjGRf4cQbX7UNdSAq9IU0Sy\nJH8fNTCSMnnVAYSjFazLgP5Xwe2mVSk3pyo2Gt8nGqstZTFRJ5l1J7tQiSnq\n/5tD2LklOeQfsY1FZ+0aAMiYfl3mtkmyyhUBLSCWIBZVgfNKkRb3rsAn6euE\nTa1v+ijNlO5ib90IBhrceucsYrU/c1srapDfPGg47z2PoGtPAg0CiZdVz83N\nxn3uFRQXKmXMU15A5n+8oWeXwCHQG6W98D5R65844blksrDBBNTdPUL3cWSQ\nbizvtVIY/wmXpuk6bXn2jl5+gZB2nl8WyLYX3g6yAokKozyq08pt4p9Zcya3\nLLD/mkvhPD5emmBqv8+L2upKe4tYpY8MP4JWRYElYO/Fb/4t6/72oYYTL3J/\nyBeNc+odp+uZJaPsYg0oVxI55MaLYZIZcHS8Q0sckoOYqez0InE9Cpvngttd\n6DjPvUW0sDM/DYJYXlTZE6mSJooxriP8kbO8eZk5I5/x0ytYZ5nnVe0e0BXF\nulZj\r\n=CEup\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDox4v2jcYFZA4o7JxduUpc0S5u4s6kGDrjZFm8hn7N6QIhAM1uvVHMIfwfj4e7Ck6iK2f05DqLj2LA1K8RHB0r2rWO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.583644a6.0_1617645093980_0.5515755875645407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-icon-button":"0.21.0-canary.02ac1e6b.0","@material/mwc-ripple":"0.21.0-canary.02ac1e6b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-I+IHNHIywy8Yqf1R3/VNBzqlePFxXUeHzkgyOLEojKjDlrmGKhLDz+Z9dKsWlcmIyFGQj8EOKMtwML0cH5B3Kg==","shasum":"f05a986825b6c422fa109f07e034475e0b5ab991","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.02ac1e6b.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKpKCRA9TVsSAnZWagAAsGgQAJRiS11s/2aN/Hgh3fsW\nuGfTSP+UUYhR0TA4XBy/CV0l5E9QePrvzAy58mRTNOkZltk9gLpuoS9uPmwI\nyYPiwBNhYqNLyt4XfAV6/Hv03UigR5qW8sxHYCo401cDnszehg1rq177JHXE\nVOWHbsbw/NLVNZfa8B5bZiWCwTAjFUfCTbP+CvNTPejDhddcM4bYZqHBFWWM\nT2AXTEzCyMr53AlEgB0inBg0HHt/gGCYGQ9c+sA4ghVom955hNZH7LywynJN\nZZmakDohMBJDXikwhJkkiN3lgbbpGWoCqmTDO+eU+WotCarpRsYMfUJ2qDFD\nXzuYy+tcSABzeOUVJNa6Y4JZmWjpVUoxBtuV1VhJNIqk6jWOMOIhGctOgK0t\nlFszDzLXYU8Be6S1A6rIdQG1qc/kYYb27ndhU7ZNjE65AOSSFcZ8zwQJO4IS\n/uibUDgKvHgru7U9jiIteQA8ULKaZGgeyPkEdB2Syfmrns+vRhtQCzWyFMiL\n2BTbpCj6ABmWFO+chhZp9g9lczEtjY0zGIjGbgpx1gPK+XArzmhNfs23NgMq\n468x7Xs5a7nMRTLyriRAhFB3VJLQQMCMW6W28Nda55txAvoeuFut7uKxU8W/\ntr96A7mkO840KxEbFOllvcW4FF+nyIaM4DuC0Pk2RidOGcJZCwMcJeYQ+/UF\no8hJ\r\n=oIFW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaP1neXUcj2AXdRW9OuJwhjTKDHmWQSQu3Gj0rlE4eDgIhALB28lZbYsQvzXOHdljNbW+dpcxeX4Gwvv5yBW14Mk2Y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.02ac1e6b.0_1617734217757_0.864274406374179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.5ac5856e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-icon-button":"0.21.0-canary.5ac5856e.0","@material/mwc-ripple":"0.21.0-canary.5ac5856e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2LKsiagIIEVCXO8m/mYfLg7vOF1+chBrjeVo/MEur+tsn3UXUHR+A3Z8gqoHx46od7Gs47Xn12vohMnUQuJUjg==","shasum":"26ef4ac04b2ab89de25a7fa4161a3c97a84cf034","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.5ac5856e.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKvKCRA9TVsSAnZWagAAyOIP/2wOmN/Lf8PVIEj6sP1i\nQZVopwEmNqQQauh0rFEeYTgxl+4y4vCgB7EXoJkBjNjxCCEX26g+G2gpGl3L\n670U1sT+YE3Ogn/pc+l/jo+pEoPLoouI4iZFRZ1bPPiTyicnoJO21K/MBU+h\nHbC7TrzE6Qur+4u0W9mHKSPOb18xIi/td0y7QiCM8JRutKR6TyYtgLLch6uF\nID9TwF/augiROF65EYlnQ0CiAR6FefOF27vdlLqaeOI/W3WzABvgfctRSJ1j\nUBLacaagcEAoI9NQS7VrXYvZL/iBJ1sdnLaO8/LnrAPajSR3+I+hc9Rt3T3S\nkx9UuBYz/NP5rZZh4EBEvwtVR0RZvvH6z9H13PLmbc44B9EZ54DM0F1w9zVH\nUo4lUSjuk4NKz6zbtzhVusumUg/ATEHhr9VA8o9BaRUQ7XIWV3qs2ANbhjX9\nv5BOdpS9y8mxLY8Qqa3wfTLu9VmgiYxUfO8VnXRbZFiwGfr2SepgUlu8rQgh\nb6H9r33ovx+TgRM2iamQd3rUBUHLXCuMEcAwsRpH72UYENXTrDkAFICgOLmd\nvYDMU0koI6eys7GHL+sh9PQNFhCIkWYt5ISuY5QnYqN2wislWTDzzcLDCV/I\n8m8PVQllkl6PxuL9bdJN2p3OicYIF3gxWDcB/agewd0wLbGs9N+a75ZqP8e0\nFoQh\r\n=PUVL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0W8Qy+dBUjqGJp8aY3e8U42LO5fTrVJSFPcshjNaQhAiEA9OzKCRSBmZr6Ox4QYsbXgk6XHYo4sdlEbJ5BNIx7HCQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.5ac5856e.0_1617734602067_0.48353923215652794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-icon-button":"0.21.0-canary.bb23dbc4.0","@material/mwc-ripple":"0.21.0-canary.bb23dbc4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-N5XFg2EKoJf+Yw63w3usXTdjMdTa00QcJOe6si78bxmjs8SI1xN/HDxS/FSNqQ55PRW9W3V/ICtIp9kJ3M9r9Q==","shasum":"8baf3eaab1a411ec6826b48c10df087adcc02827","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.bb23dbc4.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiMJCRA9TVsSAnZWagAAShcQAJAmz+trRzK+ARrJkRX5\nMMEyrfUY+Gy96/DT0JXyuBjCwuzda7QSPfRI9AOi0hH21ADzqQWzqc+8AG3o\n9rP2cpaICWIbE+UYy1/2tRWbvKTI6efeIbAgsPsaVzCC++vQyFC1PmPjcYxF\n8PDo9lDMS84jSdQJ/DHgeyh3vkXkwOl1IjmrMWGyrSfJuFv1HYuI20zFej7L\nhKSmgmWwwbH7gTSpJ7NWcDPL+3u81BSoINI7dfNWphpgdyDUTnUZd5qR7GGz\nFy/GW0C1UGnTYk8masW8PwrKlsVxlImoVs/l4UQoR9tlXsoPx+Ex3f5SKRZ3\nuKcf2XnLgx68jRHSaSIH46W8g+eOcqrhlYpDZ9/cJWvo05uEeG5fnhMyNdJD\nWGvG+p3vJslLdbexOSwY0ZTaNqkFmzPBpzgrfLLG/HarH1gvFkgcYiH4i2UC\nnehcp1GwTn3v3PKYmxqk39No5SwzmM8yu26TaCIYgzfYkUObJB7hRXLYavKl\nT7Wi3Z4biFWUy04q7HoxeG4abMqDigarBlmOZkk66s03Wy3vEYIxDK6EYXuG\nBlu/vUGcO0o9hneutaHF+E1jDGaOozj4g30A+NuBsDA+cB1ximUK1rbzH1Xq\n+98fv/tu9pRKTsJwE3F5srduUer2pNzVpRX7QjU+97rPrrG43cK9ZQdQA5IM\nVg+b\r\n=cPGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa/lB+ghYw6+msi/JANWNoVwIrU7gMZssyztY7ZYZg1AIgHH84Yw3Su2YnR78Rijc0FobJaALiy9tTVC9PgUMAGO8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.bb23dbc4.0_1617830664781_0.6447088364582441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.e539904c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-icon-button":"0.21.0-canary.e539904c.0","@material/mwc-ripple":"0.21.0-canary.e539904c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-eQzaTmrOGeUb0HDg0BnSokn7dWbMsgUaQKUAsWlNRPpi8RAhCQFxwfTHxGyTGVWTTuzOb8ia4UIT1/tprnH9Sw==","shasum":"8d652c58acf0bfe10f1d84620fd2f4316c293af3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.e539904c.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0U0CRA9TVsSAnZWagAAKeIQAJYlXHQQhfsFOsOAedsI\n0y740Oark9zEZJMm3h+OOWWJwNByPAKm7AWgYfY16h32TlP3zUBdW12jJvHo\n1L77ZHHeCZOY++orx+y/QAy6Bt+m3+FKUZuUupeYKUrl1IM8K8j4oChRsbzf\nsSd1sS8C2yfOT3GmX4lpwMZ0pzvBR6MOPDtp6ZWIOmnDU37J7k8qgjp2LLdK\nhpwh1j7pMchSVNFTK55bkFK99szfLMErG2INfULy5KMFqTMBZ+mz/DPWpUsG\nMTQh7gGU62IDXNfezy7J7PeY01fJIPNboLPifXnCq+bpBw8Cw7bKnBDaQnBk\nSZdLoxpWP9/eFquwMAOZUYConW/fyexz91ZnXtDr+HiEAS4gG+pyffXzWV9U\nrUhjQl5KRXvbVU1v1MIGmYTlP2tXizhEs+hMai8eEDH2fp+aUjw6ZgwJxiWa\n9W2njTobR/6Ejl4Yo6KcW5V7GsmjB8MtD7blVGfI/Q5Qwt8OPxuItAqmWa9R\nDg0nSXXS3Vgt/c7Wfl9EloecZnPzGVXu392ZxFdMDud8/+wcm7lhNOfAPyIV\nGovThFV1ijEgzP9B9OxY6tNHIyRaEyDMucC+pKiZ3PisdK4rxkvfCaV2YYFt\n1Nl91XNi4+uDa0rYUeXLw1qcOT1Ptc3+COq6NCywQk6tuD3yJju+TKZc298p\nbC69\r\n=VVvr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB37c0PvaUz6G1l+s6MStgAxwsGOdOMNU3m7xdjwyieaAiEA9Sd9YG6zJwLAL93M4XF/SzF2dYC0YNBDesEyqTUD04Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.e539904c.0_1617904948229_0.9271498718939175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.a93ae333.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/icon-button":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-icon-button":"0.21.0-canary.a93ae333.0","@material/mwc-ripple":"0.21.0-canary.a93ae333.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCIconButtonToggle:change` | `{isOn: boolean}` | Indicates the button has toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cHmW/YhXykDQ8rVWYkt9oNADUKC43KlvwRKFWKgDCs5cwaZHuezZOilan6AP3JdK9Hb1wLWyo4r+rwlrIBcBVA==","shasum":"7f39e026d3d191e95b50a2f29c5ab162c5d495b4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.a93ae333.0.tgz","fileCount":9,"unpackedSize":41625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUYCRA9TVsSAnZWagAASTcP/RE9C+8WelR/jSoBc8p5\nus7ipHVXAYO53UW6LDH30eGgoxZA+1nUyuyLGQ+pP1clKshHYDdyA5co2Xor\no1Zk5YoLiS8Ld3QtoSG1G295R6pQO+aDN9VFesksUjGNxCvZEGNyx75hjnl2\n4HI7hrcbr5gV9VP/yyx3Av8VwJDGhpPJHOoOaT4uyHaouACvMAirhJhrfuDS\nTL3s2uFxJ4ad/33kPfI3/PJEved6jh21wV7QoN0jBaC/8hDDufeusLKwm2mI\nIzS9hCI1d+XfSK+BGzWyjNaU7pysa6YIc7uBZFVErQA+1EKKVg1eCIjR0nTo\n3e+jQBWheTP3HN0NbAROGP/U2WwPwrtSfzkw/s68VaX+Rrx15RH4RLzzqzrY\nql7qMaJ8Bm6FpTcIjIigOMXlrHHxBCwzPvhckd5YZtTvExlokAYv8V8S5BWj\nFpPe9tY98AnDUgaMIsuwZ5s/3ZUhjnWP3ealWC+umNf5VckskD7R+KFIUXe1\nx5xSdZ0H7QPMN+bpRENm7JRIPhixSkZ8DZmBqmVzhb3FRHLodXZ2K9POGB0p\n7lXlyKwdxhTXQATJ68OLMVeKm6JKjiuoWhx4zINhwMsnQPqNv3GXEAxLsqYG\n8WkfUrxbzAar+4Zk1BUpXGT9AcofdFmF9RP7ozDGhHXxWRMEIuSdltxmCF+n\nGpmc\r\n=NNM0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0cwJjQrbODT7uA2DURZiupbBqXcvTSof2xam/fp/9oAiEAmXroNLGoWlsNcfQ6caZXS2YMsbNbbWi8gNbPolvvbnw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.a93ae333.0_1617999127871_0.14287883228047882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.e142c144.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-icon-button":"0.21.0-canary.e142c144.0","@material/mwc-ripple":"0.21.0-canary.e142c144.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### Customize Colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `label` | `string` | `''` | Accessible label for the button, sets `aria-label`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0UF1q/kF1FdBtaVZBsjUB9QB5batEuzhXSW98SH7e6TVRCgvHcT0O9+nRoNuugitkYPs+uG4vFn4r9OEuPuOtQ==","shasum":"a5ba7edbd25c1b634cbfa2264728dddb25919308","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.e142c144.0.tgz","fileCount":9,"unpackedSize":39396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5fCRA9TVsSAnZWagAAcMsP/Ak1/vHTZgm9F+lDE/2K\nyxeX+xQKHc2lcfexHVyr6HoBATtUg3wz55nT/JIh0tUJU0aewFcHyrj2svK5\nwHnVhuGPefJA6BlWbHuplTzvUocF961hZZPE9FlTng1Dy/4/4NjGv7dTZTpf\n+ORCpQEHs9CfRBGaL/hFtWgOhkLdqG0ltW4hLIQk5wbL6NJ/pkwjX4uMAoRO\nOGUbTf3o859T7RIdfIuVsZ3YA2SXH0PEh32XYnEk9AWcxt+DkbCNb0yRDTti\nAKJ3fvy29b8cvO8h35T6HeotMPnOIbSrib/iJyin/SN5Gy2nwsU1WF5uihDP\nS3HGkwKkLtKcPY6lh5ZQf2OyC6+7rVK5qnZz2gmDskOmYhBtveg0afFw0o0l\ni08ZlGWpBaQ7Egmf7R+PQ6+ZqkeGtFx8gu6mQLggZA4GI/TRwlZV5gzTN79H\ndVgLCUxa5umeUEXwMqLlkSckF0xci4Ga3fFtP1axkNmUCySRpFKQr4AlAURF\nJFNGVUHpLITTy5Itn/uE4QZHal81MHNBoOePlXX4zyC7yk06OdNox0xHRy95\nO+/slZdTQmJyyFgQLawzYEcaT6NnqOHlmzxUHUvEidXgU84AaxfHsar+SAXt\nUrv0zscOpqzv5wN6HvzXKTatis7s9RXB37Kwh3doDChBPrLfR1YeeOQuuEAL\noqgP\r\n=K5nL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDogPOuBZX1twjCzX/1XLyPdabYg0ng99mOiE5SVVTrGwIhANvhCBJHrvuLUDPqtGvgWzaN9DOhlhsrtTWbtvDz7DGl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.e142c144.0_1618239071518_0.34589185018328306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.382d7eb0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-icon-button":"0.21.0-canary.382d7eb0.0","@material/mwc-ripple":"0.21.0-canary.382d7eb0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Od9VugOvF2QYxsRnRwhxyo0dhU8EvZ4VtkrgECiQaEBgJ7xnFSIzc/7lnIVh9fNl+KnBAllJs4IXJyCGGldnvA==","shasum":"7a28581e4ef14731a7fadd7c73622b72a4b6f724","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.382d7eb0.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMRKCRA9TVsSAnZWagAAi6MP/0Aygq1gIR6BxmdZSZuN\nlLDDqcXKclSBql/gCPm5ltyjzt2LPZsMXlXeOkgzp2dZ5vPBN44dHZrFyNtV\nVBg7vynGxSC+XAxqGs7i6goDs3prp4WrVJ9j2t+FB7w8jK9yvbdwnFL5GEzu\nsIA0NAOWiv3ouhjMyv2FJ73BmDvV9YCZb6WChflhYYKr+a+YpzR2U6lpaWQ3\nbYGtO3kcv1jVqGXnJtpT4A8rq+Co/Z4uaAp1hYnugWxxdLj1NcRa17yQE6pB\n7Cc+nNWwpxXtcGb2T0ZuWdB5e6SSb2J1AY98krquwyfwQJUvzo9pnIveZuuT\n8+5bV1DB7unmUXf9aTdGYqagPupEto0oWFaQbLy/TV9hSWHuaSFNlgYYzE9e\nY8zfPb/SlwbMr6bS2o6J7T5pxAeAQSE2NMJEBtN4xARjt2rnBqxtDwou7x/a\nhWmSaHZBmmzDm5bX2Vb4z3UsqqdmCzxzF7YRR2navM+83mdHk+nqitP+og/M\nVEuPzmvKNWQr3nYHEA0m0CDX2ROWr1EandhxhpOQvmC/m7Wwwfts6dpnY6jQ\nZTUi1dehcmfwB1UDBCeOz0ALsL86S78UzxX3yn/aPnhSFdcUeqiU6GSy7Bl+\ne1O/E0e4no78eFraPR5ZepdD6vbQoe27l9nsj7EEu64Sg2PAC+T2m0P5zYz7\nMEG8\r\n=RNs1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB57uTR7P5LqNxeumCbTiK8uSMhQ0j0vRydgyldO4knUAiAghjQaMca00RE9KvfmrViOPLJqz9GsQS5HctK8yz3JJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.382d7eb0.0_1618265161995_0.9960729699784234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.b16c7885.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-icon-button":"0.21.0-canary.b16c7885.0","@material/mwc-ripple":"0.21.0-canary.b16c7885.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JUA/8yrzyxJGlwRZNf2h2vQmbfeQPWZj0XS1AA1OBNaHe1wn6CbE387WCNnrtpRNc2Y3wG3hGaKdVh8ROt/SZQ==","shasum":"63e29e9cd1e10eecefa39e95cc3386cda3585e93","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.b16c7885.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwpCRA9TVsSAnZWagAAKJMP+wfbLaBSDNQnT8ZjhuYC\nhx7Krp/zFCX8stjOZQrzhTrTAlA8Yx5KdjDP3SCk4Pu9VIw7PWyGgXvJope2\nWgOj3PnY/1obcB6ECbsRF2D4x4k15cWUExZZ+MO51l777DEeZXSlRRhHK4z8\ne+tevMmeDCHfoIZFYKu61QvV4b9LJ+4QBx/oQ2HtXL+fuHnQahagTu5Izavx\n80jy5FwMV5lJW851vgrqxiWypSq5V8tuIIHjZlUTQINuLPOhdHIiltHNwWw/\nJ/0Uf5366RNaZJHQcKHJjcW7iC4uODLf27D0zDEcTWiYLP1CXefV9d0nKdEp\n9kxvWUNpt6kNW2BVMN2dqhI0iphOPmZ1GArrlpU8xqbaZt4ulo057ETCY6r4\nc+q4LthySrjLLTEf7W4khLJWALefymw7jwp9ghMADkicOW6aOvScJFo7MzDE\n3rfcgVG7dzLZaewa1TGal7G8Ug6ilJlBlb8opnckRjE0q35dmqPtmaABRjIG\n+AIQ9YH2mrXLBIoFaEUif0tC5TFnq+7RXKuRTSGSyuDcQMQZXbrbmkucWR9m\nPQpqo/wVXSUu+ytr4rl7xm/HAMgKtLwzc4uusiN8r/x1/6ooFC74xA9DsnU+\nAJI/ecog0IMjbRjHbUurrzS4LhfSJMNRMpRWwvYg4aRQ13vCMpjZACgAqyqC\nsPaf\r\n=NNZE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvnlIFbgQSC7d63qJjvSy6ZENL9K0MuPtnXc9/FqFnWAiAbcch2BVFPdYBR+Fn1E/O+ckwh6LwtC2D8kHz3dkK+Eg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.b16c7885.0_1618267176682_0.387579600287846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0e92782b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-icon-button":"0.21.0-canary.0e92782b.0","@material/mwc-ripple":"0.21.0-canary.0e92782b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/Bur6A25ZXlNTKFNHtqHhNBdc1TDgNrQC/ISlJf3SK87ZG2QPWevIumIRwaATY3s9CsHX/AHOGT8wvVvPwPbBA==","shasum":"de1a128ddba25f2ad08097a5d8ed923c3c5481ed","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0e92782b.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3RCRA9TVsSAnZWagAAesEP/RtHq35gMhySHdyFRraa\nrZwnM0Ohr36LSV90qUn8DGbsqK6Xay4b4ICvmq9qqVNkPFaa1qFUqyTVaivo\nmPeXv6bG/GFQfU44rlS7eVP8g7soV6zfRvnUGtag9hXj93eqlIpe4jbfA1fo\nI45UBvvWzUzI/RMWNc0WaBPFC1ppz233XcWkzb2Ndr9OSX9VnWh2IIszde+l\nUMz9Ss9R4K8+dA6zQXt/5SZ7NJ+uLURiNWtJRUdyusvAGkay08nemeY3JUgk\n4yhZH7HIr4mjkN18eIhpzjbAcFo45lCnN1o+PuFvH7VgGx/ibIVZyAxBaQUn\nv74Q0fdnqt+2Ey9S3hOamBrJ74Y3qh38KGwpdyUFUDRATyjiXVLU2HpEooWH\nDio2d4LS5oxrpjqrPhFaylHIEYQ12N//S1XWCgWpsR2IseuOquz/8oDaPvjG\nec+svbMv6DG0f98cyoCxbuXiedQBcgfizclaCaYHqwqd5yWs5j6EFWyhqOPR\ntTiLowKBQswunwGTnjvezMj8vZ6mtQUpJlti9IYb8GC51Kw4oz8HQ5JAGgD4\nsGzRXf5CRerxADIGkUnWNyYCRZ/rUP/UQiq6RomZH6K/M73hYmxcplmV+ljg\nVIt33Zta5fuHqGJViyqTnfs7IHLHkmgrStKskoNkQOaiHJ7F04HclhVlqgJc\n/0gW\r\n=9ANJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiTI2KbYbCylOtgE5xryJViTfbZYfS3B+v/WQROfp4hwIhAJwL8lDvvdjp8sQSPjIwR01e22QqHWPpdNkei2bwSlrK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0e92782b.0_1618324944602_0.16837401936293395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.70b3a072.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-icon-button":"0.21.0-canary.70b3a072.0","@material/mwc-ripple":"0.21.0-canary.70b3a072.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OEE9l8XTKahuzu01ZrXPOJyb9go9JDYO2FdPKhnJOLDaxJ8EFkVAHJJrfC4jAdZ2E3r/q7TmExIunfUJON5xcA==","shasum":"457f98ca36d0d0bc2bb54d3cec1c67716cf40edc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.70b3a072.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wkCRA9TVsSAnZWagAAklQP/iQMIOSy3i4xMi7dCNxg\njewVJXKuYAZTH8vfo7WtL4OUCKb6JJvP17VFj37m1G9MH1spDs5ZGxvCejN1\nRd4bw7X1BKgh7Jr9Z6Yf7d9UbAoQU/1S88Bc8ThxiqiNzvDPoziby11ksPCA\nrAYNXGCHrWJp4dUVFK8okag90X15SMX/5H245Panvztosv1nGNobIUl5hEh3\nH4WnXgZynbtqYJVB24zWbZuOj7w4m44+jgNKpAfkcNX3vcNjfdLFhoBnKByc\nz/oC3Uf1/sQxjfxTh/d+uEIP3h1KQY7PPi9SiG7s4jJRAXfb68bc5KcZR7w9\nBRfHHK21kN7obEPms5Yt5vq19XOKFRyCmchigJktDYPK9lMN/aQ3g9niyXQR\nHIHIoHen62rFjjMEp8sAGKsolDT/Qjd+MTecaw0o6lH62NCj91i5QN/SfiEy\nXUfv3hxKw91n1ffJ+Yrm8VKWpq0g2yXO7gxZ9T7oXiF0/3aEPjyCUS7vdmeh\nHoW1OJ5IR+lX4Z4R7V1V1tuXYP0A2FXuNoGCwUshbuO9Ud7V+WVw+Dls141t\nF9myZXR4I56EPbto01cJJtGQpBLdWKOwdQCRHh30HpvsXm7DitaTfw7be6Ea\n4pRegSV6Y0XDHhumWmPNNIlmEE0yKPur2QXAZObw976bz0pqhGcImFv6wuhN\n5Niv\r\n=cBxk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDFTaTGoAJyA/8YxUvYiPnC59S4dZ80NE/h8yi4RukqQIgWEV5V5FeWIXfLCLQHECFgzXmI6j0cN7cLjUvAoM1X44="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.70b3a072.0_1618439204299_0.9762001608075668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.ff79b092.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-icon-button":"0.21.0-canary.ff79b092.0","@material/mwc-ripple":"0.21.0-canary.ff79b092.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3Hx6n94Ku/KRTBHdnI5ICsBNEQNMiWPbr7Wlwes0MUF+KX0SleCNV9WVki0qxs5LXsR/NTOqimqaGFFh0lIz/w==","shasum":"1313b98463c7515be6e214c304f31eab69e657a3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.ff79b092.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI1MCRA9TVsSAnZWagAA02kP/jfXWJK0oOFOLiF8Vodp\nyB22/zt+iIbNtP0GKLjDkDc6EiuqBaDy9tut2HZ4JeKCQQQmttiMEbVRMEts\nuguW1HngTefqg64J5iwVqbMRXzZUz7/FW43qq4XvQR2WEK3tL/VbJ4uENwOs\nzV6Vvdg9YcIQSeAK5YtbwCG4n2x4lLkv/WToambgsCFiTZnbb5Ske54Kv/Ih\nnMJI4BC3XE8LO1elLQgpwz5o4dTsXJrjdNNzVPkLzY1YRKfthUc9ZBKFvzHp\nTwY8MIc0yHB+KJopmRiLl1HKd9SKgxvkdwe4V/p6bl5UaluqmoxFNp6/oC8R\ntCOn0MK4OsxjzPtnxuAvBYMiiOnBiWkrr/9wweJAiVbVnIUIXO70ckxretJE\nUxvPesjBe+uBxlgTKAyYHUnQg9yXPpqOimGPY760vMNkYuiIO2uP9FExG1CH\nt/plJDdCqBn1ZLFarvD2St8Z7gGfNyt8ZXcBYw0wwR09K1c1ESBE4zoCMHvf\n+Rj/sdpS1SeMakv0uvbC9NoXs9LiD7YovSxg2XgtXXH7PGmy79Y2T+yTEUvs\nYtHuHQvyU3EfHFZU9QjFMdTEgP6yb8yjplrE5Con9PODvPgZdmiGat4rRc1w\nqyXjLbGr5hYfU3i6+boIM9H6ikBNyiq0iMUhTI7NTUADhXJyC8omXA/sT2TF\natQ1\r\n=2nMF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH42IRz29OBXmeK3Vnrpje+PC9oYTP+t9uL2xesE82CMAiBkA4xWIjMVgv5z+92GQxruebUY4W1iujHjxlB37fa5BA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.ff79b092.0_1618513228369_0.7262137525998658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-icon-button":"0.21.0-canary.f35b2fd7.0","@material/mwc-ripple":"0.21.0-canary.f35b2fd7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TcHYXpks84o7qdpA42Pp8pP1yfNn4eQA7Q29o3hCaLorFgdFNuvKi5bDBHGUl+rgls0kPKmwy6pDMXnKq2e8EA==","shasum":"e38874b2b75ac9fb9b56e9289c8e4a726a7b682c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.f35b2fd7.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+6CRA9TVsSAnZWagAAv7EQAIyNFyNPiGxmfV5qG55t\nAlTIrU+2v4OttVpazP3DaWpvAjGGjyW3+eDB3jOGMzzfDX22f1+Q+18gqBVo\n4f2WlCGyPBsdUDU/avrBt8e1JIqD80kKeRWG6g5Td9J3SMV8b73ZN4nMpELa\nAB/cI6zbcyxiVg2y12YCkz3Jl66ga9oAf2xytrDHDNe5CUbuUpdDcrdtmCsq\nPrM8dcsVvoGBPAD27bipXxmhN5jf7KEbBJU+dcm0U87SMzp9Aep1SUcqMqQk\nChT78PjFZFCvdO0m4bv9e6y2QNVPxxj7meRikYCQMfrJZjYL6DwkUnb7NC+E\ngOcR/GqhINkRi9WELwwhji0iQl+05Xf1H0yV9nPWXJEQ+41UIpXDL1hPTgWr\nDr1F0eqHWpwOPdcj0quabO/sw3K5QKoB9SVuX1Z6AhuB6eclBAufWPYr+GJv\n94zZRQFxmyk3l+/r3N0YpyABwuDPwEFfdo8MaBZDrsNYJiV5uw0yLXGChO6c\nGP0f3S0VcIJTQciunALbct+DtmD6THaBXqsiBX+bB5Aaig6HL7V2W1+VaL3i\n0/f3joC1Z7wxvi/aE6NZ9KEa9d4hOMSdVRryTLE6Spz3TuxUYrfmoTpqnrqY\nX81SmyMAXkqNa0JsNF0G/kCbpfECnHl/Ugw4mF8644v3ELjNJyXNwA68C8yH\nnoNV\r\n=mPBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqv2B8UvMJL2cUP8SRLxRv1R3nh8aYlEORGh2xBFPLAgIgCGClfTOIUhAEVULJU8RH3CDULnU9R20iEMn2DbqqeS0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.f35b2fd7.0_1618513849634_0.7587923904248239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.11977cac.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-icon-button":"0.21.0-canary.11977cac.0","@material/mwc-ripple":"0.21.0-canary.11977cac.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IexxsdjWL9ZSa2Sy5xWkLNOQY/MsEm4P0t4d1wq4yREbXV36/yFDToFcM/wUrq03R9aLd/qf/oqRzkUhEQ64ig==","shasum":"1e78671f2a5f12f6e66c5441748ec683ccb93383","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.11977cac.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOE1CRA9TVsSAnZWagAAZRkP/jNHnJSpw+8CnktEpdXE\nLu4NRjxAJGSnJ1zGbdbZg65E92l1/597R9iDLxuundF5reORe0LyKHJWEvQY\n/M0A3c2CwieAPlzrUmEVeHGZ2fjeYesWK/XLYSDINzCLB4Zktvsm44CPrHhv\nqa/ZdkjHJ4okLAxPQoMgs4U4k1lOMThOvSGcZYShqgZ0matJydb+06dhq6+y\nmXaefSw6XqlPXyaY6JBjGzcCEwAd4wxIy7swCSFAX8ngYL1Li67ZdFeYoMgw\nXwf/YsjomnIk7XghddGOO7HbKEh+BkNpQ9Y3+j+hhLzhzMJRNH/1fjLwSTvX\nXm7ahNxXIgf3T/1IVXNG8b22WBQnKfnWa56vw8fi0eT5s6IBIlsvjV+TmkRk\nOm/HABm3ZyAjyyRd5vRxc1BaOwub1dFoM1zku0zbconAgLCEanfAB2rm+LQK\nNDe9q3vlBVHGnhTX7gpe0+oXDIj1GX07zC7AjGUV/tinUH/+5ZXJeEVnEFDE\nLUkh37NCDY6bYU325Ufhd7GkZvml+hbybOqCZS21mgHUYWVd+3q41U7o7D9K\nQLmcLwGoDv9iXDnXkTYlH/U7oylllJa/LySNDRyCuS1M4tVFJ+zhqD9iv3WR\ndb6RYCutFEq6oZp3aXDYa7YjlP/oDiKg1Y+61H9Jvsiv4Yzt9pYGYqc8O0H0\ntiH5\r\n=D2Lf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBN/WoLpZ42MVYF68veEcBRG+HuCgmvWNj3xTye3dobAiEA1I8+ZuE/PBQ5slpjcIXnmDB9b+C4EOCM98kRxtdmHXM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.11977cac.0_1618534709337_0.36808819977943985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.018ff45e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-icon-button":"0.21.0-canary.018ff45e.0","@material/mwc-ripple":"0.21.0-canary.018ff45e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties/attributes\n\n| Name | Type | Default | Description |\n| -------------- | --------- | ----------- | -------------------------------- |\n| `aria-label` | `string` | `''` | Accessible label for the button. |\n| `on` | `boolean` | `false` | Whether the toggle is activated. |\n| `onIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `true`. :\n| `offIcon` | `string` | `''` | Icon to display when `on` is |\n: : : : `false`. :\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be |\n: : : : interacted with and have no :\n: : : : visual interaction effect. :\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is true. If set, :\n: : : : `ariaLabelOff` must also be set. :\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when |\n: : : : `on` is false. If set, :\n: : : : `ariaLabelOn` must also be set. :\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description |\n| --------------------------- | ----------------- | ------------------------ |\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has |\n: : : been toggled. `isOn` :\n: : : indicates the `on` value :\n: : : of the toggle button. :\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YLrhY8U2AteLAWBg6h40BK2OKKQIxFJj3Nb2R4BuNyj/mWh7h+z4k06A/a1VAnhuGIBOArvoqWfyuQA1MkTruw==","shasum":"d68a5703509e55a05ab581d48592df76d252c4aa","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.018ff45e.0.tgz","fileCount":9,"unpackedSize":42300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf34CRA9TVsSAnZWagAAOsAP/3BJG+dnVyJBfn/7cjSm\n08bEcb/yqy8gweD38Pluofkewy3yDNTKsEWx/qW1JFshtxZjBZufF96iRENT\ngINNKy4Og0FfHK26NCvAxwfiu91tOtjl6jTwSPebOE97jRUFzlv0+5C+iBsv\nLmeUa/BepwXXLcGLTuu7MqOpWpUIDrgYUz24EAf0/CW0RNl//fKCktGltRyx\nhcslViEic0aj1JEXQSFILwxFXRyTIFAa17InPPje63BWT7vCj8RsnMVc590r\nAt3CTIrRxlsn6FQiM70CuBCxvaFCicQfreAGrwKdI7EInsizv+SoYkPn+VZQ\nmTpWLrjSaduLWhFhQ5L9dQLynhHI4QN3nCOINmK0f1R1PBDIBcUCsTtwEtSd\nF1GVmOQ9Ox4vshXWmpqowasdyM0N+cMHTLzkHIXDuh4HNnlOgUQh6N8WUdAP\nUy0DZ+l9rfGZ1rx65VIzRm3Aw7uLGBz7dH0LtvLYrq7BWBkKv1C33x1CiAy3\nA3Q76znsBR2UV5Prt699bPV2CVF4Lt9UdQ5AFAr7azXVbVkp3EhiRIAHq+dt\n1oYW0XlGHbGy2etI5cB3OOetCbkp/ZuXSGmvbqR/o4eHE/6+Nm72yGepU9oX\nVVOSyi+MRdmXEXQJbJe86lRGWXkeDkj/s326W0MSNkp0DpO/YINR7VxvC32o\nS/Pk\r\n=zO9q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYLEU/RmuY9w9RkwJFAvy7asMz/KY/mDCCMb3WEKCglwIhANoNV8q92h+cY/ULNSnxfr1zrCy9m7F+BcwseAz7Ipv1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.018ff45e.0_1619131895520_0.3702927347050997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-icon-button":"0.21.0-canary.c99d1fa5.0","@material/mwc-ripple":"0.21.0-canary.c99d1fa5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5UiJD66Rm2U+59z6OxRZTRUK6mjCv9ajTk3lL13XmxUUEgPnLEfpDaI85wNTl5QpcW7+A4Yt4to3blh0JLE6Ig==","shasum":"001c9c31b26bb036436e48fe3a9a18688e90659f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.c99d1fa5.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxi5CRA9TVsSAnZWagAAnx4P/2iY9W5h08Djdm0BHZ3K\nGq0ML7XorE1ABqlYZrcw3FSlm8XoCKGkAlPPOk0yY1RRPO5sOmlr5H56B8y1\nuQU8tMjBd7efESSkdtDdvg3huxIgoDaxP6GLXz/kczvP/dCp7RTAVPolmqzo\nFpGIV6Hlq6Y1Pzls6lc7IYECtG6EbPqYL2mH0xhESWHplse0rjGRRSIXQjm5\nzpfW2NmXhGYkaZ5g1y7/OWEdrl6Oo+XjQkH0orhdIp6LN2l2UwbVsUSSrjdM\nT5PXp727gAD2MxoDDBVUg5X4YyD2Om1zpcmep/Kqef1w1V9QSfI6iQy3R2Gp\nyAYplxqTVK10k29DXwjE/w3yFipppAOJCub4gXwpkqkaBhsAakWWETYcLR8A\nSxCdPfO4PKF2cxnf35o/wiHJwqAB4M3EwCWH7miRdWAkrcf1C90AfWmsl43B\npnmSSG3efHX0KIUXsnaobVuEQECk0WmIjlKNpVlRTEe2H04Mru4oNtwa7u5a\nkqP8JOOIbjFd85NaAM8EOgirJOiMATSwUHBZ9yt4Wlzdea7IVyWdp5Jd4Xap\nQh2h41NVPVKPRWqS5FMdhkAWtJjVBjU4SQCmmPaQPdU+X2nq+SiB33mRPj16\na2mBugJIuFoaeewGhT3ZlwxoGaI3BrdbLfaWI47kyrVaDoO1aOXORct4hu7x\nmCE4\r\n=o0b+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID33dYdDd5BT32EcICA6m/DDL9AIEpSHah0AFzBqeg8EAiBW5fU8qIPY94DZHFcTmjL6PLoZG2LEGnQi9+XA4GbUeA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.c99d1fa5.0_1619466424798_0.0464965839606053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.eea9b304.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-icon-button":"0.21.0-canary.eea9b304.0","@material/mwc-ripple":"0.21.0-canary.eea9b304.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kk7denJtzuna/ZarInMKboqeO9NsXeZGXnrI8fi537cBgoE4f1VIKf9Kk20ZEnJMyM0MN36WrEEi32YSZ0CkZg==","shasum":"df83af945677effa90e5a1533e8e422d7c3a108f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.eea9b304.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJX1CRA9TVsSAnZWagAAGDsP/2GAMysLt8mxpXFrjs6t\nSkxz2LekgpVm8klTo3vubXHPMh/EfIqMKHxHjGwpFHGrnL5IQns3BDkcFHY/\nFgIsvrgOq4XxIO8gAdYWYZQnn6njwmeAnfcpH0l4fNd1Ff+9r/lGavZKU+Qt\nv5+Do6CY35rupkAYq06NjkQCkkkkX6fpBmsbgnkDBgak7OBnr0Jq5iGtKWva\nvDdyHnGTlBeEgSn60gdXJzc+aPaoGTCq3ke36TZn+9154MbVJJNLQohzzsQM\nwXbGT6O71zD9BCchJ6nxHZruY0IfZGIn4bO/WFPrbjy5Mji4lfCxtPIe/Dzo\nKaZsNLA7oOnGjN5/WMdm3QZhwfeZtuC5hm2ke9a+cF6Ylr/a2ni67l6XLVpc\n4iLyE00D8q2SqNLxJzfW4SLdpkgoMfAGmshkWWgkRPw5RV2CkFlZJYNoq2FX\noCryzRvojztDX5haHOBftIISD4YVqLePQF0DB75bkPzhwrjwkSTxKgaN01NS\nPSb12FluP+R8hXf8VbaujLEYz6RJPO4jE7Wd8qqBVREIw6C1GwHWEKJaruAg\n8V8E4uW7PjH/HYJDCf5nY6LrGM6JHT9g5ZqBQ15VNZ1nmVmmlbWEk1Q7SjH1\nhyGqlwDKGEGHDJheUzE/eK6pf6nv3IxJg+lCMjIxV5dLD2ze5LoJRJaPy3sD\nsSA2\r\n=m4RB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8Pk1RKWrXzrF0bfS3MpmEFhak8SM1vd1G8xaVcd/VBgIhAPkC3sJW8bCw3M/2TC5yulq8oO4LkBaFGWartiM3SFvD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.eea9b304.0_1619564021389_0.3862909954875111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-icon-button":"0.21.0-canary.5dd85d0c.0","@material/mwc-ripple":"0.21.0-canary.5dd85d0c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nqyxtTwqVqS/EW5KQF6L9aJWclJmuuiOAL9ITQsTQPH2b7zEejM+8RPuvoCuoRnspehVVYU+RkuPShWvBO46Ng==","shasum":"21ef58b4f23b3443034abca801ea522dd5db2f49","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.5dd85d0c.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfVCRA9TVsSAnZWagAAvnEP/iiaHwUA3/UbYKOfZKvh\nPZ/NQMXOwP3ZdCiHqg86WdXTntZ8FtqtzF4ZaGj1VATHnnfhfarihD9hEM5o\n6GO4b7O2y0uA3OFM4NYgkSxKldO5Cx7Klt3CLYyGPwAtV2T1faU3MBaCMRFY\n++ccq3M/3IXNvfy8iReknpIaAPQ2+JYAfx0sUoCO726pk7oaSGbkGZ5OVsuR\nfQmhkhTWqT8lQro8d5BdjTjeiVqwHWep6mOOR82q0FZZoQuW5yNBV4HYmKXW\nAN/8+EibfTzR7A2SLg21ffkgowtYUUntz59Em10mCMbFS5lkgvwbkpLX0ut8\n1IapK18B4f6UR9r+MPgR1iGNECI5zua8lq1aDBQe5FuVSAcur4yOx4M/zuNY\nhdx++nQs89wrrbBWbQVNFZv0bl7tE0y0aXKUOah+1+7GKIVDntP2BYBBg3yg\n9QnCylyotBLiEJJEWUv9t1F6/5BrpleDSQ9MOSEoJ4MkiHKZE2KCdufaHJhY\nqbxJo4O4p1lIfUZmlq9NsfWZYRpNZx3iumCbsm2KYMwvKXUKjxeckOhfuFTN\n/fVNyqoSmmAOS77RWSsI/7xNPcoZ1lKPvIN0DvnoKRPf7Ns9rTfdS1NtDepj\nt7UyGtzWh3N0E2lyZqdW9DCm3F66CyE+6QNWaNAtrXIFsffxRr2dvbyOrDuC\n947B\r\n=eBTj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsXt/iSfx1eVxgTylB9scsbdIH4h7j/u0PUUDNnbyV5gIhAPPbQThzsTISGv1Y/d4ckqiTh7J1WYi6sCTUpSNFL4UH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.5dd85d0c.0_1619568596809_0.7351494932618707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.cc813cff.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-icon-button":"0.21.0-canary.cc813cff.0","@material/mwc-ripple":"0.21.0-canary.cc813cff.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O9RAWIEtscO1Zhd33nTzEE3vep41UxjENQW+nzf+VBcU8lw1xehN8qsjVgQvgJyZRrttZPBsw36pOKHEoJyIHQ==","shasum":"6403e267269256e097a7313f991c9dfcf2aff5b2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.cc813cff.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRzCRA9TVsSAnZWagAAS8gQAIzE2czfEhQjfY/6v9Bx\nG9kWI87iePGenkYDqS/HqF5MB1JnKK/322pjUwOtR9F0ZER7x1pYPDJPzHzl\nUX0gh1OiiaFKjceAuajmX5ieF0xbvTmFWIfFVI10CIq7DNq3KK1Ftm2JoV75\nkd2izI8o/PVZgXq9zvtk55BL0K56oefLiAY4/PZvuLAS0fmhaDGgH/9FxXMg\n3YlHHYXQ5cP7cv3aVc/dh5/7VpgpEx6KyXU5KuJx5A1VLaP0KJ9Si+lAN4NP\nsYKISXhWf+QZABZMoUFzLcuONqg+jxU1l/bBiSf/cPvPI6FSFof7MnjE92rs\n/WnQJuk7YvQ86BYEhiE9DIy/n2yfNRK87Tw0A1SX91ooSxyfSb6pl7s8Kd0w\nHCflGGrrEYE6X8cRmfZib8IBmMw5io4AOmFTEJwtp0JIG7AZUyRScTVJNtNF\nOo6beyPBEtFFXhWvbQynYz676p5yE9ePB3yySUfsC+TStiqNQRNQNH5JC3z+\neCbdTnzIjkwStdqDv170vLGLKOal5cnk3xiCXjC1DsXC7Ky0lXNCy/HfZDzA\nfKMtZTMo690nKkA8vLg+Uvt18J6V5KduwQlMXxwG3EXELtABEJkNTngAMLuU\n5vGP/TkqWTXisuGNv16NR5EMCIq1BaoDTWAtOW926ojkX/5BK8NOEy4wbryZ\nk1az\r\n=+IIm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqtrasv81hfyAke2TusPvNBiWDNFen1EDhRyBo1OA6CgIhANLKEio2+zeb+VOdV7XZQRqNrWKaFXPXrwNjS0maeTts"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.cc813cff.0_1619817586685_0.49623014378568886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0-canary.0875e898.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-icon-button":"0.21.0-canary.0875e898.0","@material/mwc-ripple":"0.21.0-canary.0875e898.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x6CUjVoGpcdd6S6Vako1h75UcMDU0kcwXlbZichDt7sr1MD4z3wxQmUI63bahUg1kkSedKajZmvBPoAWK7f0Bg==","shasum":"69538dc74f42400fffb450d42a80cd5b45f17ce6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0-canary.0875e898.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZbCRA9TVsSAnZWagAAKaEP/idyMCTD1Io2k2edvYA/\nQSk4GYB2hTWbYz+irpGJRTYRGMxy+01pnfXSpCSOhkKhu8SulyVSBwysjvaR\n/ffQEcSPbzAYd2pV/5Gj0uME4ZY6AekXzh/cXLc10WmbAcLjnVRZwrN5y6Ws\nXzF4GdaELD0NeEOvToVNqZ156YSDchzs9r73s7Sb7bFsFr7cPrZ8aHVBLdrW\nwojo3itoUOh7DfikNkFB/ScPF0ZXSTyT8HyjEkp6A+1Jvqobx2Yzv5NOy3Zj\nZK6GKRtBJ2lS5Lf5HnkJQcI0AyX4/KvhSoI08balIS55l7DKfV7O0rFQh3pi\nzrmC6GOz+qiR116lJoOhAoy4t7aZGqyw3k4MUI6XQ8XtUokze6AUzkLmKCpv\nRDJsEYlUdEdH7lr+flbWxYkKDShKcX4/flaJvtTQT7k1BDbsofDIDbpTOsaA\nXbgFHVQxqNKzExRPy5anBnYZAJkV8BE6nKsFIC1PzcCc5ocD3WKaGYoSCy51\nC4lckchBFguHFC470qMFq9H3eWzBqty0/YOjknPer9zhFJUQ2MKLtwsY8jfL\noXpeZWLdBTIIz3RE+3LqXmdg0rU1kxqBQ8Q1P1Yx6t4CyIqYM9mUqHFuyUa3\ngH24dZb0RSKN6TBCSzjROoICYvOYOt+J8M8oF3fz8dAZ3xAnHoeXraMKWN4+\nyAIJ\r\n=ukbW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCE57ZWLCfVhNf+nlgicE6+ptd3RnaaH0puiXzgbgTq0gIgKNKzgUOi95RvMvD3nT1SBQH153zy0USbeduufNTS7Uw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0-canary.0875e898.0_1619818075387_0.22852631400274936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-icon-button-toggle","version":"0.21.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/mwc-icon-button":"^0.21.0","@material/mwc-ripple":"^0.21.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-GuefRdk7G1S4SedcI6Kqqu2Av0HlVhgJXJ4fxI1A7RwO/fv9kk0tKV2yzMw6kN5fCgbn8C6yqejDSGJSIVIwDQ==","shasum":"853e2f00c6be6e65655910e5c9a23897495f6ea3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.21.0.tgz","fileCount":9,"unpackedSize":41513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmXCRA9TVsSAnZWagAAwBgP/263XvUlDC+VBcqb3Y3/\ngBEpwnoevY1bjzSfMiQ0OXJvv2+igU8T13ELbfGxrsgXrynPOA6t5xV92Yg0\ncZ7h8a70t65zM33iBT4wxqD8kEDtJgAzTOymyKGF+AOoPni85sk8pEMjYiPS\nK+vkFAb8Stld9swTDnHkEp8qfJvJVad48wwHEni5pWdQ59O4+FqcH+pRJMs5\nK+gJg2ybEojUKPefIZpz4hR35j1T77O/VDzVMM6Otas5r5QE/jBWDK9WaXUG\ncTNKjf81rhXoAyZQ8EvjHxp8wdp9vqAe8R/jRfOqzKaz8g81TXh/Su+Am+3H\nXtZf17WsMioWOsjUxiaR7Zja4+DDfyQCrqlm/lqar9wEIMxIJZyQMlKUsRFC\nfwEuvfkVNVocZ6T7WW19DTXe46IkwpiJg1PWW/777gU+XQOi8G+Tf2S8DXAO\ncm74LliilHrhjMQ/pUN82+j34YZvzZkcvYDSvfJqvxKY6iVB3irNZpSC3MR3\nMvHyeYcwl+KBfGoxYM7c2l/svMz8UU3xf3CJ4+SflhNUCAiGRN569bEYm9Y0\n023YATwPZcplX8YSmLLBQuGq5mQ5KO4L8afbn15PJUmiCvEcs80GrULm+87x\nQhypWY8SIj2mcnK2wOrNtrueV4KOuKBS/Clg00lhPMB2KtZ5pv4sf+yTBCAa\nJ1aP\r\n=j4MV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpIAyCACy8uh4cdIu/4R1XInazI3JFI0BA1bxU0vCsnAiEAtdgq9NfCJvObnn1vY+FwceCuRfjTGkMguQ4TpjUddk8="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.21.0_1619827094781_0.053949177887193445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-icon-button":"0.22.0-canary.8f1e7e1b.0","@material/mwc-ripple":"0.22.0-canary.8f1e7e1b.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C+dUaLSy3VMgNYKNoppiWjVOh/Nkbajojw18YpF8EGD9WjkMKdmKGBUcXF5IRrho80euqC2WX6O3HuxMkcVcTw==","shasum":"4fb70e1576fff636273647f5a347fd75a378bf79","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtWCRA9TVsSAnZWagAAZ9oP/juc8WxnmVQoMRMYiZjN\n/qxhRl0AX5r5uTqJVJe3hFtLd37BB6x0SOHD1s6z4gQn6uQOkxsjgkyX+xL2\n8JoC3i8CbFmMSb4ZicWR3R/wby38Hx54Rbu9DDGtAeJGOzEWiXR05iYTGJ+P\nWOEgBtXVmVta4TnwG4sbtPeqOsLaY0k0SdVnqEDigd8YYSnpk67Gp1+40ps1\nHPaQ0dmw19lnfpxjOBv9S7h8T7qXFC4uCX+PUM77gA+CklX42CNMUmNB8K16\ne8M57IviNPjMvuqgu8pnrJKPV3QWT1S0q/bMEdz8AMDu8IfxkyrsJpo6BuOy\nhYy1raW26wwFj0Xxydb6nB1Aq2RZ3q6oM/ps7pBfpSG48Tt7SI0LH4izllIf\n/CccUT9EyGbJOTY5fHBVXG2yMZU1e9e5FG0Bgpf21DnZ+W1fjeB8onR3RIyA\ntSMqEQT9OC1aWlxjt7okkeC3KWVirnq0FT1naqjL9P77sFp26z5mtyEkXj/W\nQ8BPMB17M2IfPhDuVFFQzTsUFjUBqdvuSM+4Om3AEPjZAhLkYgAr4KOnUpCP\nBJPOEnro8plwV7J2RIznjOqa+6Q91MUexEQ7/r4tu6xIDLQfDuZelBU8rIgv\noWHlEYIPZtRZdNSewLI/kl8Gf/NXzgtP0mOmkt+JbkI0UIPYSjlDW3mJVri8\npJJO\r\n=vLAw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLVpJm69xJJdAUkjJ6hx73qdyNYBmvm5VYocyIUVo+1wIhANVPYL9sgmv/jlTOboDOWMRswxnTkXsVyL4f7ua1svoY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.8f1e7e1b.0_1619827542483_0.2588227161061287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.deb0e792.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-icon-button":"0.22.0-canary.deb0e792.0","@material/mwc-ripple":"0.22.0-canary.deb0e792.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2owiINRvwHeOYGkKGXR+cEn7hQl97yqESC9//Sz26f3kIvBCZfShVa7IPBS0uwcZZ8cDYjjiA82T/PCkjJ/nfQ==","shasum":"92f4dbc854b93bdda957b2f83c5a45179cc209bd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.deb0e792.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxyCRA9TVsSAnZWagAAXiUP/2JuUafCOGIeMRvp743N\ntk1xZC30HIT1EN9fokgd7v4MLot3Y5WPAIV3aBL586WUVCsFJ/TmBd6VQEqb\nP67Q63dwKh+uL3RCaJFVbr9t6jJKF5I8YHmukM5g9nVRF2dYRHbh3/xdtsVU\n+zQDZ91+o82A/9blzibiRqQsrnPWfRiv7Ntujajnue20tWAZ9GwYN6khmy2G\njufSf1f6tvfgY83zhHweJhCJ9nqa7/77G4tqXx6EXs0KmslawAKh38I/QW7J\nwQSVO+Wx+yqJ3saQp7idO3Aa2TxONvrSimRn9em23dbAwD1WnOCxIk7zUj5i\ngk2Q349RduvFqvoF2n8+NoJ+KcNwPAM5J6dngpOheIZx9rzOFJkgldwBO7QU\nJlPdcbvaPyq2nbzuF/7rDIreyPUWhAZGNEaIQ6S123awdEdJ9HAGDTWjmoI/\nIvOOxee4zfqUK2Ve/F/6+fJ12gin4JB3CG3PgA9pMgXviXzWwzZcgjG4yLwo\nUzgla20Cpgaov4ZcI9E2Rp4NHAlC0efv2uohBOl0wLD1fi3Kynnqqxj+BMcG\nBDlELANKLi1a0hcz7bbdCNEwH7veasqULOw3UxvGntOhnRXnuFNoc84dpYS8\n4II+4grUQ+lzdbItVcaWZoheyid7ytBAgxE7RT7Lh/iZubN6E+hWZRWfxf53\nsTHy\r\n=RZGQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFSUIALcaOKq4m4jLGhGrEmzHSC/UixF1NyuSyGxGmp8AiEA/OZrTte7ozk5KH3Y0Iu8lfU5dmCGhflfzwMaui4xNYg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.deb0e792.0_1620077681872_0.9512292218327081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.a3ff615f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-icon-button":"0.22.0-canary.a3ff615f.0","@material/mwc-ripple":"0.22.0-canary.a3ff615f.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+YhQC5zuFD9LsA04cVCKo91hsP0L+N54pleifnULFWaRYf8+qY8rUb0JuWxy9yfU92yrmpCpQbnhBlNu6LMR5w==","shasum":"f5a162bbd99296980b33044f44c5254bc016fea9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.a3ff615f.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpgCRA9TVsSAnZWagAArFoQAKSMy7q9lT/2/GuvUEEm\nmpEKGBQ7uFSW3D0Vhak8DaPcQKxFVmwQ472zMM4ld7vFPrmTTvEyV9nqxaiA\nUUhb60Et7PcJBS9Pe5W2QPDT424EHo3ZUNrIMQCEjtFHjENZ1/hi3bVS+lbe\nTyMJS4GpYKkMxoP37Pq6xnaMhka8E2TNsLhlcElN1ItgYV7Iplg4sMG4JYCg\n3NLQvnj66DaH+JHe/9scYHMipoj1/UnYH83cGe/7Njy2CFRiu8i+7yfs+uI6\n67Ibc8aWVmJSc2HhcHGIxiWiiu7lBmc24ihrv3V5vF3N8A5vqG41gxS9A/V7\nhNa75d6x5ticNee2lh4EPGQD5PihSVr+dhaqY5jBf+BYuMpcxIW+634c9vq/\nAnxUefvprsZX5IKRQk7hwuhXC9EvzHABFaSby7WZACA2NkP/zx23BXnslkBj\nt5QENICqp5Jcr8UytmJ4Az/mDvWK9gFFvwMd37BEUj+vO6hVfEC8b0ORYdpA\nP3ovuthZg0QyMne4XDrqm1MCj1Rwx8Nbm4P33Ss1+x0b51WFlsvUex9OATd8\nlwsJxAamqFOFs3ctM4y3xGqERK8b+Rd0mQW/RQyaY/iTUqK4hIV0xl+hsroj\nBJz8b5pZT8DLp1PnipxHaaTHtvzgjB25PPfKvBDTNZKyYbeeLKSp0Pzdtf74\nizsy\r\n=oWIX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdX8HTjKoO03v6I2kHn29vx+lZj9tml42R+FtooAshPwIhAJpjJ47ru8nGCuizXQYB1dvVlXZtgy4A0FkB8A3HJHrN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.a3ff615f.0_1620081248339_0.4727592861572183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.948ccfb5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-icon-button":"0.22.0-canary.948ccfb5.0","@material/mwc-ripple":"0.22.0-canary.948ccfb5.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SgdUCuw5/il+8Q0s5st0U22cZhIDGAk/Z+4FfZIZkGFgLGzIIBRSmz3Kr+Poy/lGA+pPYkq155mgK7oOT4PU8g==","shasum":"b24806b98cc2c2be5f6837edff58c254a7be8cc1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.948ccfb5.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEaCRA9TVsSAnZWagAA0HkP/2GRnNt6WlrsJGxwyVC5\n6cfMI4vGVn3l8ccTCATtNdDqiUzVOLoy3GdFP08VH4f/gchoD66JjdX4cuWy\nkMpcVV/hzces+cf1tW+SVhafayhmf7w2UGPmI4DwgpDha9hk1yzD6DjJU/oZ\nCIDJ00kJ3zoDq+Ck2hSjokYlO4EAGT2Pn3QCauu7BnyzzZdXnB6esRXL6g40\nbCu4/zfUkXTNuc2aTTa6lA8FXmAVvid2B2Kq2V+4c8l4FqOl+QfDt7kcQEOc\nk285Rf1mAT10lyVNBneTlyqTb0X1QWTZlD11Zti98FalFxFSZqJkl1s8sOvV\n5/cZBceBY+U1zTBjctqR95bW95kUS20S75CSe647LCdzcF3OBNpgFvTHKcRy\nUcaK0VdgsYYLa5MrTi9+fApBHmcME4rEcHwJcTMl0oLbUyL3VqeXqPbps7HH\newVbgSRsei20+YUgcpOdLpEn/oZUcxcTELsoWZGUkji47x612Ls7ugIvdxH1\nZVlIQI//pp7oTKwc/gFEYsm3B3UEzyGf0ORUndJTssHAuwrJWj2/gsXaexPk\nMsWE3iDzWrXG6RWlYHkEUdQAsTJA26haIuIuOJ/FQszPNbYI7IMeTA0wk2Ma\n/chDvGojwwAq73Uyxtu3f8IejrF1gYv0pAhpBrq9n5BGMixiyuYfEIJlzcqU\nW3P/\r\n=HzKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOrrTEgOIG5T1k4en1HxNwEzG/ZHDI7pocAaYyhI56CAiEA9woGuDDfqSXKIfswpbYea2hNk/6X8giGKgzOE3LyYbw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.948ccfb5.0_1620087066267_0.6060226428194111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.9f8337d7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-icon-button":"0.22.0-canary.9f8337d7.0","@material/mwc-ripple":"0.22.0-canary.9f8337d7.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JakHnuUV13ssHKv59tEPLoKPOiOeww6NFshWr0EqafI5o+t21as7JlrnhMpIrrtXYD4n/qsPWjAH1JAHntpLMA==","shasum":"102ca9d16a654dd3fc66df7a7a3679351ca6be07","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.9f8337d7.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRlCRA9TVsSAnZWagAAlW8P/0kwBbOMa3634oI9qIph\nFhUL+56PS6UKt6g/SeF9MCCTcaczPDFpeFhltjwacmO/WiL69hzcqDD47oQq\nPxsxAUruBX/pRxHsF+m7ILdWsg86MU6rcVw2rIe0wFsdBVG/Un28MrWyhx0Y\niO2bBJaOXlKnTMbTTfDM92THI3a/Gwonv5c4NWW5WZdTdjYmPqHA91Z27WlR\nB99Amuv59T1pHTSsPuWFm5uFTHqdY5T+jK0tfudX6HMg4JxPMgOCoF0EbdT5\nDyvLcbm2baI1D3sMVOHTOD8eWKM/Snx9tVA9OzuSrMRiNc3r3grooh+GYcKV\nxUhBu5hnQzfhBiXDhzZhrYDLckmepHCAqifTuyLIZ3911FREviD0oIIIfspa\noAgueZWsAQwz8ndJ+y8HwWGD5w9ga5jzcYzux9XYKkJMoLcJ8zBr6gPUmVOz\nE8Uaz2yU8HBKMzVzFWjwNcE7SuFrj5ph03GECyP92sdmj6vwQJzP+ACHwlXG\ni7TIWvUqi9qUeyTihpIJQscQlMCsTcpvnrxUiKev0DCVA79Io1N07d0NXTe+\nqD6+81V+6oMMMpyVdpEfgcS9VqhothmadBz2Ds9qQW5jQ7BbblpWScJUEuTJ\nAaTjF0W9mLwYR8QTsUscWZbIPX68Y4fuUsGQaZu7Y7o4Ij9tf9kzRlI9KIDo\nWgVk\r\n=Jl3s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnv4yz4XCC+eDzC8j6GO6QVC1h8O5Bj1lZ9EoJfMfKHgIhAOvWqliTmgQA9dVX58WtknibMWEszzlRaM8qaejC8T9M"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.9f8337d7.0_1620153445013_0.9567075680408141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.5813480a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-icon-button":"0.22.0-canary.5813480a.0","@material/mwc-ripple":"0.22.0-canary.5813480a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MRv3rLfJcnkKkHxeWQYWnhcrEadTgRKazH34mbQTTkkSUvoplQpjAICxa+Dcbu/5IMiG3cAIj0v/uMlyihMSrA==","shasum":"558122a60c290a8804dabfefafb465e86ab7a7ae","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.5813480a.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMzCRA9TVsSAnZWagAAqisP/0HYtHJihvfQ29DT70LH\nX+EDwPybovfyfa99LZvuzabCXLF1ewoucUx+gi5wVp438wgICCq7UENAWxIT\nVhvMFLcH4+HE/DpcmpQO45Ur3MnKcNUu3TifDDKc4W3/yq8MyuxzJ/P3O1ex\n60ALQWQrj9Nhiq/yijFpHLC7/cSKHdfM3lvunUkKgr7aBR/RaqVDm+yFdEgb\ncBFVH06HEGWhk37q5/x8WVLUQSXgFbiv01BSKRYqTLTkEtd4MY24Rh31dRp3\nULpde2poT1W8xvxtt5MEtJIohsPqhPb6nYuCbw9akA1GoPK+GQ32NWVYi4Dl\nLbNaYlRvG23Q0ep/9iRJH9/0zlxD0mxRUR5guJEMsYhqQAHOd8kCIEHdUX+9\nmY0/tKJQxd6Nl7tVa5P/5AutPRJ/m1ZC6kg9W89BydyslCnA0sy/J7PUT+qy\nl/HUv/XhFRWVe+WbVM9wY0fR2a3Xjv6AcBkzjQMAkBHoosxooSZmwMx4ELRA\nJaQkQCUlHT/13gWaH6FyXOtozSYA2yCuNz0+iP9WWR+M+6j6ZQAoiZV0iTg9\nNdyu8VppLOBzpoWdnV3ORhVaGHgIj3o+VH7uAP/KqQ6XujrrTN+npRFXuOXU\n9boTLxxO2R3H6YqRC1UfkQfs8/3mnn+9DuTT13hFGg7GCzJybQnp8ivjqhkk\n5GEA\r\n=F3DR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaP8kgQU+VWDD+pJ9JFKkws3QxWTJysUJGBTZtCfSyoAiBuSWKRvHLkmxk+/xKbixf90NxzHJX2ElLE2s8Rg8HKvg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.5813480a.0_1620239154517_0.5321893704011604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-icon-button":"0.22.0-canary.ab7fc1bf.0","@material/mwc-ripple":"0.22.0-canary.ab7fc1bf.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9UiCYb2G/Iy/3ZDIa9sMSvGAHhlQLGqe0taqKufDnHIyiveSpZQnAnWQNYI15ERwCTnGP6IdeSlk6PcXOdBu2w==","shasum":"76571f1a2852813af0025e8d8fa0b0b75c69d0fd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6aCRA9TVsSAnZWagAAk6MP/i4tdv8UW9Ol9w35QZ8c\n5dSJaTkUL3ormjVEpLgMC0eaeHhXTO0tyDWmRvfxk9AIT1Ny/t6WZeK35cB7\nf5YuX3VDfC5PxMeYla0l2svYgFCefY942SBFQG76TKLCYncyfSbxmNBumzb2\nVZe/ylQaG2rvecLXtRNkM32s7ists+0GSYRkq7Dk4c+jkoevF22f/jgwoxPj\nFCLFmpp1W5/CTbuzEVy5SvuecQgpinRzNrXs4YL9qnu8qUNexCvOGewPuHhk\ngHo2Gk6A/CizkuVxJUq0k8F//gLgkvdPtUxLEMoV4Jfl34GaOQzkI2Q0IVI1\n3EzqXSLXjH9cQ7zGtdOdbdB5rEj+xK/TAHLroXt/jmvmnUCjQ2sVGLwBIj/4\nur2fF64rckEnnhcKj2Y0R9e8+RDfuDW9KSHIf5Fn26gBL+ebO8O+M6AVtZM2\nhUOVJx55qGf5sPNlLPl9W3iz9hj9bQRtoRlpzt8zY98nYnONoES/BQPP6z8v\nsbz0pMN5ODWreRyIvvlLG97V5XDVuDi7kW8q5h5O6OdJNDLl183bLGwvdfz2\nHQibXGLE7r/ncUqgQmCk+ABzmr4oC6zcW4n+Dq8WJpKGrAF4AtQC2FfXhvAw\nb83NQEdozsSTQIxUEhxs8kP2K0H4PPUQRs0QfWKOjXhYAjGDroyb2mwLBUv1\nOIuF\r\n=IQGb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCju+btT03xlDy3/oe7vYHHFFO1S6Lt9GJ/qzIJUAzSRQIgUL2p8luFxNzemMFOTUt401ryL3pBHAxYlLIR8cXr/m4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.ab7fc1bf.0_1620323993733_0.4948583918905167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.25693d60.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-icon-button":"0.22.0-canary.25693d60.0","@material/mwc-ripple":"0.22.0-canary.25693d60.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7s6ZF4pGfx8wXQYB2emqonv8NsJ1nB0/oNTSCNore0gDkYTd2Kir3+IIpihnNdZN3ZPKyHz6dUXJ0bcRLcFM9g==","shasum":"68d97ff8af2cd136e5db57a6227ca8e8a7ea20b6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.25693d60.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbeNCRA9TVsSAnZWagAAW/0P+wW16n5ucdMZTbfOqZEt\nJ2dNnyDNijJwv05iAyAMnADGLMlNJ5f0TxxY228wxDB50Dn97yDkLlKXc4dW\nTnKjTDiUmHDrGsrGgHwSq9U2fNGHVGtFXRzmFy5mdXgdiaW+/2xNmncn1J2B\nS3KDTgYA/p4S2ee1tE0OsOuP1aEzQ8iMSVYL4QUswskGoSJJJx5EkeeiFlVr\nMXHOYZbSQJ0E2iwy9wPiauTtQZI4J0xcAMby6LcUrQpspfQLUvByoGhabbRR\n9ATMmCYdXKvsGDyTsP2iazuxn3J/WWF7h5DoU2ot9mND35QcwM08F8B+TIs5\nCaajFFRbJg/UbH5e1aRfM8TWs5maGekRrxyKhYUOEk0XN6VgrAMKCHfBp9jl\ncl+HJS0scAd0KKnoEcFy/lB/10kjItZsP0x5hKGAt+i1gPk+3cboUUXfadI1\nanxwm5Gbgak3RSI/7hGh8FIejxe2akFUBnHNbGVkwIXavTud/MU0aOuMEcn/\noDjSPFdCtHG7hgMLISBLSNEh5sgk5EOQ0YcJsowxuR7BtW4Ub3ahV5VIocR4\nCe2ymknb63MVXT+oUBMJzUAYwIkxiJCY4KZpTxcOG1owO6XcEIAGBO96F6+L\nNzVArNwZ4oEwF5gjD7f4NtrdYv/4qdjaxraXpEEWZY8swlDULHk21x/9we7l\ns+cZ\r\n=DWc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3mY/RfOCpAyYPHw/Hd+12NzeAboisXI2opMqGJgrW1QIhAL7Us4Ht1FwaQXZWnKYTkfzjSNFLpX3F3QNGspIeazSJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.25693d60.0_1620424589414_0.6351381658796285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.c497962b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-icon-button":"0.22.0-canary.c497962b.0","@material/mwc-ripple":"0.22.0-canary.c497962b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DCQ+hWZDnKYiSNsvtaHUr1Vbdt03dUCFPyeUIuUhk2ZveEuCjeZqz3ZvtZwtWRskRfQX6IOxNoCAFJKQKNUwYA==","shasum":"7af2dc890571ccdfa8204b945e2b757c2cabb791","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.c497962b.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0lCRA9TVsSAnZWagAACHYQAIr/+bhJuyovlg2TadNz\nqVCwNjBlvxAG2kEI78nJ7TAoAgffpoBISULss2pA2EFKM2Em/nOvVA8SA5ND\noyEHm1m7sGp51O8oj0KwIwR6/rXmjuYHpk0xFOs/Wmunq/bUrNklFL9NYGs3\nTrVj/fFK/Z2p7w7Ze4rDLBzwazwgQMSyWv5JDfoFa2vq57AYNf3xBnLb2btm\nt7Q7ZPrLCun5carslCcyx5HabW4R1IWODNmVJqLct7n+DovIibOL8F6Hb47K\nXtAoOZ2Oy4i92mGrO0q77P2RIfJOSeJ44Qccs71pn0GimQL+qsKi3oY38vx1\nHsSXewf+5a19lx+0PCCmfhgYiLi5ShtBq5cA095LIVluuxbwsRNyNtXerRRL\nWIRKP9dCLq1PCQf7eKa1S3FqWa0x8c/eNSlLo5KW+WRdASJSBASgKcWgvxbd\niPmxD118hT2BmYh3X1MUwDLTsqooJHaufVOgzexQTQsioqk8TtEr+q6TyXBf\nI0/nAwKQF+ZYJHuj04Ap29YGMImQn7TCrFsmvsMTVVV0Vqr0lWtgZvh42FnV\nwgeBZvgaBe2JsvL9vFBun/lrT6eCRm96QOaWaN5fdqAJvhpnByTjfy1pw2UX\nF3gYPaDhkb01goz68SSSGmp9W79egXvNA55glxIgDQLMsBd39FK6xpCFgeyI\nuG1S\r\n=u3gZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJCgUwRmgOyVA7zNG//bQqKAicXymDuZdN5vxNCwYxcAiEAj1ZjYcmmkHKswumyG1/63Z64MYAxhryISOKDv5Ge+s4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.c497962b.0_1620426020649_0.861458253909259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.e300688e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-icon-button":"0.22.0-canary.e300688e.0","@material/mwc-ripple":"0.22.0-canary.e300688e.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tzMtIzhPutt+LXSwHWWKUVOqpQTrgKiVH/B5zNWkoBuDHoZdgrVb5uyp+41pErQGneMD+uQg0nQXzZ7vypmeTA==","shasum":"d10b146909d6490b09ff333766bd377632600787","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.e300688e.0.tgz","fileCount":9,"unpackedSize":41582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4vCRA9TVsSAnZWagAAWFcP/jh8Aov/ivIzHe1J7vKs\nKf0K3/ADZA4R3AKsN+NLnJ+kshsH90uvvSY8Z22kpKiIBIbuV3Bt24A9Q6eF\njohwSQRI0veJQdU4O5kYPBb4o6Guj25CJnerXQxW53LcjXEwpZKaZQ9Yl3F+\nqzygokh7oqMsL+TnVxkdIhr74ZnehO8GpYhocjtC2HEc13n3KQA2HEX37zVa\nE2px7PFkRxIw178Kxjgr4Anqsc6UlWzj7LYz/igfDU6IHD9C3eSbBPvuj7HF\nCLbjL07dF9gwwncpVZEZLXwtRoLpZ2eMRh2Yna0sfjyoC/gvABcRPua3o0hE\n4SE8PWI6vBmsePYW/XpZNK8YFOWylf+3kAcCCOXU0vFvz9+ICEJqA4HCUyvE\n5IU391fmoOlJ3i5QoJ4ioUw9poin2CqSGoPtETaYPXnL2oTbj3uCFMEX8gol\nwb71wIqI1z1+oFFAws5kubRbYzHUeNrhiZd6ASW4rFPiFWiAO0cr9olvgpiv\n3f4RzjGPA1C7fwtfEg0MpBcQyMW/8y1WWLPtRHDWWSlnsvmGyU/pXEbONz82\ns5e/Fcwx4vZex3Jrx7KGXGKARO/xM7rJIaXG5q1fRzsoEJu+BQ3xI+FApBAo\nGxkIa6FzlTtUigBRDTJRh/YwgYm/sAo9QjOQml+t9ob5Wi2PO3k+TxGL1Mcv\nnp3l\r\n=uty3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoMHLV52Ecx0Jf04aQ5QFeN5v48z95w/1afxl6RpemIQIgVxOtNvrGPvwGTbuHOAqZaobQv/yM0YW61R+7L836FO0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.e300688e.0_1620426286665_0.4396309828358387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.d70287f2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-icon-button":"0.22.0-canary.d70287f2.0","@material/mwc-ripple":"0.22.0-canary.d70287f2.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0YdScBW5t56U738RP/YtbYbsBZRDWmcMRmc4ocoki7bbQbXOJ98pnxvlmt60R03gN6OEui8L/T2w3DKRSo/X4w==","shasum":"55ca07624aebd1f8af8c95f2aa5fec64b15debf1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.d70287f2.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmoCRA9TVsSAnZWagAACQUP/3wmZuOVx6XN16nlw+CA\nFzLVSrbtO/Fhhmnf8vIcAyA9iZYatUuCivK1sZ6j9aoaFAo/sS4mjx0ov2fv\nsbjn3Zd35ZGwaV9y5NtFi/xCr79ziHzqxaYfjWT+fpOAvkKEcGU6HzogzV9d\nggkVqK69Me2XGUHyOc3Ry9BGpFUw3tywbD1xxxnM+9+ywrBx4ryMadm8qglA\nHVhAPYpPqymg4JUeSP7v6iBo7470NbingopUnVoCwhuND9exgOCYEPYBDV5A\nETg4B+OEXSMmN48M/OyhlY57gAh+4sw69T72jkMLcdQzODBbC83BcxuA6+bH\nJHnkjX/lzA74fkR9kegwVXjZ5yjsvGX9GxGrC5gulJPeiNzvifzOp67SyUzs\niRNhfTZzXX3bYwgqKFme7mllOX2Wnfh6Gw+1TM3h95dWI8KLsS77CPkEkkU6\nCpqK/FexP25WT2omsVUmGNu7BWorQaqE7bTWhVNIR8uwdXHJw5p73PRKu0e4\nBMweHCJW3BuWgpiNKS/oU4icOvN+ja7+N/13LQLhMvtS53DO8xrIvBEz2RkN\nJVxX8COnUmdiSij7UIE/oQOHFUmwZLgRXopxLJ3dGSTbcCkLW9OWndEsKkhw\nPTYJCNiA6I5IzkWPY/tRSeOa/WBQAuxriJeLirZo9zR6I5FT2+Hlcgh7XS7Z\n1DzM\r\n=7DLw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9fY47lKVkECA39nKiZfOFPucZui/5rrIYgMBgkIrRuAIhANHIE9LmrQue38kZ1+SPp4DMGoEV0Ab7YP9Ax9rCnXHb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.d70287f2.0_1620674984348_0.18000920809525556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.02e841b2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-icon-button":"0.22.0-canary.02e841b2.0","@material/mwc-ripple":"0.22.0-canary.02e841b2.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FDKITbepl4gzce3sHbkZQqJdOkpzMx/VyWoqa8Fh/jHBiil7d6FPobRG7P7hbz5z98la+xQ29sQl0/cN/1btPQ==","shasum":"fc668fb7c31417a6ba1bedb75b96f71dac06dd86","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.02e841b2.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZj0CRA9TVsSAnZWagAAVbAQAJ9Sgp4cu2rgM2B0UGSD\nzsmHHk33C4/rq+my5W5p5sb+vZrAhlLl1nuZMFV+Myodo+b8B7c3vqBcV3nj\nAlR61RDirmt2Pj8FgiLWt/QmNeXXo2MopVtpg6rnp4wtTTFpq0iQtfc10Gdm\nvEc29MfDcyVFi3gLRqu0md3c2z62KFSRG+vvXH48ufiE8ax8YYDhg45FZGRW\n30i/GBWGBkkDGTrAEyculz5liRliLOxB7phbDi5xq410/Raikzufr3ECrIXY\nyf/DTbjeqrYLUnKLFdIOP5yqoBkYjA74Ynbe3K61Fsnvoyy71O4z5+9+xHbg\nYicxH75XEsXRnkQpkNCozXF1XKVeOI4hsGakYeujExXO0fchWiqW26EBaay7\nF1hRo+3A90rr2efOxtBZ8RmNU5Kc4xyEyHkR6npEMKVC5Y/bnYS5fMlF8CKm\nvddL2dNWdq4Gtn7BBIHABrHnFWMFYpq9ZP3savQ9t6PCHmlUslPsSokDD2ZQ\nfflQJ2VhTeiUr0XidoaLwGGJIDypY2sO+p8bZpnWgKsUWOsCFrrdwsskmBY7\noBCnD7PRhf3DfkQKbEXJLOdPczrcyNzS5XL4QGZU6iAOysl4d+PvNOiBg1jt\neIaGD+PjghQot3x5niY/VX7YaCU0XjsZJpsCTAM0zjVtTtlwZvtiTIEYKVLk\nUHMJ\r\n=gN50\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnEdHIRap9baeOh3GMVy9eDarmnBrmER/RWQX29pDEkQIgTjBpr98B0okOPcmO3fX78SBrZ7+FDbRy791KeyoeA0Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.02e841b2.0_1620678899940_0.43716961492984874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.badda2f0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-icon-button":"0.22.0-canary.badda2f0.0","@material/mwc-ripple":"0.22.0-canary.badda2f0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QNsooV6T8irESbZ991/Iu08mq+3LVmPQNl8z0mLx3CCHuNGOQsF7dL5RY7TQit5cL/PZbqJb39+ZI97u2kL43A==","shasum":"2fc8b0df3f2ae47b60d91c1c9518877ec04106db","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.badda2f0.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdE4CRA9TVsSAnZWagAACv0P/1+cCPT8lskZ/b62OUd2\n+KlFQffPkCi4jYmS9Lg2jHtJzg/6MopQHWdGH3HeKE+L8wvs/vw9JB+X2snm\nJYI1cpMT+X8Lw9irmahwqGDBK4WJjUyTLd3e2GtX4xfhKOu0DbyGQgAEvWD8\n/nP5ofeqSWNsVsPHpMcBpEZabsZbMLVkOfqzrPGl2XZ6FGsZOhBYONwdt/7U\nufvgSWlkM9AIHb7EBYYH4J72S011dNps6LO1FEzd3681VV5Zy6nUYSZW8eUo\noUphHClUTa7v/q/AF5WymDDUHv5S2clDpGvYoX9p8fbfdQ4supH8X00UoZWP\nzRWppPHgCVDPGobsJ+93eUhK9NJTE1ofiq+j4DS8mCGTHxME96EMndI6Ycna\n6Q1mSVC+3lpMkKy9E20z+rAVWnMOH4TTLd6AcGg6q85B568El0kE2BdRWZ+p\nCsrRMVmcTiYvD5PWaDR/oUg2wtCaY7nHeArbxWp9q1lZ8VBhqVlgqFOVDiM3\nxAqTU748D7t9Bi4bslYYntcqNd+8UUXAZYRk3qbGCZblM5jqPHuUVz1I1CQ8\nRVhqFFdpKBm7HlfTSACjV2uSMt2XQk4kPTeaW/SrFXWhtfJ7i6/log9ixv0l\nknpWWLDiQiuKMLXS5XFZr6kqz/2biuuTvFJiO+mPayQWOLPMmtEEm1W7u8bD\nLeWE\r\n=qvyh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEb3K7ozDcr1ujvGVVeUdboHiDbSRUTe9UwkvdsqbqpTAiBpJKsfxLxnCjz/rCSeMxGu8Kq5VCqe97pyQHgWFLxl7w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.badda2f0.0_1620693303998_0.7231576638895822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.004aca62.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-icon-button":"0.22.0-canary.004aca62.0","@material/mwc-ripple":"0.22.0-canary.004aca62.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J5gssPvzwZLLmqRHbedrAdf/FsXuzIND4ktgU0Tq+67ck3asyLXS61EPMR0yQ99o3al6LUY+OLbQ+8trPSSKnw==","shasum":"ff71c043317ebc22d29e70931a100b9b8167d94f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.004aca62.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmse2CRA9TVsSAnZWagAAFYQP/0DaZO6JUr1hcCJJmzN5\n3u5nTBWHsS/QqFx/tPHD5cqXRxTTf2gDiBQ2otBgP77uvJ2UayuZ/rWtA2qE\nsPHmNQEv+/MR5Tx6TpdIHyTPsC5OTaO5VI/mk+QqrT3XcqsG9O/8Ud8PqPgl\nxMj8w8SkkH5ANAKzrgis6h3KmHpG9KJI2Wk0LTqBuVGKddYWRd+mMkuj1TOK\nGKKLaN+DoSsittLbXe+SJSiIRE/oLEoMjx/+4frmMEP15pfkaSLpiGxMwFCs\nguUoH8Cg0cx9sw5SESh+fkFkpM1vFWPmu8m3QjF57oIV5LyeTpjZKqpOtGUF\nOilXgElyzpPAqEglbv2fy9QFXioTaSvBe6NFderAjxJlPaTALBObllpKOlAb\nsYt9moXLe7WFHl39NpdTUTKUthoZXasZRuQQ97R55CjtAenGHVp/IBps0o74\nD7z4o4MoLqf9D7TkiWVED5AxpJABNiHP0vY9amLfV3Yf4WJN2iL3zEo9hLwt\nkwJz53uM2GwrupuTHFWzt1y5aZgx5eig8Abu1opGYJDQKjQ4SXDR26pC5xno\nHJpwVaG6WzEuCkwaxKrmAKw8sgnTGB+N0ey+zgwn6gVOPjulIXikN9cuU4av\nloa+J97UBl/3U5yGOgltiL3CVRSRqHQMOEuLEshs5hD9eHEL7c0KhekXswuQ\nGxKN\r\n=7A7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsBuoBtXXSWugcJXnnjZvahu5y6UUCdFQ4/PueYkSr6AiA6WTzZOvaNwW5X83MX70OMojMMgt4HiaLek9IGl9k51A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.004aca62.0_1620756406325_0.8197183080682071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.4af17446.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-icon-button":"0.22.0-canary.4af17446.0","@material/mwc-ripple":"0.22.0-canary.4af17446.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rDF+434XPnwapcvdtRZOImEPV0ChXKeCsmZAPRLt8uY4TYkELbs2gLX5PD7JWZ9DzF0ZVX781MBX7BbuMjzrTA==","shasum":"ce3a2b85da28785ec54a94df57d653792084974b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.4af17446.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtELCRA9TVsSAnZWagAABQ8P/Ak+/2UHLj3ZulQ9D6n2\nZJJWLKvTkjBj5XNl8EsbWM7z3YFRviuiBlIYfRDfxdzeC8sIZ1VwD32w4321\na1raWOBR5APdlKIbr+jgq001/WJUK7fFqdvTHMjQTO8aynVEjjCbfcZzL4H+\nGxQMxwxiNKEEmWawvSYDgQh8w2Uz6rcIDrkFcf4MisYKoOxi8q3yl92E1YB3\n6B8KEKetKQPMdjxwCtkddgevfW7fUkAMKOaGe5jGn9fo57wTGS0nF6D9VJYY\nZBOlEVZO7JsfCHGXKw2amR2Ewvr0LSb5GYuReYPBpp/c/1iJpxDabDMUjhtP\nBWjt+Iri9YAJBCehm2nJreszdE4XpMAVi96ITejxqUC5/+EjobwlRkEjba8O\nrTfqGwoEXBV8S0tTlLVl75xu4GkROxGIKFSHe8vpcRBWculJ77qCcqPHtkUK\nczGDVgCeFGw6epOgLmfRNXoEjH7cvNgNKNO3IZEu47TJhAQ3rqwEWgPnlybu\nRSa2u6NON0JGYJkZxaKu2um4AduRqKF0HKgbGnvHfp0o8/nn65QRb7d2MXEs\nImmypd2zMgkXX+vOsHYtHW4ADXtxd9rIBCgkK4RgGwXMb6P51ztgZh7oDaML\nRfU4OMowcLJWX5VwOtxZSn+htehpCmEVcxfQLzh8m5pDifWUbrV6cK0sSbI7\n+ZAW\r\n=Erpz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDW0Pykbbu8HH1wvc7cNuprCmxz6sERzU30bZcdZ9YZqAiB0QlgYmX9iGBB7tShlY1kO6nou/eqtT7WjXac7M6ebVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.4af17446.0_1620758794918_0.0791252434983778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b94d7187.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-icon-button":"0.22.0-canary.b94d7187.0","@material/mwc-ripple":"0.22.0-canary.b94d7187.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zCt8jYsMJ4RDNv6REmmt9//gznzQfO25M+QurW1z1d58tNsfPCJ15covqUoaHn4tPoLgiPOymRmO3wSFwssqzg==","shasum":"7bb7041164b8f41e0a4ac8c8879364bebcf7df26","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b94d7187.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJWCRA9TVsSAnZWagAAk4IP/Rac+bynoLORwFFMDTP9\n8Kb890uxEokMlysViNbjp0gO9SSHj/PZw9+KJOdUwspauXhM1nlziV1e0D+S\nrhLLMUc96yK67HTU5nz7RG25FAnnSIMthw/LMfhHoRJWoFZu1c4WxBTLtE2r\n4N+3LwciHq+Y/5cK90UynpzmnF8YDYNp+FkAaOkMP/i7EMWzsCTMJjPJJSuh\nM5y8D65AoqQprblqv6USdWnWjEZ1EkYoSTzGkTiXW2TOZiUUguOjyQi96zKs\nsagQ4+rGex2Tzy8sufYW1wovesnr98Eg0+euHZYfktts04A/a5hfLr1eWxIM\nF0UwPWyP67bYrRh+63mANyg/pIFvqELU3m6M4NpUuKLs7PHPnAifkzqCQDLT\nGi3rslsYPliq43EUMNQWlAuFB/edD1tNhcAW01ruHuKNUal7WRo3ZqYqeQ5U\nuBS/C1BWnQYjk+x9LC3uhjzdBj85zR7lqUMan/PZtoHD3oui7nPD6OlNbvfk\nR3ylEaqgSTlbIDymWBQGi4QHhc39Ubt+mOnt6pNlsgRCeStTDl2Xej++zfSl\noYPONQ7frvJkDKz9+VGupgtFMFR3gmmNgoc+EylvkEV+Rl5yhlyxZI68r9NU\nj87WTJqh+m5TJpYfOABd+kVXq93Jlmf1iGTqfE3SK+FGRU7xUhAbXlsMC4T9\nQ3W8\r\n=WF9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzkhbTs2i8j6PtlC+6qKrGIiPNLAL/psySFtFxvdTA0QIgSXP8vUbVrZ2pwsIKUqgamcHIGx08pGXcU6tevUi+kAA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b94d7187.0_1620759126196_0.463000892386785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.4021b2f9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-icon-button":"0.22.0-canary.4021b2f9.0","@material/mwc-ripple":"0.22.0-canary.4021b2f9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rA4rOOmoWkJcjVkKnkc1XqiwlaPixd+YgkPtSmI7Jtm81wgLNPGTRJuuEoVbgLWFMbM6GRrYfe6L9ax9VE/O/Q==","shasum":"784bbb950fbc6b40ed00af154f9565678f4b61ea","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.4021b2f9.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAkCRA9TVsSAnZWagAASg0P/38gDM3Du9knz+KSLIJh\n171R/sRxE+5wmeuaRRinawxsZQE+0dOSVNxoko8Cph6dGrDzGwJMg6Rjolbs\nMU2inYGaQ0EJj1Y0JJj11W+y3kTLkQj2SFbnPfKggfNY2mBjM9chNGwxV2CV\nFtbH0DJ7/4V+gAV82fRi8ThQJPQiMGRmy321vj3FInzSNGiGDmbXvz0hAG3I\nwFeEgWKw9aFpXAmUXzVfyeTG5sWDUp3YUUL2lWyZQkgpzrtA6OPN97vLUqBZ\nfwilNeIleG4YeJMSh6YKfZ/OT/e5xqVChmxXP5btJkbbWFsjr3stvzE1UlB5\nN+ym/OhjU5QtfNYVDfrTKBSLh711nrafuDn5LLhNvXm3fhuyiICV5JPrsS68\nHShPBlOFr+a4C2jq6ba5le1T4Df98ALbfNx5R9yS43O1GbFMiYfVxs/TdBmg\nAakkmQizbjlgKVQ+LNOsEvrSgcAJBp2uk3JOj8H/QahnewWKg7aa9MXNczjS\nSC2J06p9zDoW24ImApBJ5EXHB6Ph4Wdo5bn2Sp81JF0POo/SKdJzEScqA5E1\nPUfuxaSwnA+wYgC6Ri2W3VO2mpioX+7jbGInlq0ZR2Lqq+b7Saq1bV1Ctluv\npvLkLAvIjt0G1gBORjKmRSqVfU65+ZyT9DbtqP94qveVZUvb3GRAU4JjaaWm\narT2\r\n=DPFS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtxuvjUMs6+gx9MyD3Fz0gg0RnXvojjyX5nCTcBZbM1wIhAMLVIcCqYc2T57Lzvr6+DpLxUUYUEuVrdVbpPwP/t9rq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.4021b2f9.0_1620856867716_0.8346248250918713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.6a5956a3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-icon-button":"0.22.0-canary.6a5956a3.0","@material/mwc-ripple":"0.22.0-canary.6a5956a3.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0J/qQ32+9LW68e4rI8e1dFhOGL5Rd8khFeEHkppoH1BZvbg2thTdftRMpWUEeB2CIrAWrxEIfK/jnxPQIx6Tiw==","shasum":"3fc268b741867d0aeaa264afa6a46cd6f58b748a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.6a5956a3.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQOCRA9TVsSAnZWagAA1mYP/0VY57/v8ZhlzEWOu5pq\nccdQeapANDVywezkzyXqNwefsIVDAJoUowHRRdmntFWpiVn8/2hhTIOjNT15\ngWs0WYQSHQHTdHm+N+Ws02dOVmPqVuHu1fOiOM+Jgb+JG6e4GJPhPLff30C0\nGEgo511PjXYuomC7k5VHbyUaHDhgSStr569qyG/8lffUHJRYXMGv157R+Lku\n27AvkgpXd/tlvg6TVs93CCEXH2tS8s7GxnYl2ZJ5MKA0RAM4Dvn7lAkYHCc5\n2tSFjGyjp9ySzm5mKrCqA6ftN0Sjl4XeNlO6uStWd2Ptvh2zEitLbTkCLy2/\nzHk/TyksgNDu3Vis5HbwOY0DviQyH5+grktKjyc3Lm+SBqvL7WwYud4GUS+r\nEi7o7fS++P1fEcqqYbxCYClZyp3pgYB/jbVf0kzfzf5T3Jn/gfMAMmWbIebh\nX9gtSskuoFVFRB+fcprcE8Wg6HqIXtDiIhFlCQOPgnXtQrBafctegmXX531/\nl5amcOwntHq++TwnflzY4TvCo5fLEYW1yIhautBX+jYzlfhEj8S6qDAqFuDI\ni1fgb3+N8RVEFaHxUar++6CK8YMkI0tcuWutfZ/eWjKPx1HUq/eNIBCqbZBO\nybzPSYGScKF/MDxyL++2V5szNurK7yarLlHWj1E+U/1KW9DdvcfPiSqkInRd\nG5tx\r\n=EIjl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdw9nOq4LscJUXfmERvTiHL689mG9vy3FYXGZDGZq6bAiEAslucwlS5dFs3Q9SxuN3qB/eogIcMOxtHfTPbfV9RSvM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.6a5956a3.0_1620857870324_0.45915447720836955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-icon-button":"0.22.0-canary.b6e8a74b.0","@material/mwc-ripple":"0.22.0-canary.b6e8a74b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xp7Gforiq4i1z+JOCaKNgfb3kk7B4fRttTYLnGe0q4WkEepYPN3bYqYNpZtsgZrtTUEC5BdaiHDoZURbhVSmHw==","shasum":"1db6159a257f6f1785256e56eb7818c1659c8750","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b6e8a74b.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7WCRA9TVsSAnZWagAAwt4P/1Gu/wRzP/L/z8zj82i5\nbqeJ9GdgUhhWuf7vTG9VL40HobyBKGk6xR6URF8JRVHXLMHib2FJPFJqLXi+\nLW6DMsOZ7+R5e1/KWtCmN12yn4U/8p1vc/TR3F2fD3IfBE68TThr/TM3qQaB\nUrmzzBQkk3fH0ipUZwRBwK34HzRuGRKDfs5kUqbB4ObmKSSjDXQSQib/toLX\nQE9xak2TZi7eZssJLDM41bW91xlRVVtilfx/4kMew24+Ej8abrpYget2I0al\nUWMmsmS8BDHyExxdmyI3Jm3oLmyI1yu49WD0XpvWZ8pTWDE1SURX7GeKqzLe\nZBbWER1NsADdSpPT1ZdGK3Jrzn+QpJS3iLiLNXab4uu1oJ1JOWkhep/t0mHJ\nilUdoNbWqdTWuK+inmxb09MkNdfrEdSEJoL7SoCyAy37HoMvtFfwSunh/r6m\nA49uddZM/62IyodEmrqe4/oh6gmBNtgdRf2bQl/bim0EvW7tHKiDJbtDii+v\n4r944pWRdbbzfKnXIw6sClhJPDpqx4L3vMtThMhaqxRPAO0N6EwelgyL3MYG\nWlhznJ4CgoPEzIqKfCHWeM3ERHNIsPjlUaSYGWoHcT8q0usfMD3wMdA/01eK\nOnnXtiCxn5kW6kilq/3JhdDSffVb/N93lDYvPK44afrEaL61cdOb6Eir87S1\n2JUD\r\n=d20t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPgpOjhvA53Cd6XYS204ubHa/zudH7VUekXg70D4FCEgIhAPh5cYQkRY+Ro06gZ/BwLnbK5yjRT4TdZMAZNxqTR+CN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b6e8a74b.0_1620860629606_0.4660677794974375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.c94e1030.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-icon-button":"0.22.0-canary.c94e1030.0","@material/mwc-ripple":"0.22.0-canary.c94e1030.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Su7I28X2Q/8iraHs3xl5TKS+bKsoYnlj+5hpP0KTBRCI9sfraU1WecPkGydMxSbhEkjj9OGjLxSt7wwjt23rSQ==","shasum":"6b7d2ea8eb0c30d6ca680dba10780daed2f44ca5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.c94e1030.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGA3CRA9TVsSAnZWagAAwIAP/1FR7kjj2WYWAqkycvv0\nguXcZIqISEnd+ODqedwPzEQSwQJZBqina0kcknWiJoyt52oBGV6aIQpKTVHJ\nNYy8NTMrdOm7sNVj5KlnX8NqGsCZFjTCQ/68SVMyUcwZRjCkpClosUA5mMYl\ncUYmX4QuhFpkwIbj7tTGdzEKYg1gaL6yL3Lv9brUvvdEoUd0MGReB0qEDY+M\nNEw/yFUmJAoK+cfEzxf1envXyDrVyUlPRINqhtA/nrlmuvVaXdVOMCBV1HcH\n2SO8sf2WqUmJB/2F6QZSGFZpklIyJMhyt+n2xqRIj2omQbJoIdSNJa9yA/E8\nRjLY2gyQ1LuBov6veYbizh5Up4WR80s40OYSGErITXiutF3SkUQ98XiGuKHh\nResdV/4Pu4oLM5OrZRdd3s2j/q2hKsAeSUrtGUKf3mDOZUx+sDJZWHqEt94K\n07MHcLFt3OG9JilkWf/vDvv0kZ8ORngKaKNtvNCsnzj3WUKVmWRoagKustD6\nkkYUVBenn+utaR2ttRpqsAAN3UKVz/lE/a80OzX4eNS73YoUCR/Az5rAG0Uy\nIhw0CMR1bMkvmhfQuWxebfN5iMRm6oERD3gtMcdQT8oMVCncXOfYzBvrZmuz\nqcWKd/sYVByghz9cO0UisFOG5KShutRp4A8mlsr2RM21R+6Pvx1H4ohGGWxX\nCauf\r\n=WfsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFnhXv7mcbbxzDLXnFaQ8xV1xB8a9DO5fbq0ctqEyc9QIhAJ+mwTJsbnkbxryOG9QEKzCxlmRE9LZp7kp2dbvlfnAi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.c94e1030.0_1620860982856_0.7893483963481913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.40a34e35.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-icon-button":"0.22.0-canary.40a34e35.0","@material/mwc-ripple":"0.22.0-canary.40a34e35.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-axL2TWzYYH17q2H/ciQ4nA4dprYPBnNh1wBN9E9vpB66NBLy9vNt5JHYwOLs39pNI8PGobAKF9unWBbHc2peOw==","shasum":"b18d7372d70b922fc6089260e8c46d705c9dadbc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.40a34e35.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGu8CRA9TVsSAnZWagAAC8sP/0F4SHWlHJV1ZHs9t56x\noGzWaW8MoYjEQCdHRDyCyJWBPk2c7DprvkCEeYc2zgVCdyZcvZWCbOYK5SqU\nG1TkGUsUc9+o9/eL5IihdW07M+fL4Ff2miT+58heJjEXJwz5XO4GLHdexXt7\nmmw1QcAAhgNV2/mKn+sC1O9BDoTozOGyrA2k7rFuQJR1MmhdlhmENvi8VP23\ngs9TU+/qC0Ut8/bYJvLuj/QXHkQU+yT4cgsTRdw95llsTpD5tftFXea2j8RL\nHi79bKgEABibOVXdYeef35lsGXygimJPiDIcWI5/50aG43xpD11LbQUn+M8g\n8DQ6ELE34T4nwiBP1CqMyFgeXMnkVK1lANBQoBuDmhz47gM07Ysx6W4BdhIh\nM2+QksihM9g0/ZwgVHE5p9YZX9P3lmGJa2uXNcBkWKYY5TiU/dedOpLrvl5K\nC2MTykB1b/5AL6QQ/iKxbb7KAhx/kSKUHHwnzoAwGDt2ZlKv+uhsE9XEQPE+\nnY9xh0msAC3EajwxZ//I5n3pAfY/RDjhUw9Irbzc2XvyNT3u7FBAojsRIZa5\nXd0nV97Kht9V5uUTi0b9d4TIXaHPTGnhSf/BvpYKQFHWTUIZ4a66oZWrNj0Z\nJXJUXXfj330S3ODwbCq/SEda8W0mKIILluWDXGv1z2Q/lGQ5AtfQONM/dOBJ\nXykM\r\n=MEds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRO/DOGAAg/X3FFPiEv2YkeiKxhmvcuhuqmZDHFd1jhAiEA1NKyoDnKkuH5XJ+a9H3vfOkTl8S136Vuh1EnvObokT4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.40a34e35.0_1620863931675_0.5550321355971706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.1be14d2c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-icon-button":"0.22.0-canary.1be14d2c.0","@material/mwc-ripple":"0.22.0-canary.1be14d2c.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/h/QwJdjbNjL9riHU07iTHYOIOqZP1nMhgN1Kb9+gvTDtui7v/3OcvWECRmVXlnjCkPIUWXOBHXqnwyPnrebdA==","shasum":"bff23229697833b6c5376ea1f736154c1aa73510","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.1be14d2c.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbcCRA9TVsSAnZWagAALnAQAJrrPUGB0U/Q/EBkUGvq\nYUvRH8qP9eDeGNYhXrarOdP8emeFzzoBJWwma90+1YygMfFaRALis15Oq6uV\naVWLSA8iSfNjPkLSzI/CQwrk8rRUzrSI92FNcQTJ/gpd4Yf0555WrbziGW9L\nP9bzizGh+0iECZr/nnSF66Ju24bibDtWtQ91A6TtQ16cuq9mn2eZoRow6uw4\nrHbMTyP/HVINJTJ4LcI1tD+6uqeNN5WV0tn/mQgph4yHnsBXjL6ifxg1xJD0\nXBIgGQwbWM7xuCS20XEMe0Wrdt1n3LYR8p3pt9IaM826slabC2HVaojJ/m90\nIs95tlsSJHpLeFCVPfU69xR4Q1tQslUyvrOFurg/RkpqGLzqnNIb5IU5pM0e\n1md2iV/PTnmg+JW751LizxCbhaE08y9kysQKy9D8rcAYybgmQr7sUKRdbNZ4\nA32kT0qjEji4j2+P1VTThBqgPIKn3bdThnF/6oOu0Qe992PgemK+RZ/ICcHL\nU7SjsL3wM6p+8h0W4/8ZRVkt88YFBlAH30mq8hIVegeMJW/7Nsf+D5MusBHv\niVpruZ6KFPkl1VbwPOAuBpCJwqaO66/wyb6X7dY8DPWaaNHKyG4S4LLwORt/\n7iW0tPjN70FaW37if8gy2NjyZ2Yqph/LURJ3h1kaVumH5u77QdVe36xifOmX\ndjUY\r\n=Mk9N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQH+N4nmCvSQDHITUklZLFdmPjhC93p9bgOnPE8PKJ9wIhAMmCrEc56I9bGlEcrCfKeKOFMiV9uyXZ3XLISd52/Yni"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.1be14d2c.0_1620928219548_0.01202309078985353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.87dbd64f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-icon-button":"0.22.0-canary.87dbd64f.0","@material/mwc-ripple":"0.22.0-canary.87dbd64f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AEBXEW/m3mD0MFedIhVsjWVqn07YIgr7YjQbyb24r1qvILeEQqi/r+/DnXgbGjfnc4q25eDs9Sa6JCxd7b8+9Q==","shasum":"0acdb93fd6eb0734031ca8e7db63cfd91aa906cb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.87dbd64f.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSNCRA9TVsSAnZWagAA+BcQAI68YvG0+aVlJc91B7Vn\n4LDX3HCFfhY+Yz1dl5GvBN+2jWguVGLK8yw93nQ+Kn2/r15UDBDxFID/Yqdc\n3v7LeszWo33x0NG1i/i5ceIUxQItrbzIpf/ETv4/ccBIIc9IEkJFxtF+okyz\nklDj9yJ+o5Z9Ag64iWtUiCNZ2mKsEXWPe/kXHmBkYwEwSkg1Bi15WBhfDBqo\nrMoMaIcna92dFxZmG4cxZYLEolqlloAUta+tJxFu/XYdDW0bnJNtjDWroP2F\nYoC8Ba5/feiuxXM0sMJpJ6TGYlK81Of8+plhn9Q6MK5p8oYQOJJ8lv87TdBr\nCN0kGAXiWs1oEZfknrW+I6KESsvrFd3uTkw2DbdVh5zHHMSJNchlRG0Q6+D5\nnHQAycgRt7nI8/5jCXsUtJkaOqU480SnjEs6GGI4lTuywnhAd5BRo7mKA6jX\nDSRhRFWRht/eQc5RghpI22XT142zwcNu9RnF8vZZtwP3CQ2SL4ylbYFIpY41\nPSbRfEUGYzNcoDgG7ABIkuFhVMjnqtrhTHOd7PxydjSfQG93Ypd9lg+K/ja4\nDoXG9dkjwcvCyActw+nwchB7Zmchz+/EoSAVtpA/aN3nYbTdKQqUsm7XSJ0G\nc5V4IW+gOBIpjUl9xJz2uXIlBPwg85ADo5R/dwfifyltv7+JCFqMvNVy07WB\nNVVv\r\n=do+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE2xV2esR29LGHSFElZLO8Kf8PcspmWvrcY0lYyJvD7QAiEAm7nyBCqfgr3ZV6f0dsjV+dDkS/sSaCMu4rRw+SwQhf4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.87dbd64f.0_1621025933267_0.43236956238906643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.c452e4da.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-icon-button":"0.22.0-canary.c452e4da.0","@material/mwc-ripple":"0.22.0-canary.c452e4da.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jxKNdJeJZ9URECww2BNxNIRe8BH/o2a/Fu+WqDTay6Qner0iO7ykBOHG3j5Le5DpHak42PnYn+dKqg19uJGEXQ==","shasum":"bbcccdcf49665c4f644a8477ef35f7e447342ab6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.c452e4da.0.tgz","fileCount":9,"unpackedSize":41533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0NCRA9TVsSAnZWagAAV1cQAKJz5qRqlJPLAo9Oio5b\nosZ6je3agURAfRBzHp6NUBo58kzSGB+TpWVzkSrtNmfZcOAzv+6yT+Z8Nstl\njC6Q8Jutkzv6/xiGduf5giBiDQfHCFj+7SWjxSOtbToK19C0OUlVJrmWxFta\nVteJ/3kcIuJ68Q2gIOTt94fImou7OpfKTetiplLTZnded4uRPnkAD20h+9Kq\nLx7Xe7OAOti+ddD/mrpF3aC3pVlE+FjOlUtLQlBPkZxrPGayYgQycy6Ad84N\nnTfc/S+l2DeikPUKq9BagY6CyoZ4dfr7C6gr6Nm9f2t2GymFKxt2pgQy+gqR\nHa/Mvq6Wo1e27poyzJyz+C5HRsoyx05iWzV/65aiw5gyyYZCIaEcOdfFP6OI\n8dkPYag7Oijqg9prFB97OySCbCMfcTC1pUY1xylzvSE2n0uoTEoFu/nXSVoc\nxDxMgZXAc/6PlUUa/f52POt6c5Afrh5m1l6N9m5z6ZlMvUuHOj+9TnlUm942\noeBvwWBxnqwaOtV7UQ4nZDjSooT/IiSwdpZd8YZJAt1tpX0R33f+PHQTCKnL\nappnUOnax2aZUsxVCfmuo3wiPPZ5oJG9LPu46fd/KimHWuBy5xl2yc3V4A2p\nf2RExXKvaxwRodGsgtYiNvUbJZabLth80dImDQuDOTsZAdDKWfJ2eJkIGaB0\ngcfm\r\n=ELk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDNMiAtUb0gqvew5ftbp36hTgHCDgZ1v9CLiXkfLRo7QIgQbUOm7kERbX+6GOOFJEVBWNWJ+GJOTNvOwrFNSrk32A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.c452e4da.0_1621294349370_0.829363599860047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.2212691a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-icon-button":"0.22.0-canary.2212691a.0","@material/mwc-ripple":"0.22.0-canary.2212691a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aZX6+/48q6nKmaXm0GkvdmUcOhfc19zrSk2/orukSaOMvYY2GAHb6pOjAcUlFSIXDpg+/Y1NBYJLVvmM/j5fMA==","shasum":"b4dfaf7f35b8137b9e56b5ca7d06f70d758b7853","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.2212691a.0.tgz","fileCount":9,"unpackedSize":38355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHkCRA9TVsSAnZWagAAlx0P/RkTYBaWYD4VK0qCAKGH\nG7jC559Rw1iuqe7ISpouahv3tWDdLCZejHpq4Rgdq/7xHWyGXezUgc3clJrX\njNKN+B/2Y1InuFRX9pJoeWUTV/aiCcM2DQmi3woVFF12mM4r3SI4OLni/QVz\nhXCRbB4DH2XFYLA7c+dyx3Zig+qc+iVvPbCo1kXDoxVHPa9NCVoy8l3SKJTc\n0WL7OeNfLAb998nIQtBsAqw+prSaiTMndV/qnELXYyqfDIrpwU3VzAI2KUIt\nBJNZAbS45dQSvT7nUC4OSQKqHI8PLWWcc4udQbkTIcZVHJhdq4CeIwe/NWix\nKbfd2wL9g5EU1NzLHGOxP5Ue4Tmg2ccA7P/rcUmuQqnI7mLyJ1+TddYmFPEj\nUkPN6UyinLC0354WGEdqBWzEf/6Z1GCeComhJKDqdLInu9eDU42+re/vuZpm\noRV3ayXBiu6van4nnSuzJJM/OyCTLghaXcbcOPvpKvXuiEg5Vg5/qQBgvkc5\nzqIscJLBD/wQn39MZUmz0RPIjHLlFz6TeGybdW8lUCZsDKoeHAT5NnCesagr\njyyMAZywtMJRMnpKztKer2bVFDIoWeg9gZeGzk/5c9xKzopMHcSAJ6eArYhJ\nvYOc0GNsxtIDEa2cIR2ocDpjWcwXuve3krkSora8WatyaHg0/NPm4QImFggE\nXZ9P\r\n=HrdE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHP9M7IrasWpWd097DAMIPRziyz++OdTdFaqCicfer5RAiBetNODqqHfxct8RkSBO0qvf6JbOKJRVc3R3jU7oS3ZWg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.2212691a.0_1621295587877_0.752336460843744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.f748ff2f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-icon-button":"0.22.0-canary.f748ff2f.0","@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VgWsqMqV6Fux5LLFNJ8uOhze7i2CDTgZfZrqQEv3ccb8/xDpwurmffogz1Aai35Fs+53vdBwDeE4v/x1cFonUw==","shasum":"1b963f05cb694493aba5076b3b5cb405dfb14a5d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.f748ff2f.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjkCRA9TVsSAnZWagAADaIP/19N9UuvxnWDXQwzBfV2\nR7KakxivHdoCpE5SEdyZVUlfUsCxTr5fLmEkse6+ZzHIhXzIH+WaKqjdPhFu\n1+Ov/b3H5fn9rLeAbSAmYWPmaBUMXMxNtajm2dshSloE8IZ2ImB4ttlYows5\n0dDsUZKrftlPedH86jaUGfB2MCgTxihbhisH8ta/jNDxBcdpAp/1TfYrrtHe\njIQSjsaiBueYgWMlTvmWZRUHT0s5ABFb0lSiCKut5Ir+j5gR5V8Y63xxhLSj\n5clUfon6Cgi6tK5/fYs5FXEDzovphAuu8S+LzZUCgHzNWhUuaetL6ycXk5HI\nOLSmSMXywiv3pLIPUFDqtvObfuMceTtEIxmGOTP2xI1r4JiRWxdgCAO/ScjY\nb3WPsVsrmLIY4H2ADh7j9CaJf0r2k22u+ecN72r643uPayxBz0hQaDlvh5IL\n79cMWYL6VpTTa9hH/nGt3DYZALGrCA1M/WH8OjtC7IGZbR+zn6MFaxYdwagP\nAslOZzfaNeZz7vpilaUKbkZzfanZJq9z/cNRqJdjlzAxZwv6dKyZuy2jwl37\nFWGjqIz/kJ3rNgBLkkU3BDsi7oGSPAbrP+CCATrQA9DopB4e8eLdSXzogjbM\nIVuImmMHqJzlBbZ8nK0Xj1G4oVV7rR1nMTrttQQLb6+0SkYlMNr6NKpN23Yl\n2HfM\r\n=k9+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFL70UqoHgiF8cItqXi7QN0Ys4hhfqAVMMuynbMaC5CwIgZDDHKuSc/UJfX0KSRkfiYds+SGYmRfTGZNOgG2rThws="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.f748ff2f.0_1621297380294_0.5980215390187553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.cc04657a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-icon-button":"0.22.0-canary.cc04657a.0","@material/mwc-ripple":"0.22.0-canary.cc04657a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CTDbaD7ytwzIpw2Mp9vvbfnIzAA8fLtGnaw617+l9mkfitAwpSpVu3aS8yc8G6OIYOEoB2sO+W7znm8NXoGoQA==","shasum":"210b741f4472ef5aa4bac29ee3a928c6bbdd0784","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.cc04657a.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaTCRA9TVsSAnZWagAAtBYP/2IBUpggUWdIkJc2YfSZ\nWeT1X4HJ3y4IGFZAieLEJs+RDszun2/SivA/JPyRf4by6dWaq0rxbG8SLkfq\ns4aSjOKP0Qne6fk0+8T5n/X/N2UOFxLbBZ+cs2yfbK87v92pgV/uL3hwiVbe\nMoT/Nv6SevoIXooTdAd2BOCbcaQ1QnZt/tPDAIyxdkTQjkbmLdKgOGHJa0/v\ntMuFs5vyXVgEJ+SFzZARYQVFGzNlo/tBloPEoGqrSbyo2YQZMLwywkwoXJO8\nDEYOEQe/mTL1vbfAKq4OgvNmeFit9jLDJyoLzIkad5l6foqcVsZjNkUVhBnn\ndKRNqtBuggKhJLJAwPFlEa98ngD7sPxOce94l7gkzI3p45fBVa1LtWc4YhAU\ny7OpOFJGXXz7w5W6yF3HQWYReCeg2RUdqq40iZP5uNiVZfXB7G+TLCeNeqAn\no2WqFJyOu4hVX19KXsjHb+DbPzLFQG5ZcKqWkPYLbWA1BY7lF1zDUGydy833\n8JQ0HXxJ6f0JARZTq+dTzW1754qEfEfk+Ap6o4YqS0zOCRxC9nNF5Juf0OB4\nZr4ZYveZGMz1/JxDHF3UhjXVFhKMnk0/ZzYhXn9MpTVtHzIDAXtA8evW4r+s\nGdaCvX2U0Za5sSR+vDnHTDhWIfpltAr3UnP2MIfxpEarOOD0zlu/kgvCvx4K\nw+lz\r\n=UhQV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFw0k5ddKdnWmpZtsV0biRNa7M9FvFjenFQpnWXh52dQIgEfxpUcy7XN+845YzZIuQe0Qqtm7tkhha8hthj2sJCqg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.cc04657a.0_1621300882630_0.8076784234830119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.3a3114fa.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-icon-button":"0.22.0-canary.3a3114fa.0","@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/5bGXeLpgoJjUL7AZ4/z1JU1gNy0gWXGn9VlWrKxMYuPb3HmZmlNFLi8AjXzgAN3Aj6x4mrALnOj/6wUv4AQ8g==","shasum":"2ff69a8a0c090e959c75470bc3d1e3f484eeda68","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.3a3114fa.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaH6CRA9TVsSAnZWagAAzlMP/3nxYIWtKYBJ3d65rAGG\nx4+UoklSukRKAKq2wy0BGA6FzOKwe5KTd7mAUdavAS/cJPpfxPRj68g2cTKQ\nAqwKfEnPqwXPtmZtRMboYzyNn5UETSzoXORV+HLT4YsPZdB+jPkX7yufvq56\n9cMzcFm+KPaE7jzhSbTdW4MIyY//LxOWG3BFEIQVep4PSCHIi89jmNjhR7rS\n0CfqSkF0cdb1au7opMvW9cr762w7JfX+vXYWAyOSBr9l77B4/kpGI4I17gGa\nQJUqhD7ftxwPTDuMJFP5QocnVf5AVtjycoHMnj+CXMMO+zDmL3UO9PCrpUve\n+hqUw8hqclyKX8hcxNOzKC7MwgF4Wun5guo1XAcD0WkPEe/Sj0YHzlgY3S2p\nOzLm3hfXLnT96e1sIfHa8T65MZP4IrHmsllGJWEU68jv3GBGUzApj5zJrSuQ\ng567jnSIBIOPVeh2p4my+LovSjwMCUVO6EJtoArk4kWgoBuhH0DJtWnRnGDt\nJzDzgW9c6E+5mTzjdtzvB+EWTGScxUvcqb9WIDvqfo0bIK1fOISL2wVCjXrp\nj13HiWhoQs1uX1cX3xN7o2cD9AP+tuLWbdsmni1saoYngiHA8+3yUX3liG6h\ne1zpcvHU1jYP90RRqKjAxDbcZPfxJIBT8sUUaV95+HipbzNdPXekQtLH/MfT\nVvQO\r\n=tRcU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASRI7fuMXrfvXOsDLoiTWhHg3nVm//E2KXJeN5Q67y1AiEAukzukbiFdrKXVIY0ifNIQaCMHd79GGyQjqyHC0G0x8c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.3a3114fa.0_1621467641836_0.735184241571802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b46bdf83.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-icon-button":"0.22.0-canary.b46bdf83.0","@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4xGoKlPFASDDxc50lkwWgTojZgVbNhkSNEbzjo4YULEflWrIqsSgM74JNwhOEu0n+PhiHY8Ue7LcHVyvuME6+g==","shasum":"f8d8bc4ab5ad50cfbce5a23c3873566e27ad1465","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b46bdf83.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCjCRA9TVsSAnZWagAAjlsQAIDfHejahFiFcdsMl4Al\n6uEotCB+VdGRKd1Uti/KpXaImEaXRG0iiT6C9PXwjBQEQBdOYrWcndiYCjpz\nP1SDP1gwyHxgrgc+VfYeRznXilmGFKPawrYe3rjeOvZ+fiap8dmtoVK8ah+l\nqGwmVglKzVelrr02R/V/91ymzh5n5ubvBUJZNriDvO0zoGjTmmqygtnR3ory\nxtbzoOEZRsXMhWp9WfYUlhTzxoEZunSsl8s+u3s843GOt3QV4OH/mBBK2bi5\n1kfuv4vnuo4M7cC6Oyt5E3L6ffIyMp/PA7MGCLDNd0YLpNeVOE701WuEJ8q4\ngXGVCpR/MXrLceCtk0DQHlDmQB1LJVy2wD/kej5uNqmS5ekTEw31KVKfnHmz\nBX+8XVaasn5HNxW3mTxUlRJHW1aTBViYP/ANpukntGCvGnHWCvsLXqDDWrr6\nBUlModFdtu+k/SeKGZSRYBSC79ZjbiJLpOFV3O+4GTcetmR9mkC1ZdduDcrD\nHrdnQcuJ9It5J6VripOna0kA10kvYOiEplCbFHEGyh+U0F+K222wNEUbZdtx\nj/xIyd9geZZ3ipA7DpisKfZK4l8Q+T9fVmegF8sX1aKMo+nFesNmdLxLOBes\ntQq7Z5Lw/RfGEHOPp9QiSXaNZ5pfqkbhwSiB3sVmhdHcOi2urlxtiDi3WM3J\nO7Bn\r\n=kbzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHN3WuEI6TT8pL+hyg+k5sdZFowFAuVfGPrMUrRiJRgDAiBPEM9nIvwgKaLpvoo1zOxVd6saPBusz416kfRQW5gMrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b46bdf83.0_1621475491381_0.11604027551842067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b401a081.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-icon-button":"0.22.0-canary.b401a081.0","@material/mwc-ripple":"0.22.0-canary.b401a081.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e2edBglJlHXxfJatv496JODvJyHDIQpq4obaC/oRCrTDoXp2hAR0VnTPvvBCsKpJhKZxhd72IeSup5s/5ZCH6g==","shasum":"a784d802b01d99022e08f56f73d9d0809dec887b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b401a081.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDyCRA9TVsSAnZWagAAuqgQAIqRzLKsWXoKxJrmQr0Q\ngJB9f/mZVZxihkc9kVMNGnxICIiBa2zC8zEtD0zl8O72Llj0Z4JjESVWA3U0\nuVS3qM8QickyL4pLI45v/1ahFlXUdp7nzw1deu/lu9x7HPV6AVcX3xrMGphy\ntGZPDxxtzDM9TnSrkGuKnzSYOw3xdBu6ruWYkcXmszziDfnwH73+0Ta0OaPu\n49zKsjX2fEpqZzAroTP9IfzOq8Dex6IdzSf8oyyRhiHb6cr3e62iwL2dGWWo\np1kBvRQnSutzYxO0vpBmJkh+94g1MTALbLlJEJauCwsE0eE8RS40DzGAYhqM\nrYqsas+AXfP5kHxHQypn8tUdr4xaPM6gu9PY9zdndHSLDXaA+why7zPeRV7+\n2nXnhJRjM1gG+4U3IyDRYUAgE7I6Vo8S1DkQ3zueaBgDR6rrk0ByU6WqUeb3\nS08ZRY/xiuH65blzpaQdyr8ztQQNuIoFY/xVy/Bqtx/Xd92FxtXSBHl309cM\n427CPxpfovvzITEw/0tcBI0xBlXZ6ls5PshdORZ3GVVnufLiXIondejEbX+b\nvZAuXrYMbQWCqBoiX8cREtDz4rVk/NKmAqp04MbR6DLinTOW4CLTlnRc2a7c\nBwxJmyrZGb6VLaxXQ7OOgaOkmukuBCu/5g/IiAb368LYLYP2A5wwJRtzrlQA\n93Pu\r\n=aTuh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvTgB65snCTZjjByrAf4AX4h5i8qNZ8fUiJ2mjE1hPjAiEA7qSvADDOqe11F3uPCQmGEPOJUwm3jEKzvIfaOOecMTc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b401a081.0_1621639410362_0.8426512165244853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.012c8dc0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-icon-button":"0.22.0-canary.012c8dc0.0","@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2yq9yvI9aDEgqVLUdqhOCspNRAuwR1Ts33N0rN4VGRKGibrSu0fgCzaHmvNBWFP2uxsNDlr+HXCxa0SLUPX6kg==","shasum":"f73740b00e16d34c3f8bd9bababb629075ded707","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.012c8dc0.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE10CRA9TVsSAnZWagAAX3kP/2/1KYC1W01XJpcQvdbZ\n3W5Vf5cRHmRhPfSS+Ae/hW0UqROagdI9Gsd2xMrP5UjrCWF9E7CwumjEKFoH\nWKGl0uCjyxi6j3RvgbsMzmzls+f18alNeNNStdUh/tg86bsHIMyx3Xmk/ZUG\nhX1PTuJyGFae59wWJAf+jWrSgzB1N+0NhaoBqrA7c9Tlikk3/9GnneIjYKw8\nTMxidHRFEngXEH3ClHHfTUe7osAGNsh9y53bRYANwrfFmeBJGifo6B0oDqQ7\n0c933gKRGIcxS2c5DAV5YqYAAgmBqTES6D7HK7L89QfJp4/FHjdg8WsgQvSX\nLKPMrVIFlUo8/hUb6TnZfQkoxbyEnjiV/ISLNSPS2lIjdKKjusyAysux/Sh2\nQ9PKX18X0G6QxEbMOvbPOs3td96t3tfVjx+Uf2tDRVcvZVuzXxk7xrChf9PS\nef/RQzwYOqyqy582eC7b0/W9ymouQ5ZjComBpFxa6AEcsCt0qOHsk0dScuZK\nc7CiBoxB6Vv3v3YF1PTyoxpBct8xaiAxNUCqn7rEtRzLRvZDBMOY2fN8Ebod\nsTfME7rqxrHVE5BSdZ5ynulz04DyyzBVgpXuhTtQjNdrpMYquZUgVADzlk6Z\nDJ2gUfHEILFx9cE4k8ynq2x3WHu4ePdKdgOsf9X6tItQLcUFCMHrrKsS2hsG\nIENS\r\n=iRbf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtEKe27xFN9FgUv8x9uIX4ZaVXHe7LNtqHaHD9gUor5AiA1dOMyFkLsMCxPQWqPU3lamaOMTy9dc2Xw0U52evMeow=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.012c8dc0.0_1621642612379_0.7922038913541485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.e01a1731.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-icon-button":"0.22.0-canary.e01a1731.0","@material/mwc-ripple":"0.22.0-canary.e01a1731.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KqInN2htGSa4JiaQg32bS3P+PwjXJ7HRYv5INPNMf/u3BnbfzD1MR9hlRpb432u2XBKlAF9bICThdjPsjtDfQg==","shasum":"4d1c5c7d1775aa049ad5e3e850583d70cc06d0df","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.e01a1731.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq85FCRA9TVsSAnZWagAAaGcP/0tJdFwWXZZZ3XJI7M6a\nRnUeKU04Y6uSlJLe0V8xJ/jyR5ZhCUUqtfQAiyQ9ZVlPisdg4ifAkq3bGuji\n9Igzic3XlDJRnCjRs7H8q27u3dm5ag8NujIFiKs72gR26ed8kH3xAdK3laLx\n7QOKxuUwUyf/UfFZkAgShPtK0Z3zwdaM2hfZMupvc0ZIHis/rs9VVFQZv//m\n/GJDSGN245yApmSvDrQBSskjvmGSK3mHLR7ApvCGjXVYvD4Fjr5mJilNs6zs\nRyITh1zn1XMEFEUhf8nwIr0CuErcdTM091k2/IkP4K5Hd223LHs5BwYMvMpt\nFAbVxBzeV4PtbamM/Hr1FrgpZfL4nDfImL9eERUZyQgOkVyx0cvpCBuLiyAr\nzI51WPxhs8XBrIITN0KydtlHbNdCW1mjFSlD3FKaBByTuygagPhyaJorCgt7\nAOs3LZuw/IwjTsfWz9xz6Fiqnr+zOxyXOm/AvSwQWN1etoXr4lwqpQ3C593D\nm83qD7RLpLISbN9WJ7SSVUMQk+C5OvIPQDhiOsoILiYwFuqVQmbkeyJN6/+m\ny1uXOFbpa5c8QSu8D2jgpttRDr9hDcQVkxnPHXVk8Qd8F51tzvP3MkYv1XG0\nP3iw6l3sAlI3AQtUyWq7tx13+OQYxPJFoeS34HYf2ZlMlaCBmOteVRDG/A1m\n0KeW\r\n=XzIl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxczyQ8YLd/RhJNdGb2+536LDT+siXtEPNTvXFlULfbwIhALbiB5mgayDQQwUnwQ6LeYpkT0PwOKU/06FU7C+7Rolo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.e01a1731.0_1621872197416_0.283449153857382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.59174b9f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-icon-button":"0.22.0-canary.59174b9f.0","@material/mwc-ripple":"0.22.0-canary.59174b9f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RutShJ5/PEP626knyoFs6paFz81GMOj1aZ7qEFWe55H2GIATxW2nZHneCYFHRnjprPME9ZkpcfY83tj0AMeb5g==","shasum":"7ca05d00e383e51a2e33eb80f0a1f0f2e3b5bd75","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.59174b9f.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTvJCRA9TVsSAnZWagAAZb4P/REfzYNDppIlvQSyB8/r\nH9EEGPDnYRGOWVRG4Cww+rKtMyE44ujXhpMwvwOLFj1xiaAPDSbSk9YXf07f\ndrMBhcXqXDJq0OjkEfcJu4xvGbSsSymAOZ4JqjPWFWOibeYSk6qOKOu8mnXg\nHUjK/C/8V8A2MJr/RLX57n5a/X+B2euOH0UcyweYC3mc4JXc5f20XQzlAXa4\nw463PCckNlYcl503WULYIBUy6U6j5BwqBVLPVejNI30aY3d60BJF5Dp7G/WL\nm0X9RS1xCeH+PCK+wVXJReI15RZDGnj4cZJmNaYszmdlA307tOxEaRgCVfCC\nZUMCP7vjQqy+5RJnMttD6EzJMgLhs/iPSxY4fhi39tk8VFU3B4TQYYEeM1sT\nc1SzJ2iy+C3ba+1lLHdsVPEClImoa8aPjHUVCOfeSphBkTQfAUvl+TpjZB7X\n8ZcKMjS8Vjh16wcno8bBXhIxvvzw4u7CMJ/9q2lHUiofZIucOY+8yoGFnJN/\nf1F8jEC6AKB93x5cDV6+Msjd17Fy+Kk64KaG4Sqeb7SuB0f1ZdXExStyq2ta\nh1znjjghyjqPsEDERN8e35xfE6trSWsNYFri7sy6KwbD7kwAD6pzMzeyCqGM\nfSyu81QV5otG2qqOtcknkT+DLR3rZ5gcVzwTQ9sYhqztzmkSLmVm7Um2F2Ed\n54T/\r\n=KnCa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpQsKxFnjTTSHTxG4VSS9n1KALYF5iaqIU6W9HxbmjVAiBCq3aADS+Um/xvHTv2ElWau5o//+DhLeRbYup6+Bvj0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.59174b9f.0_1621965769203_0.47058209592797784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-icon-button":"0.22.0-canary.c96cb2e0.0","@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1yIzpC0WluUhLoeRRSpXc7VOCXCJV3jTj2WtYGERtYfrRw3ndhpmfUBVT4Yqm5Eu85P/IQY3DpWA0cU+eAZz6w==","shasum":"65ac7154398f25dfe1334903d174e2dd6c335635","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.c96cb2e0.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwzCRA9TVsSAnZWagAAc+cP/3LGFZnolxIRrTRnVjNy\npRvfmef0A2yRZYY1NKb2ZNqzsGPBF381bKvFFomOVSK71OPXCexdsREvppLT\nrFPOg5foeA7ipURV7RTG1lyjyA+WOEDRr7Cit33a7Y8NtXmpe3d/dgsYcNfX\nwNfDMM9nPJkDYuMbksfJNjW4Ooh21egaas7MypNFdd90xSvQyU5WAELhaUnk\nXzM8yHsBfED46+poHU6LI+RrI80dN2ePq0sylCytRr0HPYSiqN+QyvkZ3rMg\noiDKd0HV6ptF5/gS/NNRMn0zYNayEse/HjdbxlOqH7yhiGJzvzFDBWDcuFQf\nKBKGQcMWtp5Knl+7rpF7SUAfDBz8wf3w6a6Yo/lpJ3HUpl2L/mESV6aOq7Or\nyZRJBVXwpA9BOOdABWXkoiBkrSxfmKfZ5p0YENM05enADPkp+m9HBHDiIce5\n7qWvRKbBzbrxnY8LQLGKKtDxrrwJy2w1/Q2izRsDgnpprkNPL4pMaIqkfPNc\n+7oJ4EsAMeSDf94yB5smYg8Q5AJ2RQDZpTklw4pweha4oGKCMCd8y+G1KJ2g\neArG20j/Esa2mOsmUsPGFCPK++Mv6yIm9QSOERvp3jHznXm7E/pdNLR1cfwO\npU5t2HmK1m43bX9V2ii/uYDTDwtp5XoeGvvVe7Oq/2VhowDoNXLyQ+KhgePe\ngaTb\r\n=gdNi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwEDvr2RPe8RLCmeI8XtxOnyMAy1OJ+24sSP/SVmhxvAiEAtwIuxC686OTqDrWUwTURhRZcnvS/XJcIPbzXIadkPN0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.c96cb2e0.0_1621969971395_0.9190137628349686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b9b0e330.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-icon-button":"0.22.0-canary.b9b0e330.0","@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xR3u5hQufv3rVJ0mubytRwctQ8ci3jQ9ebPBrDEn/jyEHlP9lyNUYTY0uMdYE1vqtrU7hSjwkXugEmD3DwMFAQ==","shasum":"c603f4c41965e3ca48a4b470eefb0a44e3d3c001","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b9b0e330.0.tgz","fileCount":9,"unpackedSize":38359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWWFCRA9TVsSAnZWagAAqlYP/j05xznexWX+XiFvpm0l\nyIITushu83L+KD2m04D0WM0IwWoehC2iJfXL+s5fFQpW6z5AlhHqqwdJCHg6\nk/8sVvtEVhrvugzGwCyIs1U/+mHCYtxF9zUlylXcjuoRQeLPctIQR1VWiNPc\nQF6ArkC2YpIE7gFzsnGXAsGPxrAjF+aT++qnEDECbA7+FckgY09qDsbJ8Zxn\nbj+mSVSqQa9zDkyHBgt26p9nYTxmSWCQXQn5PwUU46qgkzH5ieLSopc5yHKX\ntcnGAljOnThJAJSBtQbfxzUEYK+w6KGfd3APT4y+sqrxreJv7JGsAqOziNov\nMjKFpToGzdUuktTPQopT3c4I+4KeNdJaX9DZRQpLB2CS7gr7AWhRoytDsbVh\ntZ5UdaLRV6EPBWhCzZJrrAMiAROLoN8LQSFWPzmM27Fvv+Cw++oNCiPeUnSt\nAZaEkAo/pos8hf13t4AIC1Jf2I6O6ocSNpMmvkWgtXV2yqCFIJrhmyFvDx6h\nSdbIrwqW0wyGrNOw/Q7KIofQRcDPSwsQJ8ruKy9O+vUqKTK2vmZpd2g9f5/7\nkcPpdoC6xzLcGaXH1f398MnvaZfDdlJt9LtI4dYpQzmZ3o7/0Y92UqSnwn2V\ndEusXzL/nv8lajbgzPgVKv1m0yT93OYePqe8ZBYuJ9zW3uvKw7DTRB/XrXNN\ne1vC\r\n=H3mR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjKFaSKDPBwhq8E6emoVbjzQpw9LyP6/M1NqUWczVEtQIhAM62kCo7Gy4EzhQFdjGQKT2QzQdwnYXAY+aqx3Pic4g+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b9b0e330.0_1621976452722_0.32774740770865063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.ea2a8063.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-icon-button":"0.22.0-canary.ea2a8063.0","@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k3MPsmoDqku7ZVpIatuXioFI3606H9Sa35O2ZSNEwuyiMwVSA44iQ/poX65gmjhpp8d7qj7efQMsAPbxloAmEw==","shasum":"03c8553712e033493f463e5741be72b4240e7e5e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.ea2a8063.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWa2CRA9TVsSAnZWagAAeH4P/jY/J1pBg9shIjnydcGW\naWKcVy+4VG2owE6jxXiF94gOQakl0OuInvz5gL01C5zg2W+JjF3UX4l6w8xi\njWvjAMzUovAbGEMwosaixV4i6u6enVvN3r8g8aeA2qRDSjDOeD4tSFZLTO+k\ndkOT60Wq6NygNbmy7NppG2S8hun9/5oJKLJEKXtTsUmp5C/utYT6jkFp99mJ\nUbgZBXw/Gu4nld8k66PKzbi6sTXBf2HLwOM+wxdt2Ngoib6in+jWKvI/cbnj\nR1EZsg68jDXHVjlmI+IxD3Jajtya8KhOcWtfAY2WrwNzNdAy3cJIu4o6cuu3\nPIDQpOo4iYpk6XHEzIjDc9GjwjuCxVnKzkZ2hMX8eVyRQnj7gX27MsdU8J2z\npCzqCx5lz8ssKvCgvS0RYRarn2bn9ZgsZhaL2E3SlaKCqNcfYnOycxqeMCHr\nSaB3KwaqbdVOlgC3Qa0Q7KHAVEl8oBTPc0vsTc4brmAq49XANyxyfN/LgYtZ\nog6LHvKFxQkFfwPAZok16FAN932B0S0QzgQQ4/hBVz6kVBpSacjZSiDTlT/E\nq3rD0cecbzhFR9tyJfCpAXMfZtq+NdsksngwrBQPzq2KZmWzaPHB84QjVHQV\nTs7is6Ua/xj7UNRycmA8bdy3iewB/nzoDWVXtGndV/KDduHkg+4efYEZpPMa\nXovs\r\n=FGRZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEfo2PSdcUhPbe4DKdzmCHAR1U9ajDP8prsO5jNqY33AiEAsFfw2+1xvHpS9dhmzU+m6QnYuOh1AEBpo8ODfWOHXQQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.ea2a8063.0_1621976758223_0.7005980710992792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.60cd9178.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-icon-button":"0.22.0-canary.60cd9178.0","@material/mwc-ripple":"0.22.0-canary.60cd9178.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xqFK+/ObAD2iTppOhAepUqxaeega9wKtIUGybcTCK/xzfQ5jnhu4tjGhdmj6PZremioT9CXDMknDlngFrmdeew==","shasum":"78aec995bf5bfc853a0cecf1fb21bfe6d9adedf2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.60cd9178.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTXCRA9TVsSAnZWagAAj6gQAIBSTc6XOz5/82fRkYjg\nI/FD2zo9EFwhAMRZFdFOT+q7c6CDSC/pO+viF9XL59/MEZuPev53tIB2C4LA\nNc05wTHCj2LtAvV9eCYpJqIaTHnTEQ5IUfHyK/Q40C5JVBuvOgVg/uweMdrT\ndYvyflqu4Ol6J80tYWJKpkWkDVOF1DXa6fueNkUX/bLYBtpp89976x96370I\nA1QhRD4/Q8O6koZmcECCFEIR4h+FrTxKj8e+9mAy8pc5XTNFROhg2gj7Cgd9\nqwMuAlem5pambce7HRsRFd6BRwAzmlRVfcLp1v3oYsk8j7F7LEcQZ7oUEDvT\nfgwBfBF5vVyMWun7YvH8fyaw+RVRXZ3QQorvo2339tUYYCK4ZJvplgwWaotR\nZfD63f3bEcALQoQDaML3LccCLAes9QVFq+CpTLxoM34JCxI/t/rkxEcxfQQA\nkN6TmNtTVTrhxRFZhdmm4g2zC/KQznfIo0TnDEwqv0Dm8q/dt5RlAXu3dxa5\nrTH+ik2JIGUhXswM4FuH5no156WESYBlyMwyLf0tWlnGQidPDJn/5jb2zJyq\nslvzHkY1CRrNEgahHTOvsvN6pUaiGjd5lIyVKqVUxRz6LlVQuym8oZ6dI+55\nYgYrh35XmW4/HVvf2B57vde+sFvF9P0wNUn0CcGgW0hwrjrf5fH2H3cQYv7v\nxU+7\r\n=HYNx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZ6JUIvhuhahDtBjfsFV0VyuwxUwsOI+1fOnxZxjxMBAiBl8PLMm8H5MoIfV+yDPDCi5Em3HB8Yjt9jABhRvzqHVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.60cd9178.0_1621984470846_0.5444575511049534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-icon-button":"0.22.0-canary.2e2c75f2.0","@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GvOwTUG+X9lqORGXOxL6hKeXm8em/TcqD/pPE16I4kzUum/ZzeUQkHMOK1Jq7ixFyPAWYLkUVM1WPhr+2FMR5Q==","shasum":"fc31d8f39ab557218d8d4bc742ab05f8122fe96a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.2e2c75f2.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZJOCRA9TVsSAnZWagAAtOcQAJcOINx4F1LWInXbIF11\nMTC/bl1/NVLpaBJsPqQX3xsgrrQYWwp1x4A2I+EL+OPkUShJWT7EMQ1G+1Si\nWkUzd6wf0Ku/z/CJMV92hHruhmooWB7GGkz77gAb9W4il4iT4p+y9DwA03VD\nI1DPSwF+crt+oDzC7x6V27k2kyLYKcRyqmhohgFR9Db5GLAZWUR3O2cdBHAZ\nBOIVOhhkAmnmGT4Ct54fVXov6AVuh/jstjYwaOJmoHcCJp8TXUzxa82SkY/+\nysjxvMUg01xU5VaOOLBuapl0/LpIAwqO3lJfRhvvh9fj6VZeYc2CiRay1WUz\n9lybGXNMGr5MR/bsScRdlaTt3K240wcI5sevEAeKleAaNbP0GNwIfvFrow5d\n2x9GZOcB0R9LrWuQIt0x2hZGxx/ZaPr/tpZt2Nz0C+65UEVXFQCHarKHvY9Q\n11vN8pueBDETd3uTbdCzD8wS9X7z+0+uvKiKOLNpKBBpxbNdCk5/X76DoRd8\nEEXvlBShOFUTGKrx2xTMa/r//ZKbSsmUk2bMHwzo/KkFdKeNbRonUyBnEnKc\ng1JhhmK2azT49nJqXdU1EykLiWA/TOssv86zd9R8b4Uglv1tq+G5pb8VPtET\nhJQdam+bGx7/KWsvooYBpsetTtGnhmJkMaDOBtUduWWxGrA3DUuP5xy2BocB\nu/T8\r\n=1poc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZPQ58Z+Ffcejq/PWUGRQr+zSoN9ELrlwOHxXE4PBdKAiAxayD74kjEHaBGPBn21RiAE9J+Iq5KbD44K+2aIPMttw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.2e2c75f2.0_1621987918155_0.3325247496806587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b99c77d5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-icon-button":"0.22.0-canary.b99c77d5.0","@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nuw8twrjNKzomV4f3PwwFtmob8pSexjkPjF9mDPllD/6ZQUIRKU38Q3j/SQwgV6TKvl0vNYNcaXtJrmllD/p+w==","shasum":"639b9356b69e1d1463b301091df37e1642473fb1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b99c77d5.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3rCRA9TVsSAnZWagAA17sP+wdUhaYiUrfiMVwpN8Ik\nQ6AYvdyK3Vr7Wx83xrfu1KmTiQedcfAgrbSq1H0mLFLL9ZYxdKDHG6wQGthM\nH9hegtDouVMkvZxyMeVLzdCOAgryhM/t7I34ner0EDs2M5F3di/0JPdLek/m\nYFX2XPtRzjCV3uV3QNCMd8ZzXKoICaOuuZv+VqiosQ4R/+u8J7WSfqO1MMDK\nwJv5YnajqRSznFhaC/Imz5IQfSK+MCYmca72dyWu0dnODIMEQaSv42ZORkp9\nGMHpO9QCwE2EX816ddNSNCx/CV8j7LgkYZNU9FgJdVZQtu6dJV7O8V0esQp1\n+hy5gwdOP6dMPqljMvRKhPHs8bzNZ3wbL5C66KOWoXRtIVWGLJMiRZEsEBqX\nGHFeD1TsbEeWm4tlmjnSKXtnWcO6HCH+ciyacCQMt7o4C7c9/DH1/S1Gr/81\npTQJkLRZAkeJzw5x3qC4zVFPWCOknSlaMi2gSgF5RdRT5YJzHxBseCXVgqoG\nQ9FoWydKcKlXCjvVgwi1ZUIadqtrW0Xa3A6z4U9Y7FKQoMUz1TFg2So8TGw4\n+edoAUy3kgQKLEnHwdZNVMkrbGfwX2bhBAauPbGUInIV46O1WXkQUrnoZw+K\nkR4y/8ttKwMt/OGCwZt6GKkdjQ9fw4cnSlJVHIrwI7+tQSWFrQOBXOzjX39a\nDVxL\r\n=6n/H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLtI0PevPSziIeWYfEYKtFJdxR7eK2riau1pvbc/TZ0AIgeVqCI0IQDruDwYTIGFI/kS9VBVbgnAfh+z7kVDEoqtE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b99c77d5.0_1622056426348_0.4317389478320608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.0de82c12.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-icon-button":"0.22.0-canary.0de82c12.0","@material/mwc-ripple":"0.22.0-canary.0de82c12.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2TFCuRk71BXXft3pY05VQH23dNaMPp9T2noTU1efXYtWFjBr5+gLF5BelQAbpd/VgqyYQLmfBWo+xbs4ADGYgQ==","shasum":"4eab871b89691f77332c780534ed4b6bda631881","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.0de82c12.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr43CRA9TVsSAnZWagAAtFkP/0Sg9KFaU+ghfOtb5DfE\nuCgnzcbHYaEfQqlbvsLJx8KyW/M5s+/12KhlcswlZuwBBI61lkajS1Jzv+lV\ntmeI4E3IOtn6r1gS0k61kWE3OvnmVz88sQaH7LfUEfys5V9Qaip4BlIOFoZ4\nx6SPw3qLk1ysGtsflqcNe7j9zdUuP8FM0TMrwb+mQwqzktGDLk1yo/PsGnIF\nzaD7QDWRT8NOGzHmxCMYr9NSVqUANaNDJWDjMx4sO8o3oo5mQ4uUoZbZGy07\nveX4gn0Z6abMk3A0ZZ/X4wRq1s8mpZT26ryfnTCEIpu3QJadPZYc3me+XPWz\nJzxqQhi8rRGBzZN/xuBZNHs1DiOur1E7E5YpAqMf6XtjbX3W5SwV77iogBJ0\nnA7yMoxZsTD7c6wkvLptteE1PEVbH5cdk1d9lc+g2Pcg7/Xb6X6q2xV1XyPC\n4V82dC5ECICJkeQYkJOCyVuoWX5gWER94pFN3OqUjaFRqcZXO3LFgV2mfH85\n8NIuInMSWlLi+7j9aXote7PgthMxTuT2MRmDogE58l/QdDOY5n2FOB99PCex\neL2CMAElA+Jvgz5FfSVQJ8eoUgtJChw/xSGq5Pzf1vehk+lGBLQa2iINoePH\neO/q9oOmhn9PxfJ+s5YmAYjPg4eJayp3mTZgAYaIPLVZ9IHfKNdXiWgtIv0m\nc5Op\r\n=wXOY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlMkHnP2qQi3FD5Jv3or6C2akgr+OHkv2J6CvMqQe+CQIhALJp3CRWIxMfPjvNP0xuCZL0UoWNuLRM/1ipyWVt8CO3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.0de82c12.0_1622064695358_0.7971140157304619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.227a4614.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-icon-button":"0.22.0-canary.227a4614.0","@material/mwc-ripple":"0.22.0-canary.227a4614.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/E3joqEFwitZM9kyEJD4nINYCyFAn8YyKuy6HdHS1iLPsgV3cREgQMqR6F0v+jGJXNZy1K+F0G42Eti60LH7mA==","shasum":"8e616319ea3aa30a67d6cc1ba7401b7b91f3d3f8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.227a4614.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LgCRA9TVsSAnZWagAAvYAP/319bRS2IWUNItJUc1JN\n5HqF7MEsYZ694UiT32V3yT89NFE4KnB5N/McOo3YNtA1NiutOKRooNWEp1BB\nu9LeXxRBTU1mOHJK7cQKnhmJ/V9l8Wzotm9YuPaVkLf313psv0ZsqsV3vUB+\nHtsIfwtGN+a7HV/Rjs3t6M0vOg2On48Eo3lgech5M2DNOUPdY5I20x/To1qF\n3dheEdxeJv0QGB+ht/eDk+e2JtX4croe2R8Kxu7x1AwUDznJ3aEuP4T+xPJD\nb9s7agepOHmm+4JyhMYE5Fr7WptZx5s8Cp803e8K3RPcnngTliwSM3zCNbob\nYrF3pWXZCX5Km6sVtioVZE6J6en01eN0sfwZ0zqFR2fA3TZ4Xu8ZJeHS9yzl\niWHGOSonEWaZJOu14bQOkx8BMF9ekNfjKX1XXASWDYrbgOo0WLCck7MXrd0/\npjodMplzm9DPgPwo0Mqm4qb1OqX6Dpysc8/UE2rYHUt38HziAMRVmWf2aFKV\n2mbdhkP/z8jCSkgKoiLAh23+J8qIwFVq8WYC7m1KasXVfzhErFsFZFAmxkB0\nBMDnWi2xDJjzyvWZ+z+k0IcaLsInRMgydwbQA32dHWqAmn/WGJTPtdNzS/pp\nKpfOUgmIPFwBW6Xiw/rPS4n2a5GqIM4xvbMYCMZJm3rlYLpqY5WsHD3v4ugc\nJpRd\r\n=bIpy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHR0p+pT2RtHDIBBMupS1nyZvjNBejBZtnSfsbgUimB7AiEA8Vh5uH9ulEEVdueFQu/Vd9Xcj5y/bUXNiWrWPC+fEUA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.227a4614.0_1622131423853_0.8609356113268203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b3d21d31.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-icon-button":"0.22.0-canary.b3d21d31.0","@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1cHnIULDFsFKPTYyOjiDV83jQGTakNvo2I8XlS5+iyN3+1Ql4FYIDk3bO5mfjInYZbwEXVaOqN/g9QJDgXceZA==","shasum":"fcc2369c6c1e68e5fc689b521b429b41f756ab19","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b3d21d31.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jbCRA9TVsSAnZWagAAfZ8QAJz/qcXzMiNIekOTdTk8\n2s5P7vXGbXT0B0olU7g/tpLPr3X1+oYyrs3jmE9A/UCv3OdoAWIQRZh/E5YQ\neZ1Ruoxkrtf6wQuJCnkG/rpyUGtn4Z0jCyP45D49em/qdBFIlS+m6QWQWMYw\n/Qz3geCw3FWg+daPMQprz/jZMMRsrfK11whw9UvMXywZsCS8I1sGI/5hyzT/\n4anEZb4jScDGfhjbr5AeyLUqFIbWmvF2o+R/LiVO+6pVFqG6ne4bFr1Sl3Ui\nAm08u4nNozhiWGXyohs1dfyAOXxBvBzhsCL0j0kejwih1ZD1KEONj6oFkKZ7\n42n8aYamtGozBLFqJTATVjlcDfcLvj+ClPgw//UcGvk7AOTd1hQpDGWHhi3C\nuD/OiWjKu/Cuf6wfLJlDORDEieJVHaRW9HfPoMVZmawgm7KAJwvOu5RbbD/u\nxuWIf6EXhZ2fPZ2gQfVo2piczIrrxEVb8aXvHm1+7pRDxI9ufN6TuVWgVtAs\nBqRgeS6DUUaIlND/i4ks13zmn20L53yIpjnW0ULMf/dIV+1uCirul2AzCfQS\nbCFDZ8nROCM9/qQuK1Rd1R0R4e7YQ4GCQo6bRd79zq70guxvvLsUZf0YEkwL\ndM2JpPUGIxk1NRAnXESZtF/vukL+MwA6NruRf45mbt0i8gwVTFmeOBsyMhoS\nArua\r\n=o7DI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgWITE3FE1jdT8Zy0rXCg64W29TvAu0c9Ip5LCD8+3rgIhAML5/Lp9ORTFO//GbGqJk4f62x8CkwIRRDGZ2M0owYMY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b3d21d31.0_1622141147141_0.7229991604442803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.288c33ec.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-icon-button":"0.22.0-canary.288c33ec.0","@material/mwc-ripple":"0.22.0-canary.288c33ec.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZKm3A/Gi1YY4M4o1Q8xeJox1UeS8NscZikjO7jVd9rSrwbH5gL88MmIlxPgy1r1CF15cLFiDVrIC8tGg40MRrg==","shasum":"23e4587969701cffa98f892633a76ba9c28a5d19","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.288c33ec.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90PCRA9TVsSAnZWagAAtYYP/A0T+Mbnvlj3uIMCP9Wk\nXIuuLTrWX/joYgTw7TB0MFVDBbD8RklYWHcvXywg8MJAXaNjyha5NjKhelKK\nHhj1YMe7i7HQy7numbQzGa7SFyiBScIbkeuNx7545FJjMlYwYgpF3ij9m5VV\nmepOWkyZJ3Ypu77BtAw0puBjgffZDpz5ngBOfXWzBMYN/bDbBSMtacrVvoZQ\nUYDESrFW+5jr57cvxikGsdmjXY9vNu65uy/x0mWoLte8SxVkrG9RuaJQK4ZZ\n2rAjslwvM2Bgt9bQktwn2f44gLXv0ousTX6Kw0QHy+8dTN8EKUn79cpwnZob\nh+RuZ5U9ZJiedEbAI+FogSYXv1XeaUEbK93Ku92ZnyhvKO8s0peAjJcIrbwi\nk1SkK1xzySGgKTQQC+2ybouE3NQux4HeJ0LVCvwhSlBaXNBdq/7qWl6M9C36\n8T6jVE8o6ELrhZE/xxY4YftIuuAkwYSKcwOnleg9QQM+1ZjNIrw/t2KA6GHO\niJ6tn5/BxTStmNaGZkfyd14RSg0AUG4aTZKxg9SZfpdyQd59DjvcMhoq2zYs\nTo8F7oEqdywMA/rLWWOEUHtLolK1WNux9QaQyZ1oSwCwIHeJP63kbNyCLzOn\n3I/hqB8patm3Q4kCFopOqzV7u2HoDvALaHoFXVWgpNf3Hs+4lNy4zvVRVOo9\n0/E4\r\n=M/l3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErdXd0WL2dRopkvufRXRqK87TW5WTRLoHCD3dT5b807AiEAhGgnSxWQM8lhiCnBVqwqZrzBTxob5WMFo9XyjKhLmCY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.288c33ec.0_1622662414939_0.34806009634882895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-icon-button":"0.22.0-canary.7eb7ccb0.0","@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AOPVEMJNiy2gwZGc4v/nDsEsaV9VX/MagXN2ixHauTVIJ3yf9yq/cjbO0TC1kRnGbhHZvBlVsmWBRu5ZB8mF9g==","shasum":"df08f67a62560f0dfbcd602a2d1bab89866c1993","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTO+CRA9TVsSAnZWagAAmH0P/Rcq1vCLm9VOEWQhFIl9\nm04RfqcrM0vi2CZTxsutWfz6YIeE+Qy5fh/5Y1uF+18eKzg7FqGH+aooaE3P\nkiotYk5/dAwzi6BsgmUFzjfiiAHgSyvfBppNQOkA/MSTGsNVmrIGa5F1ZXI7\n73tag2PP4OpYpJAZv8I9u5lsjAAT7mvMavuYpT7LGZr3AJUp4kTvd8/EM4wa\nE33SlfqTatK6EgbxIfgQ25JzzIm45KkxAsvK3MV9qEwIo6B4bcf+iebMPsjK\n5fT7H/BbF6vkVA7IQrBCNaCqZN0p1te9i5ePBc8HVV/GBwKdQk15vtg0lZ6P\nDW+WCH4idrUWlaJhX8SM3ChvyE4IlEfkxH2kALNq8d2ADh/jh1yWTBZ+eHxW\nFVf2gGhFTW+JlEAzd6pfo9op7wPR7T0m5l+Bu07NB/rzaOKND4EZYP8TSI4V\nJ3YJ8r+7Q4o0HQJucEBKq9RFClS0jaXfTbHK98VUIrUoqjYw6OINX4+In4Z4\nIKw7TADlb+BzzxGrUAnk/QyCqjePTxfNXF410+xwnEVvp+Gtl8GP90Y3VEvP\nSR1HjRVyyRA4rUEgBYBxNy/hneB6obVTZN+ttQoAjEQirvPp4qGF1OARnQ6z\nxx4qgdIZ9/fmm2HNnYqfNKhX84OmwP8P+wbb76xcso1SGcSs4xAdR3cQuwI2\nhlHt\r\n=HUaj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwWfVO00w+ZVC8qPTGDoJgvRfHl/DrOT66TrIDGOumrQIhAOEwAn+ssjMScp9HfeU9Dpi9wG6C0KE1TZ4gYH4d6otJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.7eb7ccb0.0_1622750141748_0.945406046478573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.7fcc0726.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-icon-button":"0.22.0-canary.7fcc0726.0","@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yS8v9Klgw/zVd0hJPKFn4wyDgvjh325nMeidcQvwIYxXY0UvXlc2IiXMVClKqthu6uq9LokE3Ub0hOBJloF2rw==","shasum":"061c3ae5e44e5d222dac410e1b4c6c2a962ebd59","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.7fcc0726.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr3GCRA9TVsSAnZWagAAQpoP/ilB4X1gjgxj7Xkw7+Gw\nWv6NoUZhVa6sIM0vwBAQM1zRZsxvyrDSi54uOmT8F381Y1O0AynJ4Lb4UAHR\n5XmJi8yvArwzw6p9ZjtZs9/FJdf7NheiZj9706TDWK4X63X2rI9HSpbdlMCb\nvG5GXxtt0XAlrS5YDeslVfwUHFZDErrRXvCBg42rCXKjFipFOlmbFAVKbBeZ\n0wEQQNqBBOBiYliXGr1SZat1DvqtDwwPA2RahjlnbpB/t5iMUFgPaZ8pAtbd\n3CwXrYZNZsq6BQs1jlI2a7/oSxfE6dkRlZDjtD6d3tD8gBk+lP6rTjaHKpGW\nx/mbhukmCpzigqIWhM1q58E9J/rkC726OvDmfwlzC/OF/l764LtX04ouDU7U\ngO76KnJ1hQHPEMjzGxCLZ1LARb64VI3oPrP8E12ZHKhjkvamlEdO/x27KoTN\nQwaq3OwmMTSX3N79izJbSMjYxGmFjzLpuhQx6BOh3v0ZOiQ81DjpQDukaqWp\nvPb1gN40HeV2g1u94OsAmnvSy5lkxKKkoXD4n7LHj9uCevZny3iyQ0U93Scb\ne0fShp/wle2JzolTCOJhvcwKtqcXbkTamCQ3V9cHG6YTejOHnuukR9rzy5j7\naIaJTHG76sxABTd/Ae206HS5JvC0Hl9fOnHK1miggQXnwrHwHktGAEaLOPN4\n4ycN\r\n=k/Lh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfhMXRh5MHS36N96pAVlYa78bSR0pNAU7p2TqgnYNguAIgO1E0rYAD3FNgQ6occDVY8GP/kmFhqxpxTAQ6ZxHgfHY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.7fcc0726.0_1623113158636_0.15604631284390824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.220a4e5e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-icon-button":"0.22.0-canary.220a4e5e.0","@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3TeNVy0i65V2ofppgQq1t8OC0UjX5FlgSCv6xz7QoNh+98Cj3K4x4FqMRqau81zsQdPP05u09GdzJnmWx2Bjmw==","shasum":"91021e00152420fb15d483af2e9bc2747639c2e7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.220a4e5e.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63xCRA9TVsSAnZWagAA6CoP/Rw5S/ySM/j4VvvASbOk\nr4eRYuupjkKzu59ao1iPKuCbg/2HgAWfmuied5duK75q7fCyY/H4qnF7Hijy\nTy2gKDIQMwbspYztkae2gvFYzUzHnZndgIHTlsFXFZMuilQkiiAzJ6CPfAnV\nOHDrmkyj3dQiYXr8VdRXxJY3RcfbZCZqpxWdYAEl812eT32keiZB33l0SjKu\nq2x5/R1VFolty3lZDTSREYmDyJ2XJW8EjbC5gLcSm7oNgnVPPAhyDAMbGPly\nJ6PHWZvGBuy8u4YG1ri+7ISUx1A+aXHxO0ZcyOsWJfe4OjGYe9kUW1lhKKhW\nndzqaTMp0tWz9oYYYZhrH1ifR0Ujp1GQWg58b813bX0WuT3e0S4Gi98EqMeX\nGZgtRYijyzVGuN420zJfbINOr+tAv5i0TUrkBE8/52QPAjBpqTKtFJk1PFYF\nLqd/D3IH9ojeFHkARi50+T45yPgQhEspkzuiJnBu8kDBviY1I0FloKmLa8lk\nwWUFknCQTs+zao2HhkH2X7f2+zeFS1sSy2CVzOMe6XfHl8tjd4k2RCJgLPoW\nXY+M/1Q3lJPrvCbVCt2PNqAjcVepA4jmjCgIYAvk0TxR7aCM6wOB43oi96xz\nBFxJLES9fwq7k5Y8YxVWvcGAhwxDp6xn1oJj90OpjM0DjGm3UxjVx/qNsRsy\nqRS2\r\n=AT2w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgN80PLgASyOa5oQz1hUUAXzB7S5es3jA2DQDMqxtxAAiBTXVBvf1fcDYpDoAOVS1jsagHu6WkEz7s0MVp0qoaWGg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.220a4e5e.0_1623174640850_0.10719002745822204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-icon-button":"0.22.0-canary.6b2d6ab0.0","@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yA08YL3+9now+yIKJGHXIXQkTyfbEk1bf7xOixYJErFVuaVmlb8X5jN7Mk+NqECrP6komtgIH8Y1OnFMjIblsA==","shasum":"dbd2013b02da1b89c868441155d6a4d7e78c60c4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jSCRA9TVsSAnZWagAAS50P/2ZMOEvI7b1d1LPCU+MZ\nxr4bnbBcgr3R7rBvDyv26h+H5NCfmztLGO1OXUO1PEPfv6XR9KWQ/jiSjCx7\nwyeZWMth+vXkH+T+iZcEXeRqPIzH32b5iZWTu3QH2sjQRHIAvql0l/Tm3eIB\nz+H6/u6dt/r9Nk0CgiC0egpIatWbXfK1sUO8C9hMJxbqH+dEodryBMfsUu//\nK8QxjNcCyyo9oNq+f5+tPBNO5GqgG/PtbDc7OZIGkGnGWg1JUDegpjQkp1Gq\nHW317GjBvj4w1WzeNHt27z/x6mNOwNY9gZb7pUu3ktl2IPtWch33t2eNJSxa\nR3FtaEcGfkgZBgoDXs6q82d2tFeCgfe56cVeVqLSIGf7JSQuEJHIcqlwhl8o\nNMaeU8KyCla3G+z1KY/hlvvfC2FBSUyBXMsQumIatobPdU1Drd63sDj3i4DQ\njsaanO6pFsJYp2cSkHvJ+F/h6nvXhrnL0kmcs1jONTx75XfKbvKuDS+Q4ID+\n3RnIG0oYZTBd5UkigBLlyP27m42oPwCVLFBUi9ieEFW+erXPvzWzON7oTIDT\n84NNXGkUZUXUGqv50CBdxZgoRN8bNELA8flwVq2XaSP0wND+IIADEoQ/OaFE\nDW7T0mOCTmqt9cyHZrQIkAf+MDTzFLWME359uzUVAfDjIGlrHr5d09D6WJPa\nTo9t\r\n=U1Pg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuexERrrXUzCnxrRtksygHP2vp2qRtX4ptPC0nrLrcBQIgCspuVIVb8N7qOEy10vP0/powzaAQ/UQVrXDfco5Gr6g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.6b2d6ab0.0_1623177426256_0.3172162781286665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.2b20825e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-icon-button":"0.22.0-canary.2b20825e.0","@material/mwc-ripple":"0.22.0-canary.2b20825e.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XpB3qm7+mSzWjaauSj5+Nc4bySRU1QqhLtDEe53LAlBSNLX0OW8C+odTiBkh+3iDhLFv67+gUiFqWVIl4bbfww==","shasum":"f5c5aced393570ae84d54851d3b255fc670a0a4a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.2b20825e.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/aICRA9TVsSAnZWagAAo48QAKBv2In+7bUgK/fTekhq\nPZEKQz8Pz+qYTKo7kfZU+gezX1ZZ6sDGOsGVK5DROGjDHr7452C5T/yVmC5k\naj3jpCVF73ZY6/bB7mQ4fC+acQsu70LhaaJhFhPLa//rMRTzBAZlXECsusSQ\njZey2enD7t8efi8e4SwMfXqCPWB4Mfa8Fd+0mqSMMMEBUN8EWW1el83VGukF\nTCh6CFLWoDo/9r7p7HFOueTgqnfUlj5a/gzLRiFN3U6Jge/6Mzk//3y0/pMP\n35gmkZkWZ01nYy31n60PHCeZqGTR/GEDHLTKKsFJPkagoqe9rXh7g+Zd18Q8\nBhsWaDesc6ZfpnxV8VafoU0VxtC05ACmhXN0Ly7pO5yoqrvXuPyuEDFyFcNz\nJ3NybxzYLjnsYgtYVJy+gJpuKBaUy95qTtozlYjmt55/u39GLVvq/8yeIRvR\nWaRoRZDp3J7MhcIRPA0r16Q8Mr9iBv5HKRNd/ceB3AcI6MzuWoogvN5TjmYY\nRLF3CCskq1BBnz2uQObdqaSZBlkjDRfVelGvr8mGzGrMkLndqWaD9EZhoNdu\nUlWSzAoue69zE4JjgUYb+x8HiM3zdAIqTgm8U/eztf+LIqPOJZotDQyijZYf\nKH4nmKd4d1vJK0JwBW6+LTNra/1VsXu753RJz7c1pON+P3ieXrByC+TKwyNt\nRFp0\r\n=WDTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH75HHBOaXV7ZHE+qWrDy0c6H9O8QVry0l9YkGK2MoVwIhAL1wKGz5Qr98+PPaslIuO2egd2OnFt1bKwdHIgJi5I2w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.2b20825e.0_1623455368061_0.7581951352168608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.e1511867.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-icon-button":"0.22.0-canary.e1511867.0","@material/mwc-ripple":"0.22.0-canary.e1511867.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jmy6/kAzt3qjl+qY9jJup/F6qTgiULiy8odf/JgsnC6xrmZcw7a1avaLhKjcBUAsXibXbPeK9r8YFUmwV2sLzA==","shasum":"af5501069ddd1f72b60d40fafb641b5de3a8e49e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.e1511867.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAaJCRA9TVsSAnZWagAAyKcP/RPAY2ULnNfw65dh5n3F\nLDRDaq4maXyNvqd7IKKkYFqbki81DVIefO0EtX89yJy1+X0T/2zuB0j2yzwb\nfr9iZXLhTM8aOSUYN9WZviPfTM/A1fVa0XsOsM+0SkQZufYAnBUWC7WYf3ks\nH4AfLeXuYaWgsEfaKR3nlR6f7gGtfIonof1oxh3mu3QDFY4wzV8oP0IAEvH2\n9yq+wHWivCABmnsaYiZvavCBabVU33qSmkvdKi26o07GUPnpxTCn9R2erbyK\nyTz9zXpt+siENBDx0ZcKKAwTXZAtIPhcgPLYrmuFU6tftr/pibL51vwnfMTr\niDNDWdwTquJkAB/0H6zugKQ62dhTeOa/qnCOnEbcdC1pXMCrGJsPD3Hl6hLm\nKEu4oIC4UcxLrVya0oKSucc7pQu4IwrS5eUfIIPGy5FTu1U7vlJ3XqKH6Yb+\njt5/1GOS7YOgfFBdyHhrXViWIYwnNpsPs1aRpprJv7JuLsT4GFPBbXpsJvWA\ntTdFrfUE2I/8JEWmO0V7GPCBGvsxo/wOIWyyDBmu6hRUI3s4l7tpNsmdyAoO\nMmMP0khlK1btsRMmu6fJ79R7EQGyXspfkPrT6HHjmERLKx/96RloZXr1ebJi\n4IwqcZSvF0vYrkD8eXPIwW5fDDtZduS0xc775J44b3V2vct/pIEehcC7L7bo\ntcea\r\n=kCL+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCCKw1McnXyHwipJnIsu/myXpXq3HfZTUvn3VXKztMrwIhAMLyuvp+9DqFU0oqFIA69LBKhBG2C/yMdLVOFhKMVnNH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.e1511867.0_1623459465484_0.8332236174003631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-icon-button":"0.22.0-canary.ef4a0c0d.0","@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q2UP5uyFJ+kwlT7rhYBQS5Z3zv/l5EPhR+g1lM8iDOoON/HpaxE4GdOJu3L/5A38vpLrfIcgB6sfObuUhSeE9Q==","shasum":"e1474e09e3eb662180483e5e57eb0833498744ec","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQT2CRA9TVsSAnZWagAA9uIP/1pHLEW+vkLtnMGsnqoS\nLCQ1Cpai347NY3a60Uo7FThifMex4FYt9E12ofULebxW4fduUjiinAPdruru\ncWGQ43+03hgRTRgyVAuqEvuKw20oLzIE8RGqZmBQgQmNfz4nb+owaIKAEbbG\nq4N9Wyx2YiG8fUvj6oIKi3gT7XFjasCxC5uf13/E0KDtXRHJz56F9wiMOHs+\nffMFf3o09ZfWv1qMABEXZGUdCs9+cR10jx5eOzL/OH9YHbkgP5D2rxA/WpfV\njCnGZOf7kRUG3ZZGFo1W5gOwLT5AOIwkNR+Lk8D4s6OmAnneukAVKM5e9Z1Y\nIMHntjBjW8wekJNeKOF54lG4t296qupNsmJf4HBE7z66hr/+EgwnZoaphAEo\nBIYaUJayEgh47gT7kBLlrkPKt81IKiAolz6DXHSRMHNalXpIOjOfdDkky9DD\n178c871+LWxvWx+TrxYT9i/8u98u+Jz7LF3697Tban0gEVkQ6bcgo34YDUYj\nLiYSSsnHmoL/uhvmxeulFERc/u0+AEj+5RqbR51qYtvsLGHT5m4u5XyelAMY\nyg05UQ754++60t4czoAWqSw14WuTpH6dJhLNSFnQeGhmnhJbYETcAvYNxnGf\nFbjMC3ugqZYF7r4fK8hEFXdj1g292tPZgADAJHcKh6uDdNLas1uIQnxKAm87\nOSVM\r\n=iKA9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRmMLvJFgaLai8MMRSjJ6zszKr6ISf5yi72Ltqt/OM0AIhAKlJVReQdTgz6MmNq8DtwmxLw+jMlof+K2YTW1uBfrd8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.ef4a0c0d.0_1623786742142_0.7568882996884347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.573d8913.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-icon-button":"0.22.0-canary.573d8913.0","@material/mwc-ripple":"0.22.0-canary.573d8913.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Mtjg5KDcFzjySjFS7odpVlPzK3Zgqx9K2AiG65TCLaX0zOKa5thZv3Elo5rqJM5D5qs9s372c8cYNkNXVaWy6w==","shasum":"9cb8359e22efa3f2aa8642a09c4ce8719465aee0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.573d8913.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvPCRA9TVsSAnZWagAAygMP+QHIZ/wMwOIO+nGMO+G2\nZ+um6vfpeA2ybqB3h26YvlsZnmTZEgtG2wbveVPXEpZThBx0CFckPhtulVzH\nAr3kMn6wxjppX7bL6bN++8EwNKKPQF9/lO/0eC75fgPYgfihaStbGbkqcd5E\nYdfiWR0tM6d9vsksNXo//M4cHlkfugsgraKillSKW0JbBQihKdGVcWM3z/tb\nBKdK+KeudzSvJVaSkrD56qb+OriSUmdzrJUr5LfgPP5yIKwFNSbjP3c0xR8T\nuK3g0BlvKbP/1j5lVKrU9bo9SmNxl0Sh2/Luyx+DNwGgDqGL08saBtFAA2Px\ntNS46xD8Og7hgIU46ADY/z+eU0NbOZOOf4HPvUteeUTFNLlsXbf87xPWHYrc\nNksT5z5kPzk/2+OTWrkTrSyG2EC9Lb6L+0WTeJr1SzTRDz9R4JlI7F8ypgU6\nfHt9p2Z5UZITC4yb6iu9EKEkmbj0qJ8wfCGGMYTrznCWIKLxIvbV8lIlgiWz\nMcRMJ/sAn3k0uSiAlt9YEGSLAtzyTS72AOII7z2d0R9tJZb/3mMgSqCAZy76\nvKXigjtCB5w8wppKD+zp1UiUEjU3dr/DJv07VQSvRVtZ0tvqA/4QHKz6Cj1S\nGw6zK9rER30BLV+ACVi6OkZA2ueOk94V0n0BNmMYFIHNsZan1SLakcRV/u4i\nfHlw\r\n=OCvF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOE0i7SY7+8j9GDVxbeO+OiX3Z19siW2+uXFJdaEOCoAiEA7ScNcyF4XcEQSDSJqUZbZq8y3upA5Y7jwTHyV2vMX3o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.573d8913.0_1624058831497_0.03125981911204012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.21dba001.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-icon-button":"0.22.0-canary.21dba001.0","@material/mwc-ripple":"0.22.0-canary.21dba001.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0p64J8iDlj9IUwrLFAOR1VPP6otzCpnYFqD2n8QlJSGClP8yEZVJUnjxIpzZxexZzvQqlw+f898bk4lriOmGMw==","shasum":"712b68d51626277fe9cecf446d66336b8642c627","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.21dba001.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdyCRA9TVsSAnZWagAAzRAP+gLwkZLkl28ZHPGzeCjV\nnTVxx9aQh28IipMoKcIV8WrulKRSDkZzsk034gVjNRx8bSr0K1c5tt4Z9uzt\nzfHeO+5S43TK3al8oJ+gfYf6LpftvLuW4BaWEfvtqTeSaZPJb7HLEXInIsli\nmqXKq5Hlu7KDY6lI3zRSbDUZH/hBqwVz9pNz77yvShaxsfIC8WxyeRFhnXc4\nLlYnJRpb5XOrH+8fsRw3w6mDPHDrteflvmaYGrXmUx/iAL8Rh4ls0ZGYMdGO\ncrIygzrlrEREDFCHKPRvEqDVRMAL5gKnBB97ywgl89gQgpxbveROOHS1RbO4\ngfvQiKcbtFKKXE29PNjntfGA8M/AiMEUufHe2ni303XFSdxta45azE8vnv5f\nCgW2J+NfrC/oiGCoksTj3hXB2YPd6fPf5iMmqljCPkjEKQOmn7rIGCMecYmN\nsKGGEy3/OmZZzaRr5Z2P8UeInYf/wuJ60Q23uh1JQNXGOJ/u8p7QpsrymlZG\nSom93Z3hJLn41qOQ3THSLRa319nPzsccoBk7ojtx+ay6QbXEU9xvuVb183Yg\nf0Pcs7+y8RmSj0C4vC9q0T5oiVKSZyJT63Bu4ZCxBCgjMDogcKvhQQnUOISb\nXPODcUgoXlmmbF3cNw49hV4mbvLUqmGnGYrAUPdc9iIl/FrKzTpOwybAzB+K\n9kLs\r\n=NhDz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTfFK+dQefTFu/nAW3z6Cl9GzqSamP/ZWsxLxFrB+KcwIhANjC+HwCu8PhJYlvZmSNrLc0Nu3yHWb4f7IlTbb7Fej0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.21dba001.0_1624311665992_0.905679831996548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-icon-button":"0.22.0-canary.6f5bfd0f.0","@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QjBCftoHTiXIu9wORhycYOGalLkucqqtxJXXj51bZ9LUNyhPUCKkDQsIkRXHr8Uo80/h+DycEe9gez6diwiwpg==","shasum":"c0db97357592a33d6436a0c4111f52cce0765166","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2gCRA9TVsSAnZWagAAB9MP/Rd3eEgNPr/N0vQnQYTW\n6vrIYfRZAGb5uYpPEEucfq8Upa9tfr9e8VfPAaD/SI50tayBDpWr7a9CTV4m\ntBgVSdBPRwQT9hlD/V3YB/vXSeBOlK6GKQHZiO9b+XraahdryJwgL40Zb5gm\nuRId1bnWzKaJmPWEh0zJI1F2ggZaTLlCwbi43xQwWO65tgT9atKxogmPch26\nYIA9B5gRYMQmfK8ccFG0oWNv2TXzIDy8fAraWgw5kvomtA8+p5lNSp1qkOaB\nLp2xPJd31DQjtfSp4HyQHBzJzwb1QF+Wy0lvVG7/eJ1564XXGdRzsfbGEWzO\nyZx9RxCheHVIvKfcD1MfPHqsNeR1e4SUegyXaL8kDkFHVbZ1LaM4pe22eu84\niztlrOQK+u3pozbqCPnhQzNF+d17UrexozmIrzFijXp+zYlpjb0VQjKuODMt\niFRAIwgwZiXVTGaSuOWn2TqtXi1UphXV1BQYk2epAIFqM4SfPVIA/5iCtf3G\naf2BU+q7Fu3+ZsYS6puxXq7srbS+Utbl6FNaPeniSXccZWTvzSMoLm1kTA1R\n0L8cHPD+tKkPAzmO0t4BLV4BKfrA7hmqw2fYW4fO2HZUB+49G8Snu5WIQC3r\n+Mlzgix46LFoU8Jmx6fMXEQZa7dbhkyREf6LjFxfNasBJ4/+nwJWf59S7kq+\ni9Kf\r\n=rb7u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAJzlHKrSk4TQRkLynRef8myO57MHxes59HMs3tzckHwIhALDMEWArJRiNrnwPKPuIPtOm5YqHdcaQedFcXF0Hj9zh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.6f5bfd0f.0_1624575392076_0.7102013252622181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.fd8360b4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-icon-button":"0.22.0-canary.fd8360b4.0","@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Da6uyS4h8ygpwc+/NzyCgOqkHky9e7KruIwxk56P44lyOqYnlkkQM6prSh2MaWiJuiF3cV7jW1KY7pzJHTOLeQ==","shasum":"40df5128d127b484673d2026895cada51c284cf0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.fd8360b4.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inzCRA9TVsSAnZWagAA+7EP/ipzrqp+zBD67FhrFsGY\nNOU0WT4FFCsw1g5+CjDNZrv9uXpYroOn5JqSviMwynxomaRVgBc/fH4VvqTZ\nbeJ0xPkKkn8gJALXVrU4yO6yfjOIfMd1pRLtjiKRTPsr7gvWZGTqvB/vASWz\nhAEI/vIzXhxWo6QURKj0l+oLCAwZDe79Xq3Pxu16PHWHkvuESCWdbPcF85uM\nPbTWQyH0DWTdeIJTo2by6pJer8qXhbJjGO1naRYnXIMnKRdP0vJc7TVapuqI\nZwSL4ju+kbJhcK5Lwb/JZzlMsBSWpfTgcMphrDL+xzdXN88W7u43G7+ZUpka\nAB13ZJfEZX2HcAJnI2oPS7W/jQfM6ZiFEEpDhuVM0LOFyshiqgcJ13tRfL2q\n5N1HSzREMY3CEtCYJS+EDNoWUrzap2xb8ONmLf2Ud97HpyEv2T6C9ZcHzkj9\n7oAH4vkv2/3GXiVGC8ungmKAMZ9H2vo3pTa0IWzglVBh8O25HkI2H3C6yAqr\n46Ekq0nFHGuXpgDIOuOJ1HH7Tmt7AmGUCI2x7YUcGUInUDswVFkbs6TtbKRN\nA/ZceOJP9jbCVBSDYWzbfnWGi1ztpWpuI9tBXe5+uYvN8IK0FV0InCo1iolq\nF1WZg+9W3BvgFJ7BKW/7JZIPdkxX2DW/T+1Y1L+gAGrwAin8b9aIHZCtRJqR\neZT6\r\n=C5lr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF23fNgi9yL16EzKsfi8VhD0RjlIi1sJcsuk9y9DF2GPAiEAlItGiajajmNhdhTl8X7to80b7kgtuTZfC8uKy06zG14="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.fd8360b4.0_1624648178681_0.1740298867513872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.6f74432f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-icon-button":"0.22.0-canary.6f74432f.0","@material/mwc-ripple":"0.22.0-canary.6f74432f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1wWgKlKU7J/wE/pMn15p1pwF8Z1MK3DxkYCNYLCQH6TZ/K5UJ199neidZHNxPnMLcNZKu7pxPDOOkCFADyZU+w==","shasum":"6340734b0c8bef8d20aedef49088cc5bdb6f385b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.6f74432f.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDgCRA9TVsSAnZWagAABO4P/2lYk8QVwm4KqeI2g2+c\n5L8Sk67aDWQ66G9lPw0AGcbmgBTEOWaRpCGxImCe9MgTUmPbuQI1SGl37ONq\nkKy718TxQQ1ZPVOAtSuwl0fytJmCeMnx9lMZbE0dA3bdUTFbnsoOGhhbKNSQ\nH/WF+aacfn7eswdWaR+jM3E/2Kgrqs4rmTNf4eKL/Sj1FO7t/kxO3D7U+US1\n9DBxaF1Obz3eEg3/0EYAV6IkXAZNhqI2zNLtU3zbzrMgboq0jSW8AThHAd/p\n9fgm4FrI3/ebrowkwSx0n3Gr3x2zD1YqnxWVjARXg9gg6hw9QuPuxSpnOuCq\nXO6wJ0KYaNqrW/sdcHOCjED2vMZjiiQZIKv7azItn3t1pa0Mgfhku4eluUnI\nA0+salDeGTIk9nAld2fdGLCDFAIEZTUfMDqVLKNJDa/s2vZBFZ2TF57WVwTH\n2lnxCtIh10qJ+zx6NfHifMu94fbkdMrBoy2UpjF/OxmhI0SuCl9H3X+8SGZh\nNIlOYNM2tPF0x2Qr/c4YDsdMR+GkkVdjH6jjMiKzb68JB2x6K9nKLq95TD67\nzwDkIRMIK70AzWSNEo8NkZZlDjAUtDap2PL1LoKcNbe4T5Ha8jHOUIOHM7Ss\ng8lJ+fMyFa0RYuM9xM/8Iyu4xk1fUiOpdCcWdDRevh2dbkOe3ccwFSn/N75V\n2/sl\r\n=3qr/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLt9HDZpGnacSf7bEK/SL3ffiTCYvwWfFY82+sBVGpHQIgd8qDfqK63RgOdtnhfYfb8Ts0vtKCPfZ0jSGLsnMqTAo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.6f74432f.0_1624654047836_0.0612434707043128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.b62f901d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-icon-button":"0.22.0-canary.b62f901d.0","@material/mwc-ripple":"0.22.0-canary.b62f901d.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SDlqutjxmGHV0pd8ENBygqx1zGd5HB6ZyCEtnSQiHYLHt5DnmMwCGbfOX1aDZUdhol9QKHF5kBWVtNL/Ni6TWQ==","shasum":"efaae13ab721e5fd702010506b7709e861ba8a3f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.b62f901d.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lYJCRA9TVsSAnZWagAAjRwP/2kEp7wrED01t/vrK14b\nxBLvNQG2AT7Bwe6Ouh+GTpL1D3crxD0UIiSiJRTRKPIKP5YtzPOTmFRRrubM\nf1aluiw0bwmbCAE1qKEEZmrQyewBRZypUNFQNABb54tHdJi2luDcNZ2qOnbc\nQG6XXw1Y7nkQ0uO0q6+wjZ/8pz+McPPc/MJqJiiN7Vkp8PMbAljTkggBFbvn\nKUZjTuOkxFg+iOw+shrIGHvlyHlWZvapUTWIrA9Uhp+K1M1Lb0OOCj/OXTPa\nsGEfZd6OgzMC5bCRi3D2crRMG6oOF+BursHyRxCfTxNULXO/crcvsw11xBDI\nSCADWp41b/54wGvJ/mJvOg7n1GqopMTuWJbHmr9SW7UhZU24JaKdpgR0ye/R\n/ShJtGkiMHo6cuHiNyCU8YnPijnahlp03W97Rn9o/CkrpisOdwnNEHVaoQU7\nVan6OHsaLb4W76uJ9a8RANM127Ej6sgqC80ajXtZ0dQaLAAA4AT2o92xrIQv\nUxiiQkRe7Bhypp4uYXLySMoTgtroZPW83w7wRCFNkbEMQwZti0tdt72Tybp8\nXzlR5MkMZ9lddzES1Z5GFsOmfq5wTzNg+gGbGMrqyxWQWfda5Vt/OI5zZmR9\nM5hE3LEXJIuAG5dXe5XcjGj9ZoaRkIDL0a5PfoFWMvT4FqJ+HvJtcqK82cCr\n2/Le\r\n=In9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHlc5ruiR2NjENKmWKr3fOf+Uj53EEdXRXv92LKcT3qgIgTWi1QlmQ/O2ThTF/KpLHN9SHGmvp4ExwCU2FXg5hf1Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.b62f901d.0_1624659465579_0.31498541753786413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.73122cba.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-icon-button":"0.22.0-canary.73122cba.0","@material/mwc-ripple":"0.22.0-canary.73122cba.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SaN5jS0xibUy1Cp1E3pcNZOq6fH4EJrQqCqhL4S3OBsUVfp8TbpYJxyO/E8e6AKIu6QzaXVWt40g+H7/j9qdgg==","shasum":"16cb2cf1422d0d3d1b74ae07006562ca91abecc2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.73122cba.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfvCRA9TVsSAnZWagAAWzIP/3Bo78KaFh5T09JisOU0\nSGkDFfRJHYOCGm9+6FdKEmnxCd6dZZUhvCdUBu0jPnJTrM4Z1Ze5DmEqvn2w\n9AhjLhPv6pjUwcmnnJIFFPLaBZsbYxkM+lnseKA904mptSZVii4pPxa7fa4g\nqOfptbNBKYyD4dC7p/9ebkXio9u5l0UbpIxrs4+Ha5YWxnFd3ICBZoTDpSIV\nmvx2Uw2QS1hZSmtRzvD7Nor2phAZaIVjyW1e7PC40Pu0AkTh6tFC5Uhk8KUI\nHklRGieBbZbQNhdcGk149pVLaJjFXYONbOxkWC4px1TsmQ/2JGa5OGpgDfhM\nYbvHFM6MfOKup5gBqpuBJHoO6dsJrkWVATwXtGfM1ZLTIza0RwiOggU042EY\n3jyvu/8vidB86q5hOChEpiWcttFN+vNLfeUVUcbcjpa8ja0k5IlfuUtpjFK4\nDD1sFwPQxRVQBUYUdOu5SOSVJ+PYRAOWTiZDp7gbNcATiUXrML6QwCyqczoP\nAE9O9CPfZLRWGMtbt1gFTZED441P+VuotU6bKHS0L4d2cX4T0ZfrZnfNkF5w\ngCOSRPYkQi7WPRlYHNT+LskjHnf3mCRIaFM6XjmsIz4/6N8TZsy54HMP3bNq\nt5pW+KhXHw+c4osRKtPSAKs2BUXF9uKzmYePu59XMA0maiwvUX1Dp9kTStxx\nTBMY\r\n=vFR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3FevzJRD845LeBDWj+ag9I7HQMvAVZFmxAolax9fzZgIgYFuxk9uRKw+nyxXt6LYwXj1R84aYc5nYDKigOMW58U8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.73122cba.0_1625081838679_0.7561476367615452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.a6912af5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-icon-button":"0.22.0-canary.a6912af5.0","@material/mwc-ripple":"0.22.0-canary.a6912af5.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ftqRxh+HnyvmUIpTY6EE/8FAr79LjOvt97BA4J1MINTHr98bb2Kn9DNAQKmaGvAiP7AzL0fG9lh0pPBqhRlSkA==","shasum":"cbfcd4e9c261881bb92fa86e04d83e4004d8e965","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.a6912af5.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTnCRA9TVsSAnZWagAA+CwP/1V5yY3mYtC+89y+25Fo\nrAlZg25fIPISPaalTS0pZ5Sejd3x0RZFRfJ3++q5/dd5T9eDZfULH1idCLbL\nf9x7lJSvSrG+Mayh2ubvmcoIMsMZW8T/3V99wcLqdGviIWqUVIvK562RDCXp\nPX7CouiP8JRnrxPgUNA5a73k0sPgau8Hy0iMxziSH5kIEdWxQ3G+4zRda8YW\nn5NOA2tO1zhcXW4We8d7lSsIlWbsJg5sRaAjbNuCNA0uRjX8SCP5vkNhFgAC\n3pMycm2Gyadt4hEP1YAjVmxnABL9OoO2EmqRTK3PY4WFn8d95nNqn7zN4QQC\nJFvYiBeXMPnGisCmK/hEbRbhCJVJ6oDMqbExdB7q+9ow5xUsAUWSsolCJukO\nE4d4Qn0J3aOoUnvrSLkKaxUfoA+d/w2kFXCpRPOCP7B6VhCuB+ozkAHHQr+w\nMYLGs4+CN9cMAJamTkyB4nJcOXvhFRpLUJGTQiVvy8m4HLdH3eZ1AUm2B2bx\ng6h03pKShwIAEx8FCWKWHqJRGFr4gFk9y1Hialg3wy5z7Sfdeh+Jyimv37js\nQ8Ni0fWljWADd6O0J46K9eknZGyieFZEyDLaQV6b4Y5wB0tPM942yjtTpGwF\nyVcTyFYZeedWS7BTIiSkzJbkv0x0bynXjhgNEh2kJYjyNnR7T0gByFJW8plH\n7i07\r\n=AtPt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGMcRxz6Ld9fEvpV8aDGoLnEzVJa+u7hcZNq52VKe7NAiAzT4SpN9GXd+qcWghNDqa5Sfw4BNh94Idcn+bnrHFy+g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.a6912af5.0_1625175271229_0.35120349202511325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.134f24bf.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-icon-button":"0.22.0-canary.134f24bf.0","@material/mwc-ripple":"0.22.0-canary.134f24bf.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UTecB0TyIfyNUCAcOG07k/QAJ7UfwOVoODeTrrZF43GQnyqdIOqEBDxznwOCKUCjuB4nSXapJ0uXng5HNRKyNA==","shasum":"369aa2f49a70f9c848840b419663980f470b7ee4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.134f24bf.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKRCRA9TVsSAnZWagAAdrUP/RYB1BFUorAV7xE6SUVH\nmTJL5+tTEKFV5snuowuJAtpMOsQR9E12dJYtJmLC4FjruLTLaAl5cz6I/pc7\nJtTU38p92HF9ZZZCAfnZYDgbnv9qtTFX5bE0fgfXuHDqTosH/sTdsW0aenGu\nL7nrsAbre94CnV6fV6Yg+RB3lh1MdBYnFKCOFrSWZi3Y+a1RZN3EJmeTgiNt\n1OkV9l6DE/MWB9aWDv75W8JkqsX19Xmawu3QZqcEZbG4j/E0He6aGVc1Ejpd\nu0ZLnH6Mn8NOufbZ7G2xt+sdpbb2shitMtWG/tPH8t+JFgRp93j8JzfwPLU6\nZnFHw+HPUdy75ihcRygTYLPcg4TPIrnupqhmWXvPQpIfov9VXrwUpxdbUupR\n16Xu0Nj56GhVf4e22ghOuR0NJ6MXulKkp71YUyhYDSZ30dP8STRP/HbbEELT\nUIl0igO/tOlNQc/CJ/VqEvVqEIgwsrdfGdxEKiwVSDKbC6eBqDRs7cf2r0CE\n7wSj3nsQh7i2Dqp8FbV4BYAh9hhUdi1HdIWut9cCN/pxD1I4hP2NJcJtRDAQ\nD9vJSNhaypFiYQfE1rbrkfjIxkZ+s5mdxuP1I4brpu22+no7BuIUSfwLJ6Jy\nHCR01QE5I5K8ZOd/fHHv/e3WyO0kTWwF4ETITACbNGLIeFhQ//yW6/ohn7qH\nTzI/\r\n=2JVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoMyWu9LEp575sWRdw0hq6eTDtE6xHsIlBG8oPCxVVVwIhAOX4PcLtC6rh0JkNQJJOhVuoVXFCNqtjc5+ogL1dkjxQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.134f24bf.0_1625178768843_0.1468480635615046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.1debb78f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-icon-button":"0.22.0-canary.1debb78f.0","@material/mwc-ripple":"0.22.0-canary.1debb78f.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fgQSTI/3F7jCMs6QDKbTCl6n/avhwn3Es3YCW6/nn4wZ9pLhT9t2GABmmKPUnBU/Ubl3qRMxv6kzmHIDejl6RA==","shasum":"e03e08bc4131c54ea19974603f76226396341016","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.1debb78f.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Pl/CRA9TVsSAnZWagAAit0P/iT7Si1ZO52ScAasSc8y\nxT2lE+dJqkOf2o/RfIuqcWF72czbGkhlo38FsV3seDkdw/mKo2lvm1nHedIv\n65uQJn6QmsHMqXC5k7vAXg9pe+Qq58KSFOoNScZ5mgRSsIg3CxPEBO776PI9\nb/AgB9bTNfPYrEROQQchHqfXWZsBWWSAvLSh0Rt0cnNVXHoNxnKZXjSTZCd2\nn6xXXE0iKh28f+88PokBnxriTt4QGFwpbvW/IMmQFXKAqf8g634gtIgguV1Z\nc8poIZh8fch/fXaODke3HIzy+c1kq015iBKN0lBjioelgKWBGj5bramsFw+2\njIUBzfeNft+Hj+HeISrStk3JR3JDDCm7HzIAzXYyDA1nsWWQnBVW4EGLyNoS\nCeZ4U5UcvrDZcDjiAtOKNqgaLUUChKcp84B8Gu3JaNxkpUrAtfLqSVdC7FF3\nduyRhZAfvb1oX62w+Da7l6fl6cSb23kd5xXjtbFFwScXQTVaKnuVnBRsQkQZ\ndzrIY2H2T+jJiKbLqB8aK2VCm0uEZpyLTh/fP+RE9IxEerWsQRajY2XAlRXO\nMq8E5BQcDXBz27mtSN/eMH8m1/pO/AX3cwRPYCcsboke6bpd7fYWkN48lXLy\n1nyAenH0F38DyXza/1UZqBDy6JHOijxTyLJERsoyIkOkj2X9YGcXNah7vYWI\nZsuL\r\n=zMH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBpEqY5jgORH0o3kFCaw8pGzdaD9OyrdIHkMZbkXGqp+AiEAwz+jvqd/0eAjR3IczcwqrL3l9fLbpqjwLZc46S3XWSY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.1debb78f.0_1625618815250_0.4891364082811158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.d53edeb6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-icon-button":"0.22.0-canary.d53edeb6.0","@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TtNbM98WnsZdYKduYRZqW1jMKNPMEOZP1E5GMELYO17A6fmyz0+M5iX98FRiJ78CUreufiBBb0YTZkdN3o6i5g==","shasum":"9e478764f2a7038388852fcab9324894941355de","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.d53edeb6.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d28CRA9TVsSAnZWagAAQDgP/3roptBr6mEs5EQpJN7W\nrCwzJI/aDi5yU6HL6oEszEIEM7dHiSVwo91VzRGoOI9CJI5I/QB4qAPTrVdk\nIrZRrdcGYbtmddlliPMztJLnQsVQJGS9mdgfqQHlGGCMHUTAs0SyNZ+vf+7P\nsX+Rstubqv+1GiUfrq7WSTUISRR4H0VcLdOLQNWYV0iig//oz5qTk7v5Djzs\nY6vuGPIgM8iw/oDotAd1nEqjplEEBBoA35vgYorqhBF4TN7cw1+3+T4VMME1\nLxG6P/gVlpvLk/aVGx1W4owYmHSwhrinqiQE+tv5sdxX+s3uARK94QHQnpQL\n5+1HTLP6Ja6upjzf0KSAuBsWxHVYhLe+Ba3HFzoubUgiL6qpX3S14NqfVAQC\nmSn8+v24C+7E6JBDdOHahqzRKPidDKhpFe2haq88xfjCqohq1oUQzGaSjFLp\nvg9zR9ybpq1j2fCu46dTAwniwS1+4O+R+aUIFh8eteFSQfQAFQCx1oab2Cfy\nFxyq439u5zqeJUS7gL3WfaUTk2uaRm5P5Ce8tyJSkTlOd7+hAbqQcQrSHk8h\n7xSzYsdgiWEdCfKEC5Z5xkXEFEcF7QXgeComYEMAUrxwMMYyLyr1xIL2oENd\nPCCkOpASl/ahiuRr4EC+kwXBUxUd2Tk+Mo9YQ1xlBS//35JrB9t7JL7pEi0M\nmpOJ\r\n=1UWC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+Sev4WuODV5/jIXogEjuq1QQdn5JVdX5wHsXyV8Yx3AiEAzQ25cIZkt0laTNDnO016t8rLr7xjd5sS/65VSBRBi7M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.d53edeb6.0_1625677243719_0.916575540549768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.2226489a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-icon-button":"0.22.0-canary.2226489a.0","@material/mwc-ripple":"0.22.0-canary.2226489a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5C9hcTs7rxUqH+wbwd9ybNKRwxXm/hISDEsWgGUg7eNYWGGPyH8EV8uckFK2yVSXuMQKDV0xhcz4JttViz8gaQ==","shasum":"4e691a4996927eed5b46ac7ba11e43aa5a9cb77c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.2226489a.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2aCRA9TVsSAnZWagAA+DUP/0MgahPR8mOSnQNV9Abs\nWIs/Ew9Ye6H2DorM7G4eZ4br4aq2cATfafy9WXRUspkn03PqKHix+cHTQdKZ\nYCHMaJoNbRewXsX//Xw5JeeNhOWcrVd4dUsap3+KYEUOfShH4fzMD3Ledvi6\n3x9gTrVIOR3VEb4tDQuqqkiyDtDa7COEX+5m9mSPp5B+BTd837rgqtedehoH\nd4VuZdZAB9d/UewJogr5IyCf23pXspCEJoqa5O6FK5MEVHmas7LPt0kj0v3j\nMxrpFNlc4cHYBVFOGYe/fa2QCMBo74VPVFr8ktO02/34m2otna6adIYAiPu1\n98fEh7iDrLnOxvwYM57qgEeMIe6sC9Rg4St8smTcJTbHrtr71Y5br36o54kX\nTksgF3j2f8uspcmDLnr1dSWBzfXnHFcG5ZtisyzCaucOdMo/W3mnIJts6jRT\n56DWTTgFOUyhR7gfsZg8EubPve+MSGX0RUb2m7G4ZLS9jdKhynAW0HBdX26+\nrUoPCi1tPfXZLzIatu3Cp9GBPQLms9mfu/FUY/rFNlbPdnPcPBYGzryePPmY\nlURmODWl7eq4YYFipnWfWZRlbZ6YjzAB4Ese6fN0TK5O+Yvz8HiQiTqdXHUa\nG8Wxh3V4a81xFhBpOfVkimcW1J/4g/uayUyq+KqX5hjEk/WjH4RX5ES/xN+f\nE+VZ\r\n=j+0N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuJflcfL8L8ZiAeFEc/wKoe9Qpn+tdwaIEcdLfqxoIzQIgPd9jbL4EOiG4oI1LN1c69vngGusPaBmaVTNklVrEkK4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.2226489a.0_1625767322405_0.19667565677087429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.d4801c11.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-icon-button":"0.22.0-canary.d4801c11.0","@material/mwc-ripple":"0.22.0-canary.d4801c11.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I8eMu1ActMJObNgcEZMYdBIwmJLYqE0omB+hnrvuWSWzQRxT/46Zx6oeGc8AO4U+dulB0dZZq1KNNtsv25hbHg==","shasum":"94f1bb9de3e38e3589c91872914784866434aa2c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.d4801c11.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51oCCRA9TVsSAnZWagAAB3cP+wS255GQTN70r6s0sI7f\niaIEbUPXjPIeUDhvO4tvgRvFMhb0Z3AnWlfz/C+unyjQys1KD6x6yiEar2RI\npNG10dkpiuEmqg4G80130G834iLyuByYjS6b15N4hA0t/DRanUqp6jj/mFJz\nMF+vKohl2MTwYqwL2cPuAwl6r34Xtywv+6bozLVFRI9yHSREQ3MJUK17gBrn\nwwZEu29tfOHgZ/wVQwQTuEuUHuIqAumano+0jhMK22Vexg2r2y5K+cWpQMT7\nZsIXKwE+QPM+ccNED+cmGsKXMJkINZXP58Pbouds6UUfCNiaekvKoWRakwZl\nEgpVknVvpXws4j1UMN6EiKnWwLdoMkVEzOIQscgvi4e0cfXh2/zPLpMXYQ/L\nUkxDDJibbLj5ejDcm4LWr+QENHvJnYX+Vvj+D/TjpFViQ5xQMlCSnK0uo5hP\nMel2RXSi1gavP64FDVEbVkexHQiD4Gjd569jUWK8weTF7Th+6dMkCEsAgdBa\nX0ONv1NhyhoMDOnyi4xIsBFZkKm4eQmLB3tRT9aE8SLS3MeIhRtYrX8dEmP4\nRDcl3kSG1q5mUuGtAfxa1qjRxqQ3tzlRD/d7Ddt47dpjXTTGq6IVWaRFoBpg\n4abKXygyTJ7sngZClAKnkcNI7OVKB7xwi/oLcMRPZmjGn/cAG1hoPpZFjhop\nfAKr\r\n=QpRp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw2hcKgza34+AQn6ImlXWe97XkZYEefI1wYWUao63TOwIhAKMxm8M5NYX2NagbbBEH/W4QYnylQ1EzelI6breCzptI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.d4801c11.0_1625774594007_0.17760329331198865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-icon-button":"0.22.0-canary.7ec5f2d6.0","@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7pEG4G26LjIcOd48115cIZsxhUGzkM2iMWfp+u3bUFJVg0jym1zy4y1P41nx5l0oUpYYk4cPBT0pJ1WsMFH72A==","shasum":"967042a9a6439a6b01f4f274996dbe7d5321abed","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkfCRA9TVsSAnZWagAA6cAP/R7zw5vQoMzmpqyWolVf\n57iV52l94Yb90axWoU7xhNtwPHIBVPOiKqocWdKBCrd4+aw+ssHq2f9C6Mxp\nFLy5y35bL5MQuzOhE2ZJqtmglmVsA9zIzMTzGZg5CVUaRLBxvQxICRnRsTlD\n4wTsOvrzaS4IC1HHx59OtsbEUU69+De5XPcsgBeJtNG9QavQESgfv7SWqkVf\nbhOfxW0yTn+SRyGGMLfaan27VFSEajEqg7FzUFrC1Vu8LiwsyJMeAW70lmHS\nSAiTkVZhWSJdHPef9WuJHIJgXteGHhLuaaFoAfGUMM4V5Urk4l5qlsiN9KTj\nDBXr/LwMHW/uh31DAbBl+ERSDoYBV0XpU4l63Jpj8itP9F6qzVlejXyuaBtr\nSbqAjSjJJAfpWvrqFbuP99tJuGJ+Vzv6039hd6JPD5qfcb8dDMp4Sf7kHiob\nEpD6WjDHEsaIMHYx3EdPqTMsXUdxb8Y5dJNiI2OKtsI3XefpOkxVu6aeiS69\nm67l8rEEjszvPHRupETV/sUT83v/fbLSWemXJyLEFaDA5rgBpvyCY8aWpsvP\n7WSpIaNLAAPa7IPiyiJMdlvhKn6kZZV5ynrLVVxKxwm+PSO2sDqHv5TcP54a\n0FIKmud8+uvlyWHowXz97wFBarU//c05xpuqxfUSQg9CrOur35Ztc+5hgFqr\nIGhE\r\n=5BaX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIRqZf9RA43NXFXGnLd6Z4i3fHC6m5y7opxG59wI+dxAiBV/x0iugQf/3CxK2Y88wcTTCriNI0dfslpRmVX8lzaog=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.7ec5f2d6.0_1626110239337_0.6056888790021118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-icon-button":"0.22.0-canary.86cb4ca7.0","@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F6IgSXYrRROZ24pEDWOreepdNwBhkrD8T5lUaUF5b1/S6/Fn3l7JYrZ7dSoA+HXtuZ6BOTlxuVDWfZZaIc8X7A==","shasum":"15978efda0041d39e8ec612920e1651666c35801","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.86cb4ca7.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c+CCRA9TVsSAnZWagAAP/cP/2UfaC/S8eufuYGDppPm\nzYDHVPX+B5j3XpbhhjGZHJmlUL9qwVcyHiBOtxfgz+yn4kl6KzRoJ7VjBtHf\nFVC/loWei+jT8E/ivLDSrj89t6zjZw1pCp48H/1l+uUqF1taVkCLW6z2AD0j\nMR6HnukPsENn2bsi+wr4fEQkebTzI5+eqaMsmpQgjmxoztITIHhHcXt19OgC\nd5EanAjzWIGYBtm7/9Nu7QGTFE82OcWXoOLA89DHWGNJ3DtNkn4nwHAL4poP\nLkPypQH6cXLqLTNmh5BqwWbicOU5tB4Ppbi7jClhfimwEbK/hBuH1eLKNEBA\nJfWcreeotSvsPx8WlFmwnSxlkYokP47PZEiT/1IlxHQA2bNoECP2CSn4zMuF\ngqaaBs0Hb2R5YCKevDuGg4BubtHExDvLARnq59MsABWGrV+MFAROWZ05emMV\nOQlWUrJSAWTcRGfABJXeBLlrJLJr++YfNZ+fq57mYb9uPBxTDleIbx+ljlsx\n8DKAz9XlV2+z3x9GRQl5np5uLSL1QeFniINPAlOqOttNWSNWIL4zVwEaFTVx\nz56ETFptWcmbZi+/kBPkBcu/ixIfRVV+LFIF52hfxbJZNZe8JoLDOz0c2qkJ\nMA6ebLa/nU9UrzqH43apgHACKub9rcIJeodoN9H1mfUzR//dohoJbo2Tjm92\ni11O\r\n=NG61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD52VJmaqVPGlsrJYvrYhJix+ClYMSYY5uQGdMOXbWNaQIgUE8ewzkkd53o8WrnAIXPVaG8Jat//e2I5lSgmQtVbX8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.86cb4ca7.0_1626197889724_0.5570192273833476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.bc9a724e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-icon-button":"0.22.0-canary.bc9a724e.0","@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Y3JV/VepgGvIhq1qdASTvM4nNUviCXxee0aGZ5VyGZaeCDbYYS0cIOt1wJzawqJWNt58ST8XNKTprNW/n+XM0A==","shasum":"3d78874ec0795f744f5ac1d499995132e0679480","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.bc9a724e.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6YCRA9TVsSAnZWagAAMlMP/2vHBn2/e2tYz6ZFj6RK\nLr6Q369T0Vy7GsdAosPkwM26yxwhHSJPQGL32SchkUZssaJLF2mAAqCANLua\niOC0oFxwdNOcIvR1B/J0Bv5v4RPypxOSxdk/t6xSJShig4G/XXzffIbJHe2A\niA7iuI+UHDkp0NK2bQoVyJAwFCzBy08q4y4WX0WvW9h3MFaPqOYa87dg9LbK\nldRW4AOd1PWleScrM+t2iJQ3Oe9mZw6vZJyYtQo3L0JAEEJGAQwPT+4U11ex\nO5kSONq/pNm5Mz5aDU5pDzROkNQfUmJ9LuzuTRZsT0JMIhWk6owI0aWYyV//\n+A4a8fLSZQEue6kKalllrX4Qa3mFRd9pd/pRr8mcwFZyyi3ScDZYHSbCv7lS\nIKhGbaY+Ggkx4Ae6nu6hig1cA2b9ME41ei7kg9DlwJ89YRzR/bGYjGLY7Vbv\nyroZK2X7m2jNtgz6A756JtT5USIxCtUEYiDNANAKQ2pQPboi4/2ULTtHuY+D\n7uppYiHLmgGOD5Gh6oYAJFmGpwrrKxHWO67DXJltJfhKO7gF7xxgAAf0tY9R\nwDqSI2c765UJ+txY5Hhth1BZn5ttQIBwGiL1Zo6jSYDFDqjeBJV3A6pUDIWi\nzySonH4mT0mXtSvdT9r2QmwBfieeEA3xsJedJyxTD8jha2zGA0dqUAAvhrG+\nHg4N\r\n=Cc1/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6Vk4LNSpRUZS4MOijRll7us8UUnuQfkoHePRhn3jLbQIgPCxq1+QhBxJDYB6Oh8G88y0QFbrCMQYNWss9GTGKgp4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.bc9a724e.0_1626201752376_0.2608163781297266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.7847b83a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-icon-button":"0.22.0-canary.7847b83a.0","@material/mwc-ripple":"0.22.0-canary.7847b83a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B7pdDenpOjw2HtkkSAXbSKJL6ZNcfw9cIqxpCpX/BlJiUPawfDEoHRW6C5zmFBMa5HUQBHmZEssTHz9aVcwusQ==","shasum":"62fd3bc151fe795b742e455543498cb91d6001ef","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.7847b83a.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xyLCRA9TVsSAnZWagAA+EcP/0NH4n6YRO2X4CoQwmlw\n+QCXsKoLOrtHMtlUBSHpmc/AljlFTeBhmwvELVXVh2Ex27KpOubzHlSLqHVG\nka4Ah08pkx/X+rXyXVQybbOe4YAmlNgku86J4K0q5d7Xws/K308DMECMiXEm\nHEfYaxkC3CEDwItOmF+B/pR3fJxtJKNbkT7JRCRsf30Ee+tvETXwyHPZpB4W\nDrUiSvViFWyUDx8qPJql7y0SzQbeMOWxXFYN3ZCO23GUrr4po+TYw/XXELxr\nSXbVVFSN3mA+NeWh9DxvechHDZsyPlxJhEVJwXM8UdnZN6mXDfrhCwhdenL7\nv/cMBqP/7Odp49OIRvUEIB+UQJoSrMcMze33m1C4VKhV+Pz0J/n3JFcIyUyj\ndN5a78aupu2oKEt9a/osM5eEakNjO7nTfkgGAHXMDSJxeRJqMgJa52WMnN6z\nrpkeUwFAd3hH/9UrjK9M2TwL5a/GiQZ0hbEJ4M+7yuje4XnZFzLDXA+8vaJN\nM48dV8nz9X75FiTz3oXZKUX02WCqidToj8iaS3pwX0IdNaXAWvCIhthoeP0I\n0NyQHn0gV6tQ+iaT1n+Nkak+zsCKNOYpF8VcBqkHvcUWF4Ojpu2/IF0eVlGQ\n4tvG7frD4PCLVaHY+HUS4BPSGKOr/HIGmKTI54jG4BJKt5DhhFPRkfksWj4i\nbsyV\r\n=jKqF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGF34WDJsVp2kFhgtePF1HjLFrcWv/kPb3oR/TvfT6XjAiEAm+qehM4hGzvFr5XOpg/iMkqcwq/XTn9tZHdlN1Rz8MM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.7847b83a.0_1626283147539_0.8364356318842718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.22.0-canary.8cba18fa.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-icon-button":"0.22.0-canary.8cba18fa.0","@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C9+oiM/YXNt06uajPOfHDxY5YXYi1IAm6/Uf2drWmX+plMCFgyOoXgRq/PLWX73NQoQ7jLxl4e1PTLuZ2awouQ==","shasum":"81fb099a806f06a6b54dd5b8c6b867040b1c43b9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.0-canary.8cba18fa.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70ihCRA9TVsSAnZWagAACGMQAJDV11Wwn97mOZXk9bd3\n8EGUgsFUhKepr8Gg+PSJIYgrhuHH/hG7uK/Li8zDeJTV9R6giJPnx1FcPOMw\nKs4672TbLK8gK07xUN6xHKLi95sem4qhK2XNUkISiUfBSK9a7gimkBJMByqX\n5m3A0izDXLHI38MmB9xrSh7/Hbmpv7cpJAaFwFxi1SFlvjB01NfROTcyENsF\ns3fFtSFW8Qae7tZuZmMTKRQzHAaI+oGkaPAGiyBQ9y0GGjt6Ir2p/rMqZ75+\n4eUc6K1aE/+S/olYuVpOyXozqMwQ4BWiGfw4xwKdTx8Sw3vDc7Ipb4314r67\nSxt8eYHBAj4XxE3D67YmgojonyUFB8N7nzWZjiEWtRGScxSlZXVoM0OojBZh\nhOPNd9a3WgNNj9YPvEGjHbL9MomodPY684R+QKFc0i9KRDYfAH/nTLDDj13w\nlN9+IkY/bVewXx9OV3vsdQpMBLcvSQH6rphKnf5BAEUGb3ho2x4P69IFrPsJ\nGppuXBpxjEhywQ1twFDOVSKEFqYrgEiahNVvLkT0SxU0jgVEtgg3gDR/HLfe\nA4HbnmeXRHKSOuZAcIAgbpDkNRP2RXRAE+x5vKnMviaIxpmQOBLjx/ltREdK\nE4OOIYogB6dnHIUjzqas7aUHECYAAP0vSxP+vtQVK+Tuu+WC/3MrspYMkKxB\nju8i\r\n=wQxB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbI1rGVL0S1yJ1/ex5CZLjObyuJKfaMXQM4poyLlK0RAiAvYyhc+WlCaPrw8IHqaJZ+E0oSA/bKgNgjXGAwpWaJfw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.0-canary.8cba18fa.0_1626294433093_0.8026711511868057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-icon-button-toggle","version":"0.22.1","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/mwc-icon-button":"^0.22.1","@material/mwc-ripple":"^0.22.1","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-4r2Hvmo8qhYfEmWNUPvXxmBY0PTdN3JIFvn7d8WPukPgVSCfhh8o4MbxySoHcuo81A+2K/eMRAiLNY7Y8O5Aew==","shasum":"6f76a54e144d1ae76fbe4754525c2f33fd29e580","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.22.1.tgz","fileCount":9,"unpackedSize":38306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rKCRA9TVsSAnZWagAALcMQAKNDQeiAf2nUlMyIB7u1\nz690fswSMF+dv3HSAt5mola72apuWX8Djql327qSFDzv6KsWvVqN3XF+cE/d\nYs8LpfG2GCvGQJXRhwiitPUiFgo+nN+tstRjvYxpcXhiIeXVls7HLACM/spl\nz2ZpzDPwF4eTTMpfad9dUdZ5XgroI1KdVjW0xic3MnP6pbW0ONTAIbMBw76J\nSqaIQrgVngzaeEMBNhWjm/YFWnBil0nq94m7t1ryfPPAqEpSJVeN54gNlQb3\nNOZOnnlybFoOFPTRrOgjfSyN1wtcoEn1b2HOcdugeUkECzcf/AU41V3/IvCR\nDFJN7077Gjg90gl8M/2usBe1frh/+1pSbvcL55xMBydaEjBwIjhNvnI/S77V\nhAvHdfi2og+7M56hSoV+xsM6u63eaOp19bJbNcBmRIl+k2hma0j1ZNPB9/13\nIsHK8n1ec8xGN97ZZGDZ2FM3YJwWHPweiWZ4GQTPEd07QhZLuaTU1UDj289K\nBBHgekMWUxkt4ct+oZJsKEW862IgCMLxiWynGzkIv6hexdoxhdTMhhLZReFh\nB4LjfHoMlTYTtGWPFDsTyOMc+93bcPujD5mxl5WxBzSxryp6dt4biI/edu+O\nqxi3IA/wFJUc4WIqGeEY9zM1Ow3HeGBxZrvC3YLo+VWEvszK/tpzQNz8y/it\nMVX9\r\n=pGCP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgZb1lCEc8/NQKOsuqB7L0R6O0j4tWz8En7f2uLxztBAiEAxODQjv9zvcRdHEdT52IM/reimPVkvLiOX/1hFwvuYpU="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.22.1_1626303177958_0.513076578610925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-icon-button":"0.23.0-canary.fbc09b4e.0","@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YqHWBiCPXnYgdQWGAJbSDoWxDfyuFFX4pDo30kFXPifW+nIB4b1UtrgAl6NFdOq6zK7ywZ6DQUG+m+oeGaWDxg==","shasum":"8b961a56e3861b7b6c4002471149955d520f798e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.fbc09b4e.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72stCRA9TVsSAnZWagAAKtYP+wbrfOAeCIuBInqkZKbQ\n9qwyedkeoPuyJtpnVCq/j467mAFgPB0qnPwiRw0moQProeniZPiXRBst70qN\nH1A79PgRT+jpJmjrwIIKuBMWqrYrZo4G1XzgIgAr8LAsC2XGVpAVynAnY1wq\n+Vn3ELQCyPu+I4WyaLQmEs9+NVGoCs6qZrEbFUU4i2iap+T04cd0ttAYkzXE\nQvq/6hSIQUZ46OrydEV5gsAZD9VNnX8onUADFqgqyPt7SkALuv/1rgtXDnM6\nZySOddNkh7RxweEI7oi7IImsmXvQ1R+NDE7pJQJpRR5ooiDiW7WR70lg0W/T\nJb/pDYwyaCoete9OvJcUYOQFTHVUiNdY0UNk/bBJupbKdItj+b8eDpegIOXp\nTkHSJLrC95NvdjbM8kyjI4pRmBJIgShtJp09W0o3GiPtk+Dr6Dl17Pr52jMY\nA5g1cc1fiKwoO8eXJgkYeLXSDvzudhBYhM+2djb0QKyu6wAC9gEJwWGOJ7t6\nCvGVt/aU8hk/r/fONgySPpaYrJdtRy+PmFH7zpSmyqbW8vNYqyHEBIGvM5/O\nUVoI0jCLQyUMZj0u3wkN5FOKPeKoF/N+GxvxSj8eejiqBIMpTNxRIq0QGGTW\nBIswUk1MRu4BA86fLy0cRJ6vMBYqStoDGv/khdC7Fn5JeRlB4kkFPm0FQYH0\n0Ryy\r\n=nHIt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCev0mXEPT7lm/piKT05YPOE7hERwQm7eFcmq3LOQi3/wIgbTudC1SibwA1dWxSvx2w3/DDtuEIuE1o0DFmIhM278s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.fbc09b4e.0_1626303276977_0.5944286764741133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.73e9f83c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-icon-button":"0.23.0-canary.73e9f83c.0","@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4J2pKiHLGZsVx9Wfaat7H/4hGXhnDpmV+RFvDWvie6A0er4ECu2LS5K4I6HxQ76A4WWNKuTwBDsYtgJ6yLnZ/Q==","shasum":"3944fadc316eed66e88db09417acfdbca9896aac","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.73e9f83c.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0gCRA9TVsSAnZWagAAbjMQAKTwVmSu6R/PwRFp2VZN\nIBXqp+oIdoT+6VEa9RS9l828UKLMQ67S5zyIw6/fMymnPZUlIqMRb+wBvbKK\nYRCuhduSJoAjuJdQG2ZsOBeEoW4AJKaGLkL1XxbqhL0S0cY6JS94o4SsCJ3b\nhWRcM6q6MZoaY/RmetRa0QfCrucdc5V2/p+CrN/BtPKsFdRJSPpJbhmSAAU5\nf2Au+eql277nlBCLAeLGqNUJUgK3IodmNSt9es+aBLXn+T4kYMmGVUPoD6Ii\nkJUH6Ork6pbJ1fNRPpeaJZfk5dPjEe7A0Tq2xjet5Zm0YPZZjianp+iam9Vk\nhlo1L8/JS5Vy7shd+Naf6cmbidiOvi7Z2LQGqlA4N66vBnvrESLPELQzixiA\nvZ7mOhKj8Nj+tuJmRIMnuwEtqW9g7EppEh8ex8165vwwkmqHEIUpfvrVLpCH\nrZJXv0jet6g99VMTAfJU2voBpFcRgCnjwnOF8d93gcGFF3yYDUKkilCB7nZK\nQqTnrnWANpyjkKhifKg22BxlI8x8pz53nqSsPietlSFIDY075vGYcVv3N7aZ\n+9jsc3usyBfTGYvpW9YLZSWiLPguZFPcb0Vdo7y8z8a7eFIAps7bnWdvo7cg\nKj3CybOFJEfGl5uhpRmWZchl+Z/NSZmf0EnAi7bhwXXIcQsJ+vl9PL903Sc8\nfE18\r\n=9UWC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEExAiOtQXfpVRqKVS7LMHsqn4nXjuezF2R2lHB/Hh82AiEAzFHIbtuBH14/5+sUR6haSS/OcWydZ6uRUQCenRkjBQk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.73e9f83c.0_1626381600021_0.15812263060591536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-icon-button":"0.23.0-canary.cc0aa7a9.0","@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LQwQxXXrt2DuFv+ECcBP7el98qGQNKeOdkMjb2GMCbzs5vAOog+gg+EmCW8Q7PTwHJz3HNoTll9OQCNwHhSaMw==","shasum":"b34e45d7ca3da04386ed30079b98e95fc1e43a2b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLOCRA9TVsSAnZWagAAjc0QAJe08bxLfIWN4e74hZ+f\nZgRPCe2dYi2V2bPmmpu9pL2N+LDa8Jg7++KIYoNKw09XbV8GP9yPQBklKV6M\nPEwXTKvivxnxo/D718zPaHMQDY71R68lfIhkSjxYinJUUg35/hv0jfT5FuEt\nKgrEJeQ+FHZBe2PQRII414NdFbCoXoAFcQnLxI0PxmCiJyi+ZXV7kjlgBebw\nBIrdnyDZWj7R45DSwuhABGQ9cETjEfScu385TAdvh0VvBNrtIGQ0NoasYvyv\nwpaKm0a2Z+0Fy7hS7fazQSclhRR/NlZnh/81mXrDPpld448eC+BlBswKMHqx\nKPSJjOKtwomVPNOgW4BqfzJjb47mdGV8xLqr7K9niVy1HP6Zax2vyGSIgp/C\nfVPSTaw88sHGgqWO61YggAbLwzHh4c3qwDYUdM3RbQuh/ip3XDwejwRAqggy\n5fw7ZkG8n/sNfpnXnoy/UuHPwJh6VBKKU9RTX+rH1F/XsAzWF6XzZKEshLd+\nidVQil6DmxkqJ5mYEObTscrt5ZZBio8oCvxtqZQU5HmrefqETHyftuBtWE8Q\nNR2eR5W7zGoMJHVhVbsI1R0jp4UW0a9W20qdeRuHAzXjssP4vaBQfcw0o9WC\nBACj+zEiuRe8Mr1zshfJrl8PNo/l3qgEabMA6xi+DWxLQytwHBoCwOUHKGDV\n2X86\r\n=uKoe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC67lFlvr1uZ+TFOZ/eA7Wq5prMSBSZG0+sY4OVwdaIBAIhALaHgRdV/2UJjtrIFBD4F2L0DGyQYMFlE+9+TVuOSrfP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.cc0aa7a9.0_1626383054765_0.6358436950963655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.a8fcac45.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-icon-button":"0.23.0-canary.a8fcac45.0","@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XglwbtYbgCwfHjxKS0/CmX2xTLi0DT62QBH/fHqKOC7ZhXj4z9kAdvLeXqs2cGtjIv/PFud+DNB33Iw2AKdIKg==","shasum":"2ab296af2697af254e1fe832c270632ecf8de30b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.a8fcac45.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Kc5CRA9TVsSAnZWagAASFcQAJiYVt4mSuYRXQ4dMdKD\nAjSdmPFhb6z1AZfrwU5cxSoEeJ7ZAhqp1ROL42ov1kQ8EMhCKVxnVM37KLY8\nALJVpMMnusKnX7dtvtvwFkDYMh465VKQfLzY1cbPHwcrB6A2eyK3ZL7fpTrx\nx5oIeR0ja2PqYSb/AX+OZXqsZbADk888L8YbiqOGy+SmNrEQmfhLJVSOg/xk\nfeE7kAvvYEhpdDLBxRDeTS3r8ofdbJwpZzRfa/LT9RTezHis8MD2kWmkxe7g\nG+6f/nXW3/0cDeJFFi7uW3mc1ipOE/N02NhnoWGY72eQEkoCeeqHJn6UBifv\n6MWKx1kjtb1Xkvdf1WF75tO8ADEypoXq0tGqnYzzbF2KzFmKVgHp/UYL5ndR\n4oi4q2a3/HpoWfDM+xLu/TD34WSECRSDc/GCdeNnNUNdpDpLTQxsLOaDklfn\ntJk6DqX8C8bwyH2kPAQrblq72fxFvnYFfj5lPg9j7T8WdjQ1DC6wpJ81m3SM\nEJTqAT9DjcnS/xobcwj5zZb31zhEpj47V6yGHWRZxbReGkisJK8NfuSRiOnC\neChmAW06pgkF7B3nwN984349geaKChNovt8a/nRcODMeG5Ma9wD2U8L4EwGj\njq5IbBSDtk2V8ZU8nxu0C3DJB87rmNt8eQyIeDWa0LZaqvJOAu9wxAXKhXWF\nuc9h\r\n=7ReV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUBpaZddv3bSlwf71JiHe8E7t56Xa3CFRrV8LBo9Te+QIhALwZiGVDrk8IxW2EFuXT4aAfUVvhB+mbJ6TF9k8lSsVs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.a8fcac45.0_1626384185222_0.6831180461327935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.3ca580d1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-icon-button":"0.23.0-canary.3ca580d1.0","@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pfVLjokuxkVTyZgpt0WD9e/Ro5onNUFjtKIm+Rhy0ybYk+dzzY55X2Q65tSEOvyTO/X86Q4Q78Ki6Jv5tk4d8Q==","shasum":"98cd217fe713d831eeb96609c2257bcaabe17a4e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.3ca580d1.0.tgz","fileCount":9,"unpackedSize":38375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDuCRA9TVsSAnZWagAAoKUP/i69oAQRcpKwa5HArkuP\n9hKW5mTwSasb4ThMlL4z5b4VRG6XOjKfOo1Bp7Usg6wPI1eyjR/FXwlrgny+\njWhV/+iLiFn+B8WapNlTCf1V9XVIDU0SwofOajzXndViLrdXFmf+EvnKz2Ki\ni+Fg96SdoEJM98UgXQKYTbk6sxFHfT2gXTVnrETbK7kdtn0MvptcTyLNhfSu\nBe8oFiYUYjrdNU3dRQn/v2DwYE+9E6nDSVj8VqVPPNOd+uxNGAsTK8FcXQZe\naKrtg0vYillT1bkml3BLgloMx5kXgC7mEJHi7bCT/mfI93Pdo09ULONm5/pR\niSWMSK6jlMao7dvo5np4Y8b/5/4gW0anRmsr9gDMzMPfVSyHnRF4cV9kj+7A\nWTyPQxfqlbatcOvTzlIe5MgTZbUkWqUMG4alaG4eFf3ix9Yyr4UkAezrmCsR\nIjJhKcQzSHRVDq9Qa/MO9pexix6hbb+Xe76r/3dtVkQ/QWOMKy0F5S4R+fOm\nxc0u7GMqv8DKIABpOwYcrZajP+nCPgxqTJp1+mnUDMgsJx1ehTyCjDS4ti0R\nTyP8/PUQt4WFHrtzFYe+F99SkVAS1yx2B6lZPFzTqip84DUe5inJWi/EkD7u\n1K6CBnk6fb0Ps40fU3B681pLBwI0fAj2+v7fx8gYNDbKMPp5UbQnbzaW5s32\nGOLn\r\n=qC64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGkxMJ08puX6+2lY0flCRsl8eJ5Hdc+D1HT7REBoMRKQIhAIs7C3jwgPh1/2T+CsDVBY+fZ1l3eZBEEsDNkKcGKdua"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.3ca580d1.0_1626386670421_0.5468129760508611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-icon-button":"0.23.0-canary.9e41cb2e.0","@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jzXSKaos52tgxe99zppT43nd7vxflCKgca45KSLyGhnlN5AOKC4sEq7T5wxFPKx/7tdxnP0L+3TmTFj4odLrQQ==","shasum":"c3147dbe5f0f8382d57662837803366f47a16c73","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.9e41cb2e.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAdCRA9TVsSAnZWagAAIA4P/3ycbYTtCRfJh+lTSu9o\nzDwnNQp829TIc8wgs/do0jUPOq0YiyBaysYMXFMCGGkkDEl+5MJV7rxf3iHl\nG9rH1RTStd7X3U/jOxGT8JBCg93btfuna2BPIkzVn+vjOPk4rx+/VMUQzOz0\nIQ5Fotw9UAabEdnIckF7jyLpPikyH1txj1kzOm/aB9Tn7tRnlvbAw/j0BUQb\n6Sn/6QNR558l8mCZGSsEjtE+PDZD20AUbLC4OysMPg+IAXCezihjY6C0gPCp\nqFOjj7wP/y4EttdTQxXTtJ6UtYpC3fU6lASa2sJYZiFmlWLXAHT0FOv+QuT4\npmtlupmjBkaXPjRvmqQlRwmqZf4PqeA5mXfGePukgY60x0nAp+zTTXkUfveS\nKphSRf1zb9xZmPpkYk9VK3RLi0ok64QSB0t5vlQp4s1o6AamkeMYFgdUjol6\nZYYaKWLaXvnSmJlfMJeQc/eoabx+WlXGJyvE5rRfwkkVSgrSZrCcHz0eFDyn\nfZDWS1Y0W1EgdJM59l0eHkkatWEScceaCllGsW4rZmwLNjtQwYnkdUd+Zlfd\n1ymm+W8SkmIn8Fdsa4HkeqltnDB6kQEgu9xvfgekFnYxOSNze1KzpyetKYtL\npQcX5/QMbRkCyMh9ptsy/QD3OeWDyufNd/PPfihGY5cq5Fphv3pvqe64toc6\nE3cN\r\n=MYdb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjX+aOZgHEdKpICBvUlzF1d4JIkmY4zhAfit8cySNJtgIhAIO0Bwk9mUSMtHRvnG+s72dqAqRhBeK1HVVoT14KkmWK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.9e41cb2e.0_1626390557122_0.6726907267474584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.c180db74.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-icon-button":"0.23.0-canary.c180db74.0","@material/mwc-ripple":"0.23.0-canary.c180db74.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-byxbePqwTEcd0CRkrCvUtXoM90fWuVpvW2l9sYFqgKPNUXxO9FbRH3c8MfzRcpohJ1rynJ9n3Jsu9Pz71XOKBw==","shasum":"bc7f02a32186efce9e9c5f6f4065497a4d90cee2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.c180db74.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cEKCRA9TVsSAnZWagAAhTkP/0yfedax1qb4eV+qyvA7\nWEzoZQk0NvKSe4V8cqFO5FBQU11g/+NZ8ZiFwNfpcNzqL1dFFROslrSndLUu\nyJdKsecYbcG8c0xRh8GScHt6S3ks0AoMtXUaObuTpkhCu8KRp56nuNZxV6bC\n3Jj2AhWN8zOk6rbK68/3Y3jIzeZU1iFhm6COM2zHhO9GZE+yxtiYHVOin3mk\nEdoQ8OO3mmB0wYzm9iuYmGkAMoWyYKjOhxoNh4N0VipNppaQQhkNH6dgPKie\nK7rYKlb8iaL8jq7kihm9MuLF1QSjsuJ8Zn5+ClCA+26GFKKB2X/NP/eAfPvQ\nqxuWuXcRlp81tYf/jqk94j6T4s7swJpUFmJf6+PTn6TI49RtFIHLdxOqLNKO\nw4VOIjRH8CLrVEWHsmQAPMTLLdmmxMmyM9EyAWOshcgwasFIP0CR+T+/nHT6\nD4ZS1GDEAFgSpZxU9Y5gO28rktOTawcJ3r1uTA2C6+ZiuXAUD0WdwRrIzP1K\nBh5OQh9+7CH4f29tjUg1+Xxnn9D/eVn4BJq2ipjXKWrnoVZdBRuMLcYTeSA2\nsr1pejCSRL2w+7AbmjuIfI7Z4e4oQueKEsiAv+JsfYMyrtJCqTi608qtFjIZ\nMu2fP2qlN/RsO0Ff3mNhNPJPilon+udWz0bsW4+5r/TYBOJiPZ66rxlkj5Js\nTcOZ\r\n=V88R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoZVmOySqwimzjdrvO2Y9qrvugJqarVzvfS5xlEIDM4gIgcsw6NB9zNEsHurisCyxeMvyXyN+lfS1G2Bcn16V1Brk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.c180db74.0_1626456329899_0.4062268802151816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.0d0a9267.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-icon-button":"0.23.0-canary.0d0a9267.0","@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xbWlfpvULczkzDHDl0FNumM/R59LY5x1h/fSyArfdTumvlYvXLlOyuPHqn/iWtGFg5vcj+3xDUfcAu71rkSLsA==","shasum":"848802e0de854c5a13bad5ad6c26cccc6828c78c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.0d0a9267.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciWCRA9TVsSAnZWagAAg94QAJh3vvUtKxR9T5O3Fzso\nYq1K55GgV4FGe46cZZMx++6FmwCcPfgc3hSPz84477QFtWBTeFRVIxuRboTH\n3CxpBR/eVstIHzN3dUyKv9peaGiysrhY4yJuPo44CjuuLlvQ9M9UutcQiJsc\n9xowBpKbVZS5SAStue5TM0Yt8yBxt6CkWf05nMWC40qgJj8ClrJFRK2LdhSY\n5Hoi9qtzQLYaLiyBdVo1+oCeQFz1OvQjm3srBZb1/CVZwJDTGIwnZdRrZELR\nudrzkYmryoUYynFU2EeHL6HWmRwBRrdQCYqUmjm8ZTopMWggtKNyWIVg5Afn\n6PF2GhvweGNRIxRe2vp/BGn+c7uYnz6nWITYImpM9hB9OdKVbplyh9U5af/2\nmt/wUeGtgQtZE+sYuiTv7mCAtE36DWjR9zV/+QRqsNgtBKtDMSF/sR0L8Tco\nnpJHTayYPrr5zJG7PQTIWtNr9DeIhCc35cQmh7sQ+3SChanxu0O8irM9grLb\nIwyNO6bysb5SZmaxS1Jalit6tVdT7qXxm0F2rNHiYgB+Ym9fETnms/zDj+RY\nY/5ih9OyJkyN7vpRgsWh/HtkJUNxsDaHdXlh9/cpbsLMTBmHDAdUBKaPmB+h\nXHJcqqv6Re9cCFpSNeIwKLgMQItyG4WnjUKQbWvlYluv5SeIHOOvzD40AnBq\nlSIk\r\n=RSHC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFB1sBAsiJ3IPtXDzyscmkAH+OJMHUCh8F1c1XS+UmJGAiAyxCsygp62/yx2FM4JVbsGnLU9mguSRiJFmbby+Ex7hQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.0d0a9267.0_1626458261906_0.6157790018846583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.d234ec3f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-icon-button":"0.23.0-canary.d234ec3f.0","@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GTxXOGZ/qgmsVa6wmosSaUxFEtlrl+4YRWwxkl9U9z8AZxMQM4NBN8YZ7M+MTYtydFEsf7QwE6fxCHp3QlAwEw==","shasum":"52245d3ca3ff42a3cbf79808bf5fbb42136f3f5e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.d234ec3f.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csMCRA9TVsSAnZWagAA/gYP/RJNIVbqD6A/uuesWAXy\nFn+4W1rKTWBImYQFnVZXC6wKNd9r4WrC9adtVRWXTe2hA3wuO8dRCvC79oBC\nh88cLCLJcwi5uaLKZ0io1IMrgZ902/73NhUJoSPhs3UWrSZ/rM0t7955RWYp\nX/azfy9DSCuAt82NClGv9ogirn10XRmuwVEm0e66k6b4z0eK5cJW5/LXhaUP\nPeZ9yDin9CCzMBJkWb+0R+T/qjZiINLO6U0FnpBRb3RLuKlauusBQ7n05glx\nW9LCFvaDZQNn1Srnbxl3JV77sOawfuUzFZNC4N9xQGiTK2eI8l4eXe9Nh051\nCJnMJwhfGIGNs+JUt9d3vm56EAqmjAhw0wczWQuvbgZoPg8xlIoUGY+CnqqC\nlTIGHfi8i+BJlXu/FBbbtyHXD3vqDLoI8USn2IG6twSVv1rHeaxjxIR5eMKX\nNPa1n1lN6EvJCP5SByzjzMNunQ8C3iXi8v9W3TeJ6UsisuYSPMtK4e//4wzo\nWUNgQGRfXmwt/TiE+B5BkML6BEJ7Pu8/MKA3qpCY9FIqx2LwkKyNS4JXrRP8\nPBQbcueN830SeAZzDvmCjTgGG5mW2DKTnnYTDdX4bXLUCm4Ael6l7i0mvNBc\nSvo8muv817NRw8N60l2PHRNsVYyQGILazahnlRPM4ZC+ABXU//rJTWdMYVau\nb1He\r\n=Fq0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvWKnBCQ8KbeTY6MYaKmlUqCmvq4foOaVOg6iO02kMwAiAbREqmiF5HU6KX5edRD0O2yG+o5AlPnFgW0Y3Hf4/u0w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.d234ec3f.0_1626458892628_0.5107139018232116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-icon-button":"0.23.0-canary.5cd4bcdb.0","@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fnbHH74sbV+85f+phpIOU8VlCOEUH+476w8LrHmSGnA6TtxjharNykxMpRWChwatsm/Cb7SrrGhCuMzx3pKbVQ==","shasum":"4aa5d149c22f1383de61e780d53ae9ef98343408","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fZCCRA9TVsSAnZWagAA2MwQAJpvexV/HMzqhHBmFz8s\n4riGiNyuVO43d1Ug3C9V8+YEGOsLyLWrqN6rVwhJaCauSxF4qsvb5M7RyeZf\nV6r/x5qP/s0ScqQVZF4DlZ/Wd5PsfIbCFBQ52ijv2kOTlMrEgzP5Uxt6AqNB\n+Hwgkqz7w3afR0pHnquQMwGYFWG3qD96Sf2dMwIlHT2MDlCsDE72p64nyKZb\n/cIOnI66VFlR7L/ESGTmP9bSBfCfRygWiBY9nr6BYS1TsSuoxYdsU56nh3dq\nk1WoMoWanFTB907fLT+rduF74gsnN2Ul6Gfj6BfBl5879z7AvGcLpdqZhec+\nSGBRTFSmpO5IDAWk+JSQ5tAnmDnIjjVwcpjD7y5/wBfU6gllRcTIZ5S452mu\n4y6VBL+43d4yMaXmjlZK4V2Ec0PcVUyoFnnA2Ez+d60C0o2BoKIH8YN3/xyo\n4rIbDwlHIG8kECRlHl36y+LCO/nVmFL6oQe/pInLpAvVHCJlmAp3KWBEl+Ou\nrFWq+hmUKgXf6DWQEs5YQ0tkNCafZaOMsr9uaTRZj6Ixzq11XlgdjK5zLMrn\nS9pRJn7e2gYztUzSs+RhslH/Kr7JSGvyDhMr4Gh5NzSf7St2qK2iWvkOPT59\nf75YEed1rvhbO2slID+5YtI5SX8Yg0UGJOOEybWIgnWTUXyRvIJsAtPUCIF/\n+aho\r\n=BTP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUdDempZRH33Y4ltqUBGULvU6QEBgLPUd45gxRvGHHvwIhANPYSKRo5bT2GoX5/eIZGsYn7Pf6wcqWgt0zhZTzOX/S"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.5cd4bcdb.0_1626469954632_0.14109644292336943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.2b133cb2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-icon-button":"0.23.0-canary.2b133cb2.0","@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n4TQRvqSXxyqdeoQ6TYCjhA/CJySqqWI5i6cxuTzluFK7OlxhR63ezrxYkx0pjUHRYTB6B44F43tVv3m8F0mug==","shasum":"7d9234f9f6ba3e4b6bc1f846e3c0f757991f23f2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.2b133cb2.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gMFCRA9TVsSAnZWagAA0dwP/R3H3wqdj8scadnaG5rr\nj3xtDpKAyMgoVHV1ElR0gdv/HWwblt1Zzh+p2kvccUxCM6PELPG6YxQ8HcNa\n8cnCRpL7c5W/Y8ZJPBmnYYmueT1zxEL+CeCe84zxp12MTDR56UcA9jVK35js\nWJzeBjh917r0tVdEfiq5uMZXQkWmt4Jw4mFosBlegIKPWhuLK6q/y14u9D8z\nT/1aFWgpDARv83aL+auq7z1AxkY4k8kI8XFA0VoD7nLSfOChNzKf62xD0tfV\ntAjoxD2s6DSs+Qweehn2Flq3MWn4dJKpH0lpWfpoHNCTWI9DAQAYSZoJ2ykC\nkXlBOPROq5ZvI0lN+UMnHhq0lLYF9vN999KtZSOuyGcCnR73nc0L+Ngzykop\nUgmLwNnRcqYxMF41YPdNfAxcsBizgOTBA3zORpQ5gLzqbRoA9+WKt3tMNPGo\n5RYiCY9INecqzLejDyi8RTA/AbKWeJnYTvkMowNwJsuXYk5CzbXzGT39EEHH\nC8fBzqXkj/zVGIjy/Lqs5kdk7/zXScs9+/FTXha0GvD4iLpoFI9NE7WW5ksV\nxOD3da4GNKsVjWglH5WID/VGLGCjWQejEvM2L3fC1gGQ6nBWw4eQ2vaKi9EL\nkwYiidVk1GbMvyO7SPgtfbD6urjil/jUxWqlyoe5jp5MLSCBMhKV/WrzUGd5\nwPBt\r\n=rkSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC05fFxNsbhX8wK7HTdOllozG8B7OT+AQeh7iAvm/okAQIhAOdfEssbyeX2aLNHtVrtorzfRVzvzLAuUEuLC+ChLuuK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.2b133cb2.0_1626473221834_0.10855556294147184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.ae4f422b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-icon-button":"0.23.0-canary.ae4f422b.0","@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/s7fpcdPHAFXqhbUAyGCmUXyC4P5TbWV5oGSXYlkCqvB0MRia0EjCI8lU+r4nYRTrmMV64ZpjcLZgZuVu7w75A==","shasum":"d97d1527c037d8773a45a7b03c77303ce5c063b4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.ae4f422b.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hw4CRA9TVsSAnZWagAAsFIP/0nQRbH07YpdGkhAvp2O\nGyum42W8Vxr/8oDKkciYP9xu1Pi7pbGhQsQDuyhDLu7D5PQQNnNvpPShraBD\n822TI1ZEQDH1XePt++5+JfVTPhoW+/h6OOaz7gVtnxRC0nw12ybD3Ua67F6Q\nClwRRzopNwAAFU/2vWpQrp+uRcZ4deIGW2d2qJjE9zW92NB2Hs20VS6Mds/C\n+9T3Q6lk5ib1cvQp0wd9VETBxm3f2bD5LT5zIB+BHx0PGSFQVy01oxHgkAP7\nXbV0jbf3MSpp+L7sICf587vfHZshgyGikxM2F3mreBm6rM6K3/N1lDA8VDVL\nRhrtRgPlOivFMeO7/62QZDA0X4Kg5Qjzd0xPOJRK60wGssEhN4hjr+QOAYkr\neILSCUc+Xx3L8XoKtJ7erCD0m+BQ7iVxDzc+7vD+W2/CWRYLYH94CzaWTABG\n1kCY1Aj0H/9bmMJTwZDPkxSRHezdv8wY5yDceQZFAmizklCcD12/eQIUyvi+\np1duwbycY/cDqZhp0M6+EC6VYROt4kZpWCxmWiRy1aJeKSLf4rm0KfoHRAu2\nJ669sL3PXSFJEPNHlhikeoGAMobvhMwjipEf4gRlcc55/2vTDwCifQ614Sb4\nfGQip45o0u8s21yJqKZeyPYg4sH0DagbLv6lFQ6pggs0+DpG9V7GLL3/Wh5Y\nw6so\r\n=VNyS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLD7lJNNo1KbAGqB9/lSsmvMkKc1Zfoi33TlhgLqmZ5wIgFOLxTMxV2JY1MvdD6cPQs7mOiCAOeAGW/zMflVuUC0E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.ae4f422b.0_1626479672502_0.17020786785550146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.90ff8057.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-icon-button":"0.23.0-canary.90ff8057.0","@material/mwc-ripple":"0.23.0-canary.90ff8057.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bi0p09nMFi/6vzSBrevZ9hgIcKrEgMpQkESe9i9GsfbEQ5lbOr+7Y6x+aZcSwxkee3ACAB+yHZBvQUgKskkK+Q==","shasum":"81bcb125431324b028e66619ee0212b18d0d68d0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.90ff8057.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YdLCRA9TVsSAnZWagAA/UwP/2HfKJ2csm7AdEtMOQgn\n831p3Cq05ta8ue40YTIaQCYpw/B+x7FyVF+S2M3i5pW/6U/kxH+Z/tsrZj/e\nx19/KaC50CKxSATe8jP7bVa7LkHeZYXzhhp7nmSmfdBG7ObfThaFCMc5IzQS\nuZ+wB6yXo+cLKuTQMrieJkNakrDR5lZkxXoa2bnYhfDotftkf2sGJZ2uAGKW\n/4OlBKAgzp7+UMfPnaqxz8Ao80rNubYVpJDLXDrZRBVhqo8Jf7HXF12QORkC\nHMMt1MqPR7bR2+qP8xBK2dBlgzkCkFngI5AzTWOJ8fs/7Z9XujVJTeXouOpk\ne0x7zAXMlLpgsbpg0ct/hgIzekIJGxQ+sFBWMRpni3sWARyqi/PuyvZBsSs5\nf1xuT1lYjUaKnT/1ISoIYJGeZoduWXVGc5XB55MX+aBJfp+NTks6QU2mBAYn\nQnqB52NNyYkgWzwn88b0PMKa7jf9d9PbQZ2vTpG/GjnSBgKXIYK87uUsQtJk\nHRoVnu2+gm8HImFmin8yMCneVScmqwocaUMvadtDdS8fuZQXLUG0qzRFzUqz\n3QWQhA8B3gXaC8cGuhWLZDgtqlGq1amkrbZj8z3s85ZwgqPkJbla23I6KL5f\n0OrCooFN8wQ6QWYIT2jCJZiMqCLO3jvaW1lLAC0RQsGUyHxc9Z2bdDDx/uls\nZdKS\r\n=/QEI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA++TRTP352T1Fl4PyjY+jFu9D7rjjeIeeqRzi9VQ+BdAiEAzWYdWo65KmhIaNZ/351U3K82VLapyU5wgIKowGCizKU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.90ff8057.0_1626703691068_0.6088676185233479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-icon-button":"0.23.0-canary.dd7b75d1.0","@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sqpuYTwVbHwNsIfpL7usYyN6du/ngppQaajOz9hh5hLJYNd0qTgs2g24gNZqaAbeMWkoHwieKO/cK/R9Ws0esA==","shasum":"5f24d9c36744593d11d973c6cecdc5d7e0c13ae9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.dd7b75d1.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9buPCRA9TVsSAnZWagAAI/kP/RDYK+RbuUYVYBsrn9k5\nKRSGnoK2gGvtsU2F9lZyn2toBdibikGR+W8HJsi8A0JlQVKFQIRcfqKedaic\nCqDKBJZnnGjmpD7NocEKB82Jk55vsOmRhq8/oMbya8l5C6u3fOcaVgbINbOz\ntmQBjXsrhUycoIKncnjdplQ9agHXbXVBklWvfvviiTzVInez9o3ZrYnweW+c\n5523iTGJZ7JUVRt2E/YxXn8bA8A8YULyy7WbjSmzF2Op1V9mQYq9506E5XpO\nW5hLbwguZqyhSXrCAmVFSR3rgcu6paVFSYkogOjEmgsDjw3SC3DxRQven7kH\ncR8TkzjcTn+l4de2xcUZygspNHK5gJwAIWE2CIkbe87iCxswSVxNbnhDQVZT\nTw4Cuf7oIQLLwMlFHxrzrKT+ktOeLLR6aOwpu+3wurj2qUVIu648xUNQod4i\nn1nB/8eZKCJFWygPcpLwEwJcIdiuH5+Wmn+8khdyHgw7izBHfDBJ3am1AwVG\nJmejoV3/DAhTP/u0cJ+tJ7ErEcfDhlvJEzn6yU5NgXG/GBMtmYBjOsudlgmq\nedjuthQN3aX25/tmpfjMyS0VZN2yFnoWnJAti3xMM6v5TbkXxkGHPeypljw3\nAO5oXTUNDVwilvKOXQBNr9W2OFh2JrPUpCsN58Io48IIcQYeFLYP0m18T9Eh\nw+Ze\r\n=KXIm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxgLf6/b2EXdukh66xFhBbBdZjOGZ7yNdRZU/cT87HSAiA8zGYgAz4zQXMxgH/HK6wUzK9poDhQ7J+RV6Qjo/1yaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.dd7b75d1.0_1626717071617_0.46911818575189135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.104debd5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-icon-button":"0.23.0-canary.104debd5.0","@material/mwc-ripple":"0.23.0-canary.104debd5.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GBFe1cB8xUCB65ASYixQlyNgvgMzRQ+o6p1tVAQ1Rc+AmwHTdKbtjzq3oUpXO/GSXfxBtOVvfiEYAiOqMUiuyA==","shasum":"d1587068ded4572c571000b71daad08ded8a2fb7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.104debd5.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKLCRA9TVsSAnZWagAAnW4P/RrBckvgdjapEfmxh6Mr\nph2XdghwlSkRc2IpsIXT2KrcRi3budUqt/SwhTHvofun1veumFSpMYW+jlLZ\nr8UDXte+zI/FohxTlyS3FQVD3Zx+EeMUo/llRy+QtWCnwPOmdAZO2Xa5JB/S\nfBOvgMkbmQJ1LKjP4MeZPV9A/vAh5YXWakBIE/k/TSUP06UwcVtnac9jtgrD\nUvNE6stW+kIycJpG8QF/7dan2r7XeogUyOwWNQSjGhCXjT1bmR3z1OZi3yxn\nSOcZ0ceZepexR43sh6SiefG9SqDoRlYxUoVaiMzf6EnUzpL82fMZbxrddgUu\nWxgdIIGpcVvLUbTfuceY6/+Il8mTVJE0ajyVeZB/Jtwg57lyIEcO26L3fAZl\n1uvxo3mnWps1RfqbwJqY3duGFUBFZaRdU+x4aisGWyz29Wrxl/qKdphOg01r\nEuJlpeJ+pOyrGnPt8wZoweux2KDRwO31NvrP1It25fbIS1/+wf5NLiPlcHba\n4k34OuEcQHEOG1Rtl5RB4Gl3iCjmby5+EAOs9ugyrZ+kuaXLgPJkZY2vWACI\nnCivWfoZBFfTeYMEX3VLjMkQepA5m0dbDflNiNznt8JDWTL+K0o4lYJfoqeF\nykFw26INFfnNWUSH9Zi6wQrrCedGe2klcRWn/QGZqjIBG7rdlhlb0hJRjg40\n3wlA\r\n=Q9mZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCud1g7oVo68fiN7GxpCRkNlaEIJJfRgbJu8Ju0SxckMQIhAN8LQ+7vsGKaf84fNOSZEslPL9PGZpGX7ABGomasLW0W"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.104debd5.0_1626735242877_0.5397026761929671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.4612705d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-icon-button":"0.23.0-canary.4612705d.0","@material/mwc-ripple":"0.23.0-canary.4612705d.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A7VUrrjnq//asNY61pIxx/vZQfn9x/S7rr4WPkGoUG+e1GmGQNZdQ/74C+OzfywXl7v3eCUlKrIMCKfJPW4oyw==","shasum":"ae2eaa36849fe4f88fe27acbbfff9e7e7bd44cbb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.4612705d.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQ2CRA9TVsSAnZWagAAoqwP/25TePc55TbI/hSDMn61\nNcrJWFd70jPF5Ap7Vmo31qGBYiSLeJBtUMlV7gymG0PZic/VT/YHygLXTf8M\noj7ykTnD3Qg5s/8/hj/nO5n6aFtCiyDlcKLs+8jKqHzMKeRYmQMEqTRW9kOX\n3OcpOSmuxGKMywy3TdJaRDnAONqQn3Z2fapvyXlHNxunuSmdbpjpfgvPneXM\ncJ0z2IrGNelUVVJbJZ78/jj/zQ6NH4OC7cHcYnWfsI0D0dM8ufFsyHceq5Wn\nkAPOLob/Zt5c2SR7HincY6P2V5i4ZB+cdaMCufp3YG5iFPGHMoC+yKXoIPcx\nPw9TDFJq6g+ezop5/UXl0FsOCwLSARHuTqpdpd1In4826xCBc/iTsitd3Y+q\nVT0365/iDUKrc77q3swUsLhQ++hPBJZuVI+ndsAp6uPqxLJMTUW+00GoKTv+\nzjA7atqH5D+Txj81wXs3MLPzuBetuq7X6q0+mk/PNkiGPNbYuh03yqBsC5a1\nmcS6GncrlVww8rQJa5f6hvKkdOeTs4t9w7y4NjqQybsqxXlZqdgT9MW0pNY3\nTHadGdYUOm+OKld9r9nKsuhyKimMFFfTbDCmhrYr7j6DLPwFiXjhCWnhLpPI\nTDQZV67NGahgpP5QBifScbqV4i7OqoQQ59ZLt61fSllXSrbSOyPxEygYR2/T\ngIvv\r\n=NrVv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+FzmSmQLwO5weQ18BqHfv/iadSW1CfuntHy9fMOFwPAiA1t7m5AWe7XR0/i/P0MhGe9bHe99JlrrUw5IoVWX+D0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.4612705d.0_1626797110124_0.22384607449225413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.b36502a2.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-icon-button":"0.23.0-canary.b36502a2.0","@material/mwc-ripple":"0.23.0-canary.b36502a2.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I6uOon7xmVhYuFGukgTNbcVY8lAvSt72dkIlO/aYNvaeuRvZq9sTHv0cmqTGxXHCt1DbDoCigMErRPUBDACjMw==","shasum":"280fee01690685efb13b7dc046dbba885bdc50da","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.b36502a2.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEbCRA9TVsSAnZWagAAa+EP/R1Ywu9dXX5ZmI87/td8\nbOlSf2jpbx2TWDalrEecWBKKlqbH9Dm0T+gzt/JGC6lcuh2mA0WxDzxaIkQ+\nSZCZM0FqzieYK24NqjxmuzyVwSmXz3WKbEIVNY2QCnoqt+Pco+1yhliuBQmF\n5pQPFfVCx2HiFa4dZi7geHssPBYi3oMecuplK6Ye6UB/wakW33K7SE0QKaWv\nl6U5LzzrrrTZndzcuI8DJLBTH9EKB31BgTO/UmQ29mAqzY85sw54pUpKi0n4\nBRWbbG9Gf2JCXs1bSSnPQdLdKV9ZD3WC8Kcvqbks8sla3ce4t5Gzxg15GOMz\nyjL71X6WRFy/DJ7+TLtFV76FXHrTKaYt7kosbkqPPuWqz9x4PcvSGAyuszuj\nv/uQBxZ94ArDTCQkcCJw9m33fK30fnDx8AJ20rPjBsIWqAlkQ3uNbLzFdCvn\nUtQHk3pJ29lNSJKVh1q3OZK69jiKUdyEyCzXBsQNJv9m2OhswK6PiqGJHL9d\nS+mu5Fp9RXTHCKSBvZRAmQqn0xHsXI4hvMWgp7oRrDrBA0wgzmNy+V+D4W22\nbFaUWf4fWFsj+tFrfyooIkluJE2+RwuyWV3UYav56W894DNyrKnCyEssClgS\naA/MN3FAqBlZ7sdiYGh0NPjb6MDBzuPQj1fwHmIQd//zK+mXSdMN+j1hn3m1\nT6uu\r\n=dPPS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACWLeDhHjhe0C9zaCBiKqEJDoH+xdhJ6gQDG6Rlq9V8AiBCfG693N2PLeg3eYShHYIgmyzjPEKlboccBpA0QpnleQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.b36502a2.0_1626906906870_0.7274913667912468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.2c392ab3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-icon-button":"0.23.0-canary.2c392ab3.0","@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L6N9PZtM/GpLMC/mkfa44PRZsfHdOLcB3j9Prbo85VlnEeiibvC3ldsdiNmERE5P39nCKeFP+3m+i3/6BqH1Hw==","shasum":"de2a729c7a5fa22a049696740b870911653559ec","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.2c392ab3.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZkCRA9TVsSAnZWagAAA7YP/igzy+AeaIIdJdedIvF1\nxKxBsn/LKyibrr2qmL8pBhd/Q8geASEypeBevLGxL3bvmacJrgmnZKAe6xe/\ntytkIrrEi5riGndChjxWfQHlRdWOuykv26h2bAcZWdAxJJQn7nQ3nwhPUaRc\nt8pb+7e6GMHtmkyWN4VxVDieUUwqXMVLmHe6Hqmby2CvoPl1ruqMi7xjeOra\nGhcCo56klQoRq2lt/yNH+9ynsUkVInNuZ2fQDMXPlTvsJmfT14ip/suWbirp\nZVGoAj7XLL2UKn+CSfvS2XORkQlKtgP8HFIZd44bWDdLufxXRxV1UmUUzOwU\n/FZog9cDA6cDX7QU2kc/h47guB+62jSAtf054brGqveoIkQPZQnv6VDSjX/9\n3A79YUhLoYZcyNSgDNDpRIxmHbPpRNFYGTrSyKQHubLSTngGRGNKKfs/ZvJv\n8Yk6nzi2OuLrEDO8JZ02qpwDyRjHHdRYQ+bMCA5c/5xmKSmNHWNKsiCgaURR\npWBHiL2MyhWdnFU+bRC3NYQy+qkqjJPdlSDAuEF9vml/1Uqaffq44/eLR6yf\nYgMSsWgOgT6OuxKS5KzCpjvQjyCHX/ES07sKCbm14nkJ5J1WDChSt3mti8fo\nuivIPKBZSssKbay25TXSl179Ll2rEq7KMzOhSQlJ2vSQWtS3dCdV2Uia1hwx\neDCa\r\n=CKyM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOHc4qOK7kA/FE2PoAzYV1km/L/NVAtXAShoNrKU1M8gIgHQCYsmpTSN2316/EJjjHIf5G1JE/RVoG5p2zPuhZXKU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.2c392ab3.0_1626965604499_0.4220524572658808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.e8bac95a.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-icon-button":"0.23.0-canary.e8bac95a.0","@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0VPC7Shq41jFbTUF+wvI3Ym0YT1HdMmFZedrkQNu7ycuoWR+iubXs4Dq1McsLqE4Kvbn/1hC9MHfWWTDTCV+NQ==","shasum":"834661bd2be88a9c4987ed85e845444ba92ee6fc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.e8bac95a.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6gCRA9TVsSAnZWagAAaxEP/3LFPPm/hBzGKwvlPWKq\nMUS9i2gPe6MSUdePhJ1CAt0pSfTUyGMwhlrkeRnlMQxcdB5WXfoFpghoGmK4\neAmi8tlqzzIEpFsrJ7gDQMqQs1F0MlerlAX5coo9nW9d9l0y3D969Jo5bIiT\n6MB75y+25qhBu+qeQkVGkx7EGzrep2Dwwhwzh6OmElR5hglTv7793Cr3Fdpz\nTfUi/wRWKNL/Yj6QYT0kT4SJq/xACnLUtDivn/IcF3PBLmWE8wIUI1F5ANpl\n6jUazDb0h+NRzQl2qcfMkzvIE2Sql6OIkuc+FjrGPEPJunDALWGn5MMUpVfp\n0TMTmacGv7KFUazKnh/XXvyKNr+hePP+e1VFKFwQZi9uUsgcwdOSUfAjYT4m\nlw11An7vSL1qtvKX2JR8AWY4DfabwyUH2CvTXsZtTxCeIsiPCn3loX/9Bu9I\nXmDHF1771JiHnJakn+tC+8E2wGAjZEScvB39AVIIn3kByQ/tWPpJTKE8Kl14\nzXD1tB9msHCOSFmbEKxzubb2pEsAIKdNB2L5AVB1P2puGo5l9bY4eSScpD05\n5LcgvTGvS7owHeyfbgIMAnUFx5H+sy7Xffidgz3ibXmO8eTVxY2Za9pWAvH7\nIWs2CEL9WQ7ymV2enCPdoKYna1bwwLlD8u2stBTfOlfPkl7k75WL5qi863HK\ni9YU\r\n=9Fpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsAanJDOf6qhd2583HHvtT4sZoz0QLer9oBzV0F+L8fAIhANxG3j1SJdnPfkRjLCckj7LyBSqfV+ewhvIq07Rs6Vi6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.e8bac95a.0_1626980000774_0.9991903770914115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.38f29f8f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-icon-button":"0.23.0-canary.38f29f8f.0","@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QvkPbgiSVb3MP5Yjzp50k/cU5qeJHXhQV45zXYyq3SVkJeP0CYonTOTPTc4YjryRbY1Z+SXslLHVBpBfR+JHPg==","shasum":"e40038b9805782f03d46affcf16134a950025da8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.38f29f8f.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wd+CRA9TVsSAnZWagAA7PkP/15kP1FyuWeC/yF81ymf\nTPjMrKNPrkpIObKWSYfuR1BFaJyrnKE62MjKcEEIy8/dhzh8LLTOESNjdTDD\nNZxpZG5kDVeX7HED5DjSsCXO5QNgO9pDjPWl6O9y2Nzvzoc+5QrEz9+E/fPv\nLi4xpJU7PzmD+4w31e2nsOLz5CmQcXpNfHBUd5Btrq7WhmtuSFAt3hqTgf7j\nHeDqjXDNfzOxA7VansaoVioOFe+I0icizKaK+lJ78FC4zODqQLKaLuHiSW2D\nwnDwpw5IpaJWPFOdwYMjXccvG/20PChvxIQT1IVmkj6x7Y0tBZqWjgh9H13T\n0AeCu+pTDoSY5DH95CPn/f8KYALOdUX/6SFuQr2yofPtzJdlHG4GRRSIlwzr\nhD+S95dtx5vlu6MZTHnM2ii0my+MaJql5A1vSWGGoz4VRgpbaQSGZ+HL56ig\nkdsUKCv32d0ENUwaLpiT1gZthe23luMV5Ff2xfXxoGYSyCyNWKqUbb7gTTPC\nUAm6hEZEMCFkmNqf/gtEFbJI6/9A2viAQerLEU8dEYYXa3I6rs+L98Sxemeg\nX9firGF7k2BUpUyzQSNfTZQ77FmwBA+4YOwp0ZigABGPl8074rgmIfGOWoWm\nK/gl91f+1r32c2NcwH8TtDlpInW+k+H5xj6u5TwUE5B+9wiTHgUrmOVsHtsR\nmeal\r\n=J+it\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCswzol6FsCHbYUjTS1AuruQmHnM4JIFRBwJEvB/xfZ1wIgGQX5RXMUnUz2BbJuGj7aJqfaQYWynZWzm2ueTICsX3U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.38f29f8f.0_1627064190365_0.9647307717463904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.e0693475.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-icon-button":"0.23.0-canary.e0693475.0","@material/mwc-ripple":"0.23.0-canary.e0693475.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-smWQnlWbf7TjiZA4y4cg9rNqFVr4jxmgrin1l1PBYKr2rPKEwKWeslEYrsOx0KZnso91kDs9Lzo6Jz7jY0J3ig==","shasum":"10611aab893e8e49beacca977a727d0547aaa818","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.e0693475.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDoCRA9TVsSAnZWagAAWPUQAJhKE+IdXjQQtTUrsRqy\n14UiwurasEbj7N8LsEdOo6yJneo4tvpPfSXvnGZ1lb0DY7Uzn1XVt6CpRpDO\nBkBe/izsO8S752hcO1fV9dpbniTAkP5mXHydPePmdQeAZ4ZeRnW1KI66X577\nDODZbOE2ObmdvOzbATCPur2T0qliiesE7pMYgp6JUyfkNkjnQRjoU/6wFyhQ\n0aPmUxupYl9Bmv7trhHdl8AYgLb+v2kIZNJIp3lCyadAIbKnXZS8fLz9dGvC\nn14VgH+7upQ/LMwoIcr89Zd4+k9tK6tao0VkDOhoNF9jBhsnaWp7xyn4mB9I\nr2Av6zuyFSNVivG8pT+aUxicLDz7R/UMJwhSsxptUWxA9QDVsYgoSXrfzadq\nsyuJwe5xefJ7sRNignlH3VOh8DDeOHNdLgoAUwWQb9OJs08WrJ7pPJVTuWpq\nup4B1GktkXFMys+MuRO9Z511Kk5SeeJqN9XrdtDurfbg8h2IuGEQWvAolrH+\nYoPaf0ROxE70CYXhFz0NAR5tbJklpLgvQ8EuhNgYCDyBmPYikpu6DrtEFBZ+\n25UKwh/KLHY00sD5VQPVAhDxXTYtK5kR8ZKMSdJkRd/NhAdsCZ+oBpFLwFgE\nUgUz2ASe5KTDJWI/TT5N2uwJQhPtvgVElNswKnnibig1mfT7P3KWEdGtnA93\ndBhU\r\n=DboH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvV7Yj1NB+Wu+ydoXjdAPDhMscikAcHBLzzYCcLJzoSAiEA6m+XGsVKnwc24o9W5jTUe+9Qtc57fDoSI0QHSIUrd4g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.e0693475.0_1627066599829_0.05678242616478335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.d595e030.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-icon-button":"0.23.0-canary.d595e030.0","@material/mwc-ripple":"0.23.0-canary.d595e030.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U3oiwC+M/wuikHkV55dVlGI26/zgbQgipqA6iQTacdyKtf+jhM0UlwXiKBOgj1MAreFJy49OgV1tKOq11IHTGA==","shasum":"ef65a6701259a84e5399bd326a5323d00a79b630","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.d595e030.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxVCRA9TVsSAnZWagAA1qsP/RPFKGuLdOuwDeoH0mXL\nSetVqErTem07MOlA69LPNSmcjDRp/Hy9R8rO7gZONx3nmd5MzH0owIQrfgTA\nUNWVnW//GaNU89d/zVF4rvz6u4MO2lbd7/6i2TL/Uri/orjuKh81MDdLsgyc\nbi7AiWzzRa50dt6ezbZ6+pvo2bTkf320bLeoRDi7SvFAVoMW4AA3ojEPB3+U\nKdg72rmJhg4XM8YfLEjRjjdESmgyQyG2VGh6KmtabT2GbvzzdDKARmUttlYP\nK1uUTs4aSXHjdPkFlwhH4prpoaCdXiE93Ddlt59C16/ymkkQgwyPhrF50/XF\narsUcj16WEocp/KAnzNQB7Gcor5sAY7PWM50+tulqp+rNE+y1Pa0hovSWVCM\nhmxhv6VwCz2QezIRu20OzuxlLmswT1RG5wUos4cUkgyoY8CfDNb5zFZATs9x\nzSbIjBl6/aIXi2IkGQQwCIoH8gN8jZKMupAsGGMFKrRd2yovPuineyconIr3\n+zUE68N/c4i6cSlXFNZ/QinhHJw1G0VRh6TAJ2w6PWjbHsu3uUAewdVmIZPz\n44cVnDhgzwurFvdO1fU78keP1e5V+xUsvu8w6eSPEbMTidxMjQROZyDPRIJD\nrsE7JmU8PscManWhsZfPfITOTF0rW026o4nfLDbj0Ni+T6FbUCTzaPCtSMo3\nw2Td\r\n=iLM+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVlMu6nkLgCxjGZeWjaL01LNRl4xEUWEOuoZza+9yfxgIgOp3EPvLiCb/I7uFFGd+VD1ulakrNfP0fpWnt/X9zfdY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.d595e030.0_1627073621559_0.11429492795365448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.fe7cca31.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-icon-button":"0.23.0-canary.fe7cca31.0","@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gdIrEW67kQIe1IMFo3hQQtAetOoVAGoxqyu7UXj1FFhJJhm5v7HJic3KgddNL/25Vam6GTaqXFUP7nNoVe3sjQ==","shasum":"e04433d6b8378bac8e45d927eb2ec1a530a4a38c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.fe7cca31.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zs6CRA9TVsSAnZWagAA5ysQAJ+8ktZKpQPj9mntyZt7\nBW14kigacFOo4V5/0r7SUOqNLGi9maP0+z7nFlx48gaojWQiiFGk1BGrXLcO\nwfCzCEnNQWQ/mJ6nr2yj2Xf8XlBjfaFD+3yHuXrDVssQNvFEn+gjlUOr8MUn\np2WHjK3L7lS0/xSLn8V78u8CyGObzFqtEbi5pSxiuEInDWcKPy21g/IUtmL3\nR5vgnmCQkn3ibQMAZVXqnKPvJRjUOpGodpUNx0OchsTP26ie68bwXpJFKoDX\nurgEN55YOF6u3ErJmySGwlLnelc/VKn5pR/jUVq2Zzde+tSV2ioqLiZJYtgH\npqBKCMmkbodILDaKNN8Gtr9xAvXCKM8UpL6LxPH6/yTrcxMSBGcJ55/HOlB1\nTweswE7OZ9TW1Stzd453yf52vkIUF85WtiFMqxaILUyAi8l2Ecc+bIWGPUf+\np55l3Ab4Sklw+6h6eq9yq8qbSVxSX2MN9rMJq+OrsYPJBbiyJQiyon4ZcTLA\nTtuTuIqRY6/nYXtDLjxhM+g9DWFiHZkXe2IXtHcsuP2o8vYnIH3FmMy4QkYg\nvn5Cyk38ewO6/bwfuX2hguvWz5WUALGC+GyySmqvdKUtxAIacGUGv31D3M1T\nlw0CdDLO34sap0vdq6fr4I79sar1UDBX9YlX441p/6oPOYMpjV9Unn0L+8vc\noIvR\r\n=VcUD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDZbw5eTZInHH8MIEUbV/zG0FY9WdXDeSmUgVxuVSrWAiBs15+LOxZ0BggrEzELJ+avWCf69Bc5lt1FSKrDQYK5RA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.fe7cca31.0_1627077434588_0.9196384547619891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.fd9da483.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-icon-button":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XpGWPWzloeqeOK5ABfLVci5KGwnoGCPT2FLa/YjyNVcTqUVXH6VNdc0ydo6CEhcF7Xo+T/SbAni3XvSaOJRcyA==","shasum":"0d47d01a59e51673f3ffa342f48e402723566e85","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.fd9da483.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yhJCRA9TVsSAnZWagAA6YMP/1a/GCN7qB5Ugo8eTQVr\nD2rsu3slF4Wx/pro8hmTpXTV9UVm2kcvaN8vp78GzsyFepxaxtbmCxLBbZx+\ncXilijTVj3pQH+KP2UlAcKSM4TqqYgrOlaMlGev7WgSbJj0sMLCZZ9FQ4Ey1\nLNTUyrJRa4NXl2nCXr8XcSsiuPLOH3s2NS3Q5ecwt4d9rQevlTqonuW+aeOW\nUGmwKeOk4JVGJ/DyS+V3ey6fM693/4sZqnddeEa4d8HOO9HAzSsvCDMPaNbU\nd/8REA9hxPQL1jMoZDmiSrOQ1FQBrbpRbnQ64pt9CMEFpofPQtp8JKupOhA4\nK6rq6FCR5f2aGkWWcIW91YUgus8iimlFPBPhbwtKdgjoAMj2r9X7Cktsrmue\nopTBs6ItiOi8Odd0mE9z7M/GZdFGgRFsFWobScElluhE7Ay/x9dx0djBWL1y\nWFP8upsxNdzQO03XapZioghCDOcomaGjolUDwU8RBPRBn8yq5wLzrU7P7vCy\nskMR/toUgDC99tRLR3wGG646T60uE4pYxy5YyybZ0Bg//PAObmW2oBGexc4b\nXGQqfmUADbpniGO3aBZJghTA9rhZkMvIeuqRJxNQHRvTQjLfjWODFfJUSYoa\nbRbEls1QEqU6NUKSlc25fi6IJgmrbivbGWT5sWTM2k/lKMqrGnsBarLOnDIz\nU+Ef\r\n=uKRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOBmDbPN+9Pn8VxgDPYgJ4D71KKcQv5TIb78B+5TF+eAiEA33urzO0M+azhq9mlviSrSpXI//+XzDUQq4U/OFBFJBw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.fd9da483.0_1627334729379_0.6154778299330979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-icon-button":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D/+MTdTFjRiHYsrEV5vqH2B26v78lpIJeKPvB7YES6cxSg6suoXu8tU8Bz40YD4AgSfRPJEnLOIrzVowpanbSA==","shasum":"f14c76f49f2025fbaa3b9361a4b208efcf47e480","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.8a4c7e06.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrTCRA9TVsSAnZWagAAQnQP/0vL5KhxCHDis/TgQsKU\ntfrRBUYRj2FNauFusPR96/VVTcSHM9+xOEoGTLtDIoykw7cprF/1kQ/pHV4Y\nBLgeMZSgV2fD7X9tMbTaVigcDefArVgPs1e7t00i/bFllgVbAtjVYMNATrH4\nW980S3CleLQWljNNVz25/08QT5rR93ZT3zGmon8HhcoIcBJUSjy8TVK5C6QZ\nzf78rueqdOTBMqyw5e1i0FuWutZ6t5ZOMqvlNbIdPOBoeZbqZ8FiKwXwaSpF\nE3pYCkDgnhGNxlZ1CuNLA3C33cnymr6l3GSQM4f/+MlHogfT4Bi9zWkW32Ft\n9P4Oi6USMPKPOMt7Gi+lGKOMjz4QRq/Pwhnpr/2KGqEAMyKCL2pY/0Pb1kdd\n37PLl2xJVq6Aj7+jqLCzC0HuIb9pQai+eHXI5BkDpY9HF2emSS3I3ojr86Zk\nIupTsgP+ieQpimkJxgoI6+BLc8/fmHA65zYqZeoQV3n/lpRONinOaqCEqLTB\naeSvuJB4m2E4jAwL15NnGbJbtD53mF2lFWEm+KtSMgjZauh7Mm5ZEe8g8d/f\nVnuQ+pOnCTF5GGINdVcxmM7qW4aEmQ0ub+MZ9VNC68zoPA1mHOjQhtxu70hp\n3P/prqtSPIwCVmoOQKsOds4FXQSLsMc2Jmkw3bYL9N2m8mADjzyPWslvXS0r\nratQ\r\n=7w1V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI6ZQHYZGHsptYElJ1pNBlUIjKap2Xu1TSRqQL23DPmwIhAKnc2oU7GotVtY//iH67Ery9ym/3HHrCch8BFCYKPxbp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.8a4c7e06.0_1627339475211_0.5227017282402924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.5b395fd1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-icon-button":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-u0zgQ1ac+37mlhiLweU5T3Y/5505MOlWjSLfk0/PO4RtxpQgB1hihvQR/Z+AiXqpzEwbSihvG5kyV1+yBe6OCw==","shasum":"561e98d3d4428b0ba9b5bbb8826a82a647999330","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.5b395fd1.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5zCRA9TVsSAnZWagAA6zsP/ia5uPF5lPZ5MiXTpFIj\nS/yAF0DzzhYCCJZ2j1JM9KiAu9S6yKw2uLZWlQ3lMPaCCSf844rHkq89lsJh\ngNw7zb7sxz8EcjhNIc2KqFeqXHipWexuhwNgCn6/T1aJXwYmncLD3UeU1Skm\nhA7IovCjzauQsDJJmmfw2DhOtrbj1gTgHZIG8TOYmzgA1jXOtlWVA/XjnE55\n42HRXy3Vjo81LrJhcubr8oZTloGS8nmcrnWpG4y3KUpcOqeroOwP50YWZhTo\npJF46VseD2S3lSkbiTNjT7KUy+kZfroUOhuxEp6sh3D9q6SAzATkZZ7wrCn8\nVhzxAQwbh9anBccLeCaDR7UckHzA9VVrVePN56E4wHR5V+xTqBPHOveXa7kI\nbLuiUDd055y7P1AzlmEcHfJ+WJsnMzaeX+Nuzgi/QLPetfT0E5ayK5brEEoU\nI4Q3S/J9pWKjuvYmWKkJCoyTcUdedb/o4yiA1LeFjFj+U6sWtdxkVX3R9yNZ\nJS8KrTtgRacoLs1x2exhRIqhZ80ZnRpuc8dmFdttAvmyb/w9AKr3fl5I282J\n2+VC7Ck0+NBt/Bqmb9rllwa5SFT+iZfNnWTIMYSg+KbkP6txmVHu76qjkvmp\nTEQ7zmDNx0lPXY2XL06ewiksyZ110SOI5NKcqarxKjKxpEhZpo4VmVJtUUXT\nwNex\r\n=CaA+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRSZE2R4Rm0jPWX69dTlS/rXilrfA4x/o5a5GbGxf1SAiA2Pg1j0MqkKqe8P4kqzDsI1SvObA97I8BgAkmj1AL5Bg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.5b395fd1.0_1627426419344_0.9663406744466259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-icon-button":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DXgeNyaDNwBrIu8n/+OAyIv2v24udHEQP1pSzKZn19a9fKu2RjXhTq5K6hmP7LVHBQUgRLfwCBrogXKOHkW0ew==","shasum":"6ec5a7aef4687c6ff86d2e10a8d8689a41dc7630","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.e5efdcc0.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJ9CRA9TVsSAnZWagAAv1EQAKKVUvKxkyU2lFOJsqYQ\nFimb3fon/Kt4G7VI1s68aLvVBgHtz/NTv8WKweF1WqbazK2wNWysDmrUUXgz\nI6SejgkfLHaM3lcCdTy1nj0L14pfUMC9hi1pIrswa8O9VHNgXAnqaIy7839Q\nt4Vo3yeWgZrg5Y30sXccoe5pTN+MkchlzdDi0MmAk++eKmVN369rHYg1pJAS\nMa/nXw6N8Thx5glkOekv62Bc/x6YP8ISCrkYRrnSGE3vXZgBBUlMyvq1rh6V\nhUf9Mm/3UtUkFk+spDeR2NfJnMYbN2o5GW3pBYBGvE/pSeYOclyZRUJfQRw0\nTNaaFExgnIEubeKfx1bRogMleA+5mnTdawEMEG3eR/+1+AQUfejFmajr9MgJ\nc6MKmjCrBxE8wrTuBUo6bMwxrR91QoQzMK+fuDLDWQLEgWR4+QdizwhLuYvQ\nHkFXzwVadBXcbrfzj1KbQE5pySj+82U080IlMlBTj9UyEb6hkH7rPpqVaEtV\nqvAJmUD2gqdYQnWJuXv+wm0C7TzbvrkSRIqwXXkKda5pnPQlq7mVy+A/sf6u\ncgj5YVYtpJZWheC/Wx7X0UeijN43R3V4pFzGDyJhcYQ6r6gKge/l01gmG+Pk\nGIgLamos4UygdFFi5Stmfpx3SK1I8w36FIjGnkCiEm+Y4QSVXgr8YV57bc7f\npQMs\r\n=JiGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXBfFHIxfGr0wmOmjprg1nKHGFInYyv3lSD1IakOgXdAIgHSt8BWmcuD3qR3vmVNMco4MmtFHbHTjXziyu2l44lXw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.e5efdcc0.0_1627492988951_0.3178063112513021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.ab310900.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-icon-button":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WDU+Z5D+MqcdWWr2hd/4U6yFTpy2A+bACX+/JoEAfGbU6Uwbsueui1dZ8BZg+ENZG6Zw/b7YNjqR1R/Lg+AyrQ==","shasum":"b64926860b0cae9cd685c2d86a97b4b53fdcaf86","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.ab310900.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxhCRA9TVsSAnZWagAAKagQAJAXj231YgDB6tsUsyV8\nIweNlO16ih+tVoTJ8mYSAVXwN1JPpBekswzgHJMCFWo1bvWETOT/WcpRR30m\ntV+EN2KvglYuGsmC02AYyRsxDSX8+0x4EfIIlra6wxl7Gvvdn1dfYapMuAbx\no2+7PB5BwOvpHAL3couBJOSoSM1vYGcUJyq40s9VFjrNA8tanUWSXx0GGlSu\nmJKh1lbgBABad6MHDZniHhDxkiYlu4/dpM3xXQdQa2VujPJRKD+P6ysAxKEL\nQCjc8PCZZ+tBlgAORbRfPV9gjiBBdRdne/HBRWLg8k77oj0kCIDifwdla19L\n4IYxaFl0cDHr2DjPjUTh1hHFs2DrN9OG31aUTzn5lFr/UzQevQWLX4O0CTGv\nLDh9lIN2TE9vwNKZRHxGyPChq5Q5L0rxsRKXobi3mlFcFHi9UECDhG2rMB2o\nz22BT3o2hACfJ50Xo8xUeF6N3ha3SYC8CoCSHR94TAEdtQcfLsn1fWG3jJoA\nis3XcK8I7Q1NW+2ycc/lr/tYjlgLAB81hnZ4bz5pENhASpNSpWC65I7rvtvw\n9dSvRGjolSOSasRQP+9VAfW/uqqsUpkL5AdVUbUYxnyCYuVf8BuhlSM35FxH\nSUOg9TLZ31Qci33RTd1vEv3/O5LguaALd37Sx5y0AVSDSmpoDDnhJm/t69JA\nqCW6\r\n=fzY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVNjhqBUGBRGIXj5tPebe+Hn6xUNwabg22DDEG19r+zQIhAO6V089DjZRkr9oFwENjDrAy5oky0sl1VRzqIkK1Mo/Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.ab310900.0_1627503713345_0.6905461489601779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-icon-button":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P7rf6ksI/bFHCnX0oOHfh+TFVRyfS7CgP7QM7ZzP0WgI5k9UcbynSM/2MM5zdhDIcSYSkU4svFk8KFeyMY44Xw==","shasum":"bcee1f0605f33fd00d9273cf111f4733f43dc7f1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.21dc9bc5.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb2DCRA9TVsSAnZWagAA2pAP/1xpZ7Rlgpn7FPBw8hsi\nRQ5DL75J3odw56YUczHE5LVRE03ro41EN7Z+aCnEI/7p3xIrziEXDQQykgGw\nAqHcuWnHu2JIangxUKv2a1tV7IOh7UNaFPCZiXr88owrgtZ8OXCQEH4GKuXm\n0AmApD/c31hyLCKrXOMBa++3D56cRmuuHx2aYuF1W9PEvXFaXfAJBYNscplX\nlxBeiJSygvmCqQWVx//sELl41CbZnTmerdiPpS3LAA20kkD1t3E27Pv+Qr0f\nXq8M4ootNrcJqQmerHYfFKG86qAfdgvDVXfslXoNhXBAj0QNH76Aptq1zh6u\n/64Q87tMh9MOX0Ve91q+5p0lxdKBTlRrVzld1UtJuiWYUvwDM36/cx+DGscG\nc9KwXCWl8h9sVtk1USAAyd/VMRnASHsBphPaIwJ3Dn5L1QTwmVloo0r5U1lj\ni7GG+JAdALvp5md1JiFeVYBl+lAjfiYCy0+GmXpnXwQV5fv6QueErUJOOS2L\nUeQqb8SDMatfqVrzlWDHK2UGi88l681NU+3QpwWujwhuMi8pnrWb+c1t6okC\n09u+CLb8La96D1NKVhpcdgWXNVM3AqDHvLTjt5g/U43Q38yD2PLLlzOvF4XE\n5NQLFicaKYLMBVCipP1YJPHzPQ9c8XHlBRH6atbv180UxfDhi6k7ys9r/gJK\n2Gsu\r\n=vj6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBHo/GjXjJtBQltiR2hhdf2ZDWQ5HjXLACcBn2A6Ti5wIhAPf7d2fBp3qlETt3N6N8l5jxbW6mmy4DrV3xnZQiAbGF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.21dc9bc5.0_1627504003062_0.14829915949902817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-icon-button":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e67ot34Okh89IsWUUUYqwzRPFtkABFFbzEDlem9/wKTVLq2YFTjMQB+ZUhTgMZRp9z5XVAXwFAUv4HvDuznNFw==","shasum":"b4e41ddb2d6021cfdaa5d5bc95a4114b1f5dc9cc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.68c7fe5c.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQ3CRA9TVsSAnZWagAAo0cQAKB5MfVrb6DC8OU1tkZq\n7CM2A/1XjGONVDfQCJOgevmF57evwpSHlqJojGyVD22AlUxOXmphJBHwaSO5\nGyzZO/rY+/MXr2//KpZ6c+n/jtinbc1Pk4ixEhFfjZjQGZabh28w+bbi5spH\nxrSbhgaZA1xmHrYkDFl1Tn1QwMANgC+VcuM5Ft4mdhpb/sF9ZjfbbB7YWWl1\nh4SjnAELMXFME980jZ1/Fh/mSDl+tJBUaulaHRDJ0QSAL97l2sWKf4+NT7EF\nwFdDvhV8Gi/yAEZaFoedG+y7HCYvYxDxS+PpYl/l5m+PDLMHsBsbY6ldI7Ge\n6vj0tM2Qr5gwA3IA2kWB5K4ZjzXnKADpA7cmkrmVuSQStHq0t2NSLyh2DA+W\nRudUOR0eHEu/tgG/G1qgxRtTVPULPZC+2B0aVtlOHjXTQNIj5aLLNtIPjNQ3\niYzYI+vxoSOzMi9bp4qSnjjtKZLDn7A2VMMnp/wQTuaTvRYNB40AsKwXyqZg\ndy4r+YOhTZTpGe/4AJzvwhm+oVnHQIJKExCu+g/qy54VSXZ5SCRls1eoKVRO\nAkHSEXcGYWU+dUYiKMNYTAGSqYg+gKIboLwg8LK0d6o2jafu+4oBisyrg5QG\n3q0QzUsJqTvpdJlTFaJCQyt+j1j0mZ1bsSCkcpuKR3Ugy4sTPdJeJI+aDBZC\nK7Yq\r\n=HenH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTtOHTNKBBpHx6T6oXMdahflM7+GSnJlmHiM3FGfUx/QIhAJNPF/2VZBMsnZUCYmBoX80QcveyeSx2Ju5gwOBfQCL6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.68c7fe5c.0_1627583543623_0.11398052325589236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.aebe39e8.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-icon-button":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WrGV4sbyHG6jTAmVCqDFB18AGQ0POG2IzSNI+r76m2gjAU98xJ2sWzHsm4JaHW1QE0VSTWqnXgLvrP9Z1kDH4g==","shasum":"83f9b12719d7738ba3e377b9860153d79ce49c5a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.aebe39e8.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+OCRA9TVsSAnZWagAAo+YQAJgPs4OEVw9ZZs1DyzO7\nnQ4NVqyup63JEaShwIR9TkxDbZ3OfGQDCijIvkSCaOIkq1sOEOuY3l1m30jv\neaCvid/+UZS9tAaLBaBp0FNWzHyarSRq8ysAODKjz/5LXO+RE+igaudYPeLE\nZPcDMASmccpq7C0g4GvOAVe2u0OpJqUNhSgpGGroNUQdAnK89dTs6+CFttjn\nwnBBzonfMGC4xTncfLinM0VnB12kC8SvzRU53O4cbR+6Lrja69KiUO6UpFEk\nUwG9W4JoTklQJZ8ElnTu57s5XqZevx+mMozuxmT17am19cEyNcFTYOzwqgBt\nzslJ/sy0qAFbIs9KDsXG4dUwNi/A2jNpMxF7nnqbvra+aTglF6K4e9PMontY\nYEsxBNpbaOG3rdmwHO2L1S2zw5PxjFnB0DPppHFs/virJ9AiG691zQnIXVwe\n3SA1TXX+Zwvax3Sj5Wd2nlH7jN8HrVyjOi0fKnQTNvbYo/I4qNGD8TrKP4h9\nGEBHDIbl1r+FH893SYN+OynnnByzREgVMcRXDStcllCl4KDKGaAx5ls4tHXd\nbFSBLiY7NehpFnbL8usx3jqmFqwxQrI3y2i1cn0MiFUgX6xsKEIGnLITnaOr\nk/fysBRxvT0cIpfjFWvejqFrBiGZOdPVJ25RctgRGlMTQbpv5/+F+URvSj34\n1k37\r\n=T3Tq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzMMZ2pi6SVLag15YhPiSPULL6UMv6nVGCVhKmpbWuWAIhAMDN7pnEOK45RNsP+TUfpWo20amFmsxIRDtwxuSxslXd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.aebe39e8.0_1627672462658_0.6554335943138476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.ea889c69.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-icon-button":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ay4JUl3N3B+GV5UlL6VSZdciLSOoEs86Z1sI0K6Vi6OE06cs0YQaUmV1/KvpT93qj9bn0aC2mkoIyflzVKRX0g==","shasum":"d87ae64f846bc314ed0f9889866f5bfd2308acac","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.ea889c69.0.tgz","fileCount":9,"unpackedSize":38827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9xCRA9TVsSAnZWagAAFW4P/2+ZOij+P0wHes9W8DNj\nQI7RGwblt021h3Xkv7ETir3fdB1G/mw8PaVuAos127dg+2DgnKzHHWT9MR3b\ngBWZDfdLbZBmL1X38KARrgfXWMY6Ydid49LJMN+j9PxhtwEZtM6irE1rrnp3\nyk/0IVTrPudkLXsYxf6r8xWqNd3x1/M3bxwhLqeDkxjcS9jv8g/w3EouYL4l\nOpdRnDl4xrF7WJC3uTSsteOSQ97/I12YSEoe3wi+8ossg/GohqJt27Y8imgf\nayYaGtORCwuO0tgNTVzu02qiLqH6jPF91hoa9X2mvVDUrR0CE4lphay2GfeR\nj1qj+PxkPF/E52yY+pEnnB849Sbuw7N6IXZGpDWENo+TiySgZBuprmjZAgcK\nf7ZJOzzagGTaD+cl5fAuffkwLOTG6Pn6X4EUihtXFj6B7m3DVg/MX7coKiNZ\naJ905O2b3XIyrfiPULlqsU6Hu5H9YvuM61i/GN7fgk/1oxp4PYUc6LQM99ja\n7D8T7x6ft4Zz+Jp9Np2OomF57oD60aNLYNGb1oC+Hj3HYfQ3aXYtja+JcEMr\naueLheTBJLZK653sKq28tR9JpiMj0d73BcabH9AjysAPkrCxtQgaVyvLLKrY\ntAzTMvTrU5TxFk7Be5oROjcWyUcCagJf7yKNR6KLOT6mZ7tmop1N5swS7Kkg\nfrRd\r\n=Oz0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrzmdYmuBDzzN+RBiGs3dicDEU0rhirqokhYjiw6mUEAIgc8IUTYAVC+AR0K/H5JCtKLJyABWp6LXd7Sjd6BX1f/g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.ea889c69.0_1628016497412_0.616011118901379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.21918905.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-icon-button":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vc5oVrhipgdvRCaRbb6YODKSI+hzJO5jQGwfoPbhQ0v9lOIlV0U53e8Auklc4jVmTFkSel1mQg+bhAG4ijwgCw==","shasum":"50e5ad9fe4b511ce92d4cb1a4b8aa5251952a8e1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.21918905.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHVCRA9TVsSAnZWagAAMMMQAJpLA8EHM/xOUYZ3dQxC\nKroeBB9tJgVsi38M2u1WXfgBX4k1sdN6BORA4briZ1q0AYznO5oamqjOy0TW\nljiJ5nxXMjFCQM8vmJgV9SgEQ1JO2Tw71JGwejBYePfUFtPOwyRItM+nr/No\ndVVcfpfFEOA54btmLYi3yIFKDFZ0IxEs8GYMhK/SNXyU/TRPCwVOj9YZDolB\nw8vq34aumpG3IHf6UhJFLK9EjsU6PNex+tnyc7KkBOD/EFbK4IY2Jj/TO3Yk\nKlL26fZ/2rEWqNK/kvd2A3dXEw10CVjLJZskokQGs3RIo1LwC/V2oILGFqIG\nf6JQr6zdirK2JCK/z6X0BlZjIapXxrOSMatZ7kRUl9C532I8cRWrqaxGihT4\nyv9LdpYP9Hzbfzlh7LfZjH8wuRhVZhp0YAa3od6XBQp0I1Fs+lzDyJZCsPnb\nXcZGu9QD83rM53t/UAG43cyOA3XyIMjI2+hQt4V4bqi7gMyhDmBG4rXNIVj4\nmD2Mt6tZgAbyCsN+HaCvM5RWG8Z2WhHFIUaDQj/kjymzK4eKj9HchFKYaixE\niBEJotEOq3snTNX97n7fWMkCWrIgO8cojDL9/Cm+GIBPEUz88EeQxNdtyZ+U\nt1w1UBpnbO4MxqeW+fUQj+03qZB3J0HPdq+Iobdh5EKgWfmbXnbAh1Klck4u\nqDyI\r\n=jZsx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIENrPcyDNTjYjik7QxB0h9a1OryzjV+nJ4lm54bgPOVVAiAWpdy8VsEU5MqMJxkh3Hwx9/1F3rZAQ+b/ErkzAFn0UQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.21918905.0_1628025300918_0.643320905446725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.193c87be.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-icon-button":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KtPsYofpbP001/gpWqZzSwTLcpmZ3OEkAVzdRi8nJEJOW1TUCSULkRVSaqZag79D1ePxuhFFe/qaryKO9+KEIA==","shasum":"4257ef5dba2f05de2565c9ea4f7c0611ce6ea9b1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.193c87be.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCteOCRA9TVsSAnZWagAAVcoP/iWC2y3x8k7HbWdNuxeA\naIDmRVmE+dudAa4vUW4Evma+jqrDBhxFDV9W9XXhrhFDllRtq9VG1GbOpvT1\nvaD6Eof8hWRzmop4LrT1iMBsT5EJHVRRRf0b9z3TyC6PGZoab4UK4Eb5gvUK\nS4kdhumqE+mN6k7+7UOW1oYsmaejECAgn6VSeKVNJO6YUjeaxKjSY3kK61ch\nnAmMeHSq+bfENd7P2a0fKiqjkbmn4gEhai1U7rR1cNK6eu/72MpdG7aE7Ee9\nU+2whpIAtL4rlK7sz20IzNITMJI8f3t9EsoN20wOaiujDYN6DT38U6H/4IMy\nsp5ydWpfTYp+tkrWdLnS4cbv+lFLZ3YDnpXqGQBaQXh4oGYfRhu+mmo4+zIz\nikrTdnXl0QOVwLIpydoBbqU8hl6XsdZZ/sqok5snjWypFIGcJWrw8xdTsZTT\nMNe0CLYI0CTpPmrRFrfn6SZuJKg9PqR1X+iM6U2B3NPfbd8/8MI4jCZvvgjF\nCm6XMmOEb2NGNqSguIalU/2QZ3bGYr3cqG2cqsIcyqpeeZQfh7zYNWRpoMHj\nkSn5zg+JoaHSP7pELH6NeEktMo8Ifzz7DGD/Pq/345aW3b5syna0Akq0WMv+\ndywLI6ve767LPddj9tRqr3d5MMhJ1JJNp6LlPZi4z8N4T4jdYx3S/DzyDv1K\n3vx7\r\n=xPet\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1XVGQLZWa/i/MP1I3kO3rwINAvOKsJLQHCn+G0YlLSwIgBJCJnn86KAD/4wzcq3I4i1EaETXqV5WdDArY3hzBwjU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.193c87be.0_1628100494605_0.3090040522768547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-icon-button":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7sIoAR6u6eYbkVdhlZSpgKo6R8YBbgeS47JU0iSzgovfrETXm7YR78M93kwlWDN/Q3WZsxvASrhzuUf9aLfrLA==","shasum":"01990a14d65f7afa5c5c758aadc7e5a896c04910","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.6fc52d8b.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCnOCRA9TVsSAnZWagAAAgUP/iJ9GvHgM+TzMm4qpnA4\nIIioF20TV56NHoR/u2CYnTk3bFC7VbkIClczof+HlInfvOrqzH8gGz6sQeXV\nFs/qR970r3ghQ+gPeyUfWy9F56d9MYuyf8DxzNNi5R2ZU6ul6TsURfwy2DGa\nbZZn8bSP9eKXT8kmv7SiVRoI7Y5Q7DnvINIJlFS4pH/YaUbtMS7z+qpTr3RQ\nqxjipKQ6Y9Sl0Ql9imdR+0q+F2TL2TFpF6wLB+umX0bzhQ2H68ulDx0OwC2m\nPSH5w98Y/7FmOBHIGPE08oBOT8EDkj3LXG5MnW8GkaaTPFHqmXYF0CelgOdh\nm2mgGayyEwNiuiBrVx1bY2PZQmaAswSwLBuZfSFEQ00MLggYpM/srenSN13o\nN091BJ4/Jsaq+nK2wNkMDGw2G8Y92NS/jKQiyAobx9PNekHKCXvzKQ9WdYVJ\nBNVTwm/xBomVVLXep9EPgCcW2RSyyLSPWS468jZ9bhmGYT4TOSGaL0LXreFe\nUbEjQ2pCNJQrPS+8+G6mX9NfbK4erQu78l/UV6wuJWPJxQNHgxA9Xc8xcTXR\n1rcKb8Y1aJe0YbZ3tDexg9ppa3CwBLkD3VtGxvwvJjrSBj7lnw9zuxyancpr\nkOdP8Mb5gNxxL5tn0DjFecKTGIsy850QxGiIRUrd0tUhE69o12PrdaclirBX\n6eKT\r\n=5RWy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdY3oXxZQDQVhfRq1Ia+UvK67/5kmVAKrzKtTiGI4kZAiB2NTFZV4veIQU2bZL4e4/I4mmsRLm5yETAZlZNUyjw+A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.6fc52d8b.0_1628187086088_0.0829910062264334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.e2e9777d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-icon-button":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RhPjoqljV9yxXm1TOYovh5keGxxvyBno+A55ImfTjhe93G0ysFdmqzbD/62USXfWTPIwEG/FySM3Khb2Uyw3hw==","shasum":"230f463a06111cbaebd30b5bebc0c61ef902dd24","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.e2e9777d.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqiCRA9TVsSAnZWagAArZ4P/3v5Qw/oitN8ppN+BqfA\naBYP2TVAsHGDT6BtdR5GMSEd62C36x/RlPMKrwxKHgpdJQd+smEMEXCC7fTh\nu6JRfrWCKlEF39nMpxMPAzYhO0BD0mNbgAuG2rYFX4Xkk+6fJ43jQT/8HyaE\nyR5zu2JSFOf0uw4VJBrG18CpDcBfR0D4tAAvJe2IOtn0Q9xw/0powauWnPM4\nHuwfPtQokhje/PRnGbjj9nI8H3w6l6lan8lVrlbKDd2UVEZ54bJyd2JincF2\nBet1cAkefZB5ieOmyZCDySiJw5v1XzRzY8RGNXkFn/rqPCNLEVpmaxXA4AUT\nxhxeX+BfSpMI187uPjjahsewfXx/9nxXvO/zVcEImv/GUSFLZN1quvdIVKBE\n6xI22W4ipJndZcO+jKwnrgVl8WIHWfDlcu/d7I/i4TrKlqoKVw7Z3M5uhrZs\nxEmd/gDKSBbg6Qd0tT3g0dPC8LmV2nuM4eG+XgkiU+Z9pjILrxtwI2a6w6s8\n65XWa+COZR+LxC4skoytdYd4/GvJr3wcclbifKmPmLwraclmHLx+Zidcnqmm\n6lHWRvGLI1Dxu6x7F+VIUx2yZYOjFlB3kCqn5vOtF0k8kQrQSKEiWnayOI2U\nzHYbzZ8YYAAOoVoyX7c7rzY8ordv+2Hqn/Jb4gwv1uofB5BYK7/tqofwZBsN\nPBd9\r\n=rUlm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMzHwx7V6jisSYswFhd99zaY/fOWDm82/sk0QJuiTjnAiADlROHOcxfp/BX/yhtfF4Oo5SGdtO6cAtL6cv2ExBUng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.e2e9777d.0_1628203682382_0.744680000876931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.72ff1e68.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-icon-button":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iqeb0HKZfbqfn3/kUV9mOZHG8ternKQtBdT2vGULUGNwOTbM+RtIiv7tP9OZ13z/ByFvTa+mdIe6jAdUceUWxg==","shasum":"b588915e11c05a1ec60614d996233fe6bd212bc1","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.72ff1e68.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBVCRA9TVsSAnZWagAAjogP/267kpI1XxpBi0CVOdzG\nXEqWdVqhv/M2+YE75nhHLUcJwleyiFlhf6IM6tGzfikH7kdSkVulBgFfHY+5\nQ1DljVsK7WzuYcvCx+iF1JU/pCeMfjgWYcRI7Ndaikae4bKtd6mGmkNBB2v2\nNULqMAETv5Tv6+BXsmcb1MeT8ZJR7Iz/QNmGnjeJbsgOAcvmVxtczy56Yl9j\nJvCPAq/73JuzZE7vCIVYxXJn4pbnU00Nm9NX5Df0tIGOcAzYiz6v8a+YYhSU\n/HT33ISCtI0moSvNldo1bod40Tvs7ggE6LWYdY+b4mw4UVKAWri64rE9WZ3I\nDXX4/5Ob5NWPns8A6Q/TE+oRGrMu3kltzz0OMZB6qT4TNONr0/QKwhGnE9I/\n8QxuOUblqazEym2kL2QyTIpv03S2k/hqOj6AVrSXdwgR5CSAZumw9mLb6e9d\ncohll7nXfAkLVRkR3kprS0LB3sUiwK7BmkBVx86f8b8izn3pGesBzbUJheRr\nt6Oq/8yKnKeAjLbd8LvppvuE2CZn63b6MlpoQ/DzhIF5IBzXN2ZoSkSjbOcn\nGRl3MFHi2iHyjTwW4N4L/0rPjs55v16MH3AQ6mcNA1V/co9kuOuGhKCxN4GF\nnAUJFG6quPBXqJ6RQTstiTp3xVZKRcsa7CC6NUuQBALd/mCu0IvPcRyCGj/j\nB2+F\r\n=Tus4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQYbrqAtTjW5nvi9CebTxE/zVMGi3MaS3IlUbfn9uh3gIhAN0V5xV4hYJy7b51mGGG1srg3lPwhp5SBBBkj8XWryzC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.72ff1e68.0_1628282964990_0.8686434108318986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.c527e93b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-icon-button":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U7/gF6esOPG1HWVAk7jBi7hgWdZmeTwWFxtuqxpj22oERdrXih2KujRaTGbfMTt/l5O6t9ebfWad0kh1JfxBng==","shasum":"fe133a0298692b410a8b49eca93b8da353a643c6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.c527e93b.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVpCRA9TVsSAnZWagAAvW0P/A8G3KwzWC8qzlrCcn8s\novYo8WqBH6PKo4zZ1c0pSob8nORa3uyTV+KNCWqEGaYkKIvZyGHNqZeTD1lK\nsMLJrWoimp3lk39ls2GWlAGR9KDFAg3Wdqeastti+tXZsCnBl3tLKqv9vVae\nJEyBUji8RIqaLQYB6qlzRB1mOlCIsyUBIOzClJeAoDbtTEc2d/4/YiLMdbqa\nRgChWQOyM9WzXpoabTQMaGU/3MdiC1vS7TYV3C/ir7zZsz2M3Ps78bwG5Vvy\nVhBHpstwq65LNpYPbMAe9FdUml/Msn94foTXwrYT0HDOyh6efINqx10j3Rwl\nM0GpmBHBp3fQMt40SLAq1Uj0lM/9JN4oQXrqhPWHb/92nLpBi4C/aG9/JC/+\nMrnUJM7vOrO7tgxtTa6ZFKqbo8fLNTbwmmMBaJLSx8mMB58eDBd6UoDbU6p/\npRKDX6Xw6wwWLk8hiA16pY6TA2HlSdUNiQzx80QCckA+JbW7ZcxhiqaoSkVs\nBmPC1VY3r8iChg4vNlpqrqdMMc17afbvMIo+h5Mg0qavkum+58pPP5qVD3Da\naTL655MJnETjgH/VqGkOa6Q2MuwXut4UG+Li3viq8xbHLVy0RsQBlm9xbJsh\nmYjLrTZvoIalEB8eE/+iHecbLHsdBN8StTESlPSu9AD3ouysb5PKNMJi25sL\nh8dX\r\n=CU0V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl5bIYEn5WQj0orXFqNPR1SQfHnAenJUwz4czZpB6xIQIgH351UtUwtl9tT69/lv9Bvt0yFIx7YHU/YrqqAFIdYoE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.c527e93b.0_1628284265053_0.8536552129041766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.78b1eaac.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-icon-button":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SnPbSvC+mn7UP+tSxz4DZSeTGV8cVbkhQ6WVMMwOVGC6hUHW1MoAZdTBbrQ91L13xn+qef3kK7gh2LYVUQZECw==","shasum":"01d378bcada5c61ea6ae7eb7604016214a702b5e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.78b1eaac.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4qCRA9TVsSAnZWagAA5AkP/iLyw9T+TkU8kVZpMSyP\n7AuZ7/+bIW0cfxR9KFHmr5dI3+HqfNiWa6VHTqQm+szbdNlZQ4Qm+L5A9ODm\ndK/D6mYg1ottvYmH2xY3EWcURHwHsHP+PnykBjvyRWehgtFVzYmo/SymgH6j\nwUDqawvlmNscwDB1hIa1ELLH6ku8vkLNchPmwdzH6TNL+C5IyF3my8JU8uW3\ncdtzUjQcpd/fcxcDdMD+PxeL8H6blRmCZPRJlGUph5xdGdZGQLDH7ZD19Hou\nZ+LSfiipP7ugjiq+g1GQTtDx6f6gKiW7otTsaOmq2NvoOzSbJJYjHNmOKfLu\nu8I5nv9nkJm/ttcysapwC5p4BNGAIXwTjEXH/Oz63/kLlruhy1dwdAQ+QVcL\nUNVnhexWtLEINtrVatXX2+bQuLpjgSKaHJzDT7rD0VSjEUvuco906z0OUMCT\nAmv5MJ91iEmzEvqOKU3jlO8QzMcMSrgoYdnJzhEN6iyJa/ypEhZgAxkuETkA\nB2SHys6pzwD0QUxPr4xPkDVHNmjdWPAHAVGTVHmhp0IK/jM9aeWIjK+tPupc\nak2xel6QXJKKCgjIvZ4skslhBVzUSDMOJ0ZSrRQWhI381/EaE9a2V6AQpVaW\n96NWM+/XRgry/ZjNrNvvAti8I8EQoP+atdFiIgEk9ApPNOlnECU9LOG491YU\nKyQx\r\n=qQyr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAlj89qRNIbpISs4L6k0KMNqPb87MfN6lYfCSSt6f7jAiEAssCJBLz91wpg+8zA/QmVHDnVpb5zj/RYwvvA5BT4cF0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.78b1eaac.0_1628532266277_0.5781395365025759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-icon-button":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7d6ESD3DPQHsQ+UNRpEPwIIzvXYhCVgmHgbi9joGvu34yIBI0zoX5g9rvbVyrh5NPHUz59QkxpUEaWVdnuAucA==","shasum":"3ea2e19bac5403141872a7694c98174cbd3bc975","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsnECRA9TVsSAnZWagAAoLAP/A5pZEWQiLx6AwtVyKfF\nD0gg8t7aF56crbHlJtgGHAoJb7Pop/B33J3SflSQZ+JAEOtpyLnA/TtH9ixr\nXeUXpxpi5U/GilpZdNRXlwGPl8JNH4UQA33codyyx3f292nDH2x6s9P3Dalp\nXH2/AY1GRuy0Ato0KfnnaQbZvbuJzYOLVWUutCstVPZmkJz1uPeVuFQwJ5LX\nqjgXCVHhisGLpQJ1/ocpATi+HFrdS5ejxUh0jsoOFuoWAnraXupJ62hr2PYT\n8sG2bvfBX8O7k/UKiD0FzfeMykexcn6ASgDdyoU4kd7JENpbJtwkxyxaTr3y\nSlTKIwxpJQnjCz+FZWQ+oJCxioNg6NvaB5oY5sRC8Sqf/rWKniC/GDs3u55F\nhNuAGzqUGBIZ8v7mMeh2TaSiXaRtv9JMy5AzLlMJzGWVDRthPAvEP1qsZ6CQ\nFIItxM6uyGdWsx2iY7oKyhsxHkJvLeeeU2TK7rIZlVKFrxmH7YzNbiqPB0t/\n9LoIL3T6Mx/FVqyncYgegF5igZRQ0BM9I7zIuDreKzdMCbZGTqjsdU2RVsro\ncPLvWKA85qM8FTk34bOK624AzUx7WJwhAI9Ag6l4EsUQdqbwNNIuETiTGITr\nKT6uMQrVFlvWttNISzlgYP0SK9ANaK7QydHQGHauTmD3HPzYHfGdJBampMC9\njL1q\r\n=xMs9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwS9yrAM5MQaKHoJjTCIXkcb68Dz+1OSCuFpJsdD9TwgIhAL5btrDd1HwL0RCuS3VpuIRCxZCDItD99aUoFMNo0Guf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.a8a4ddc9.0_1628621252608_0.23183929334437936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.99fc0632.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-icon-button":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i6yDHfirNUN1WOYmZx/9NsYn9f4X+qP6n3uV0D3EqUVACPN9ufb3KsFtOzgiL2MlK37NFV9igS1u6DGkfm9A9Q==","shasum":"a46cd65c10eb082063cda6579c6c2eae8d6cda5d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.99fc0632.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2TCRA9TVsSAnZWagAAE54P/0JORbHsVCT7uTWM88no\n1r8ULFnVNMU1Y2PcWE3RZJsL5YCXdm5xC6f1ROQmHaLig0z3YsrjP+mOIzQL\n0oUtQIitWlrHQa0wC4PrG6xwM8DAvNjJUaleCzRpPQK6cMJafjnjpg43k0gl\nSCl+HhfcKj+tum387Q/YIgijK6Z5Z8+GeRl0hMR23WCbydaaIoRZRC+KVFrb\n6p6tfMg4FsNZUZCgQTSXFbx/q5zC9pQ/Jh1aW8TyudVEhLjCtGtREZn72wf6\nZ+KZnJKFjQBOzJEKAks3w5UaAvB9hWg4BmGD1JnKUnjWztMru0TlILrEzvVZ\ndKvYopkCht6ZTkBoVdnyVZNm2NcasH4uoXtNuAcuW1QiEzuDMyeD3VGHJAYR\nWS50cOFYnfqAJQkcOCO/n77Hre77VP46pDqyg9puola00eETwNGPbnb8A8as\nlfW7wGQctVW+rDgvRtmUzy8LtVAgwpL9Ig0HLbv4CanrnLYXBZQx/q22skvM\n26dM/NrpRh7Oww9+uuvS7VPZm5KBX0hTAwHPIVgx7taSH7a6DFlQIr8fPqZC\nyrg6gHIhSL7FVOQy36YcP4JV17IJoXVmyANXWJGojYe/S8japUziTTRBcQ9L\nNzXyvjNQwBnT0W6SUhCKtAmw44dOnGpOn5P/15wIEZOkQ9KH4HCJs+nONnJK\nZVfq\r\n=pxPQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdcaMS1GHUk6Y8c7SSPDo2ziCBNAMpGF82mfLkS+FpCAiEAlMJdPCD4ChAY+F91F70qLOdEhO5UnaxjnVKsdbb899k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.99fc0632.0_1628720531258_0.08944997262567678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.3f47ae57.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-icon-button":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gtlAbbvHmZKRTAYlh5Gr3zV2/JuQhjhnnsY0Y5FGnSUOdXY2cNCxTIMr+yIj6JOJlKUtzbWSXTjDuNzoZ6xHXg==","shasum":"45877517c7142f7d94283bdae9f55a5dcb147645","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.3f47ae57.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWHDCRA9TVsSAnZWagAA3JgP/RSatjXnHVbhrdfNK7zN\nS2KThJMtzgVlSmX5pEbp0INceNEfLwPyG+jV+fkn8fwoEReHULZaNrVaROTm\n9hgufNtmvpc6rgbG2QoGbeXMcvU98ytg6Qk0YTob+gbtP+IBjJ03LumfVh3v\n/0OLSLM852CnZ2ZEeAY14qKIIDW3HmzZzeGRg3qzGg7IexDf4LVZY72syBfl\nJXzZGLQCBwXNiXZboBE0ZBQAC4DH5V2uPFUbYLxEo8iDceRk6d/TKN97Q35i\n2Ui44LBWisgb+5Go/Ty1dkW6a9WuFAurb76dfzTf+Ngg8cojnOo6o8oPqVTv\nYuzo6zzjCdB5jCDPDeb8EMLyaujW/D/9xfU3cltJTFbXij7Bbby8L0l7op/h\nTJ6CENyMneh6CGT4jgAqgI9Va5pm2w/HdfA7YtMm+9DyN/Sdt1yluODv8e4U\n52kSdywwrTcBED2LsH/ocOSwNNHnQKF31PthrxI/LgRAJCv1Pw1wQHCNX4WY\npNy94+13VXPWWJz5QtPZ17YCwjDuqGPJ3AnE23ivEjmjCA1Bh+c9ENF4KLL0\nnf8XAl9vozswAzuPKfULZsBKwLkJQIDx+pD+4he09dBxPUw3HuDPzBSXLso7\naS6cyOYdFfwD0Myvrb4A9iDpUom3RtZJGtjMVViEdJbKaaOKWXmZy++OonmL\n/yeA\r\n=fycv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuaanBSqmpqoFT3xGs5OEbdfGepGAnC9nq0ZtVFAO7+gIgTFhT5oQiWoWfz8mr1vkAKSgold5uS0b1YYyjO5hc+5Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.3f47ae57.0_1628791235381_0.7044826891401963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-icon-button":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QiAVZSFVHL8HnBgjUQjEsUHQhzMyM1/f1uOYKcSjK3YS9VUtThACRkGtf90yOO7iWxyx9YmqxTI5DO/3CcEZzw==","shasum":"52f46d81619175ea75e2ae12109cac0932a4f23c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.6b9bfc32.0.tgz","fileCount":9,"unpackedSize":38853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWduCRA9TVsSAnZWagAAhJwP/1MRawn2z+E93t3e8AE5\nhMYd/cHYPyh9SkoWd7CRSXTpofYhN3m0KPfJk/h7xlzb+pbp+FdbNWE7p0vn\nl5hrMD/YeKikNQxnni3hLIodUuNnV6jSV8qWstgmuTM9WtRI/eFPlciSJPgF\n/WjMXm7YK7SXYHNPNhp/fAOlIN7lMHrZm/mmCEEh5qV6CtxQyHwr1yciEQft\nCPuRxqoRb+tsDg3Iz7D8CZJEraBWpr3ShBgUxwzN2zopsOujZrc56/tqCN9u\nj6r120ro1bo8asPUFQlYIVEzQrEk2apCmxRiP+x6G51gQrfLDHNAKj+DzkEk\nZ1aaXrSEbjvS2xa+2qnIapRAUeUGMdvs6uBZvd4qSKiEeOuC4YDrJrcQ/4D6\n45WJQCJdxkMd9T2BxJEaQRb5ZFRHv/fpNgZSB3xCWLsgHB4C2UUvSePqNblA\n49ZIXXfbCEZDXhkz5Z21JdZnyYk5rVUV6otCqHuRQDA1afeEuECcR/sxgmw5\nP8PxtaIRBB4v0E9za9xIP4m05bo2KPuxIWLckUFCZw3D7SnvfRj3HxEIng4X\npJ88zm4HZ85Hez1thHAOmQJPIKJyZ3RUKUVKif+NKWmc7vrKj/IfomZGj/ss\n7nl8UpSsXNM52wEG0Q13uau2TxL7IqolptWzq0UkU3R4zyW8IBJoC/q12zPk\nZSTM\r\n=GMi2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCge8S+TeSd5fkEA16gutxWu/Hkb+ZgFwNzdkocbWHqbwIgN1Msrqg0a3/bNJLTLQMfYS3UaZTj6EqdscaZZETkHUE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.6b9bfc32.0_1628792686720_0.22940091592427114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.c89ecc63.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-icon-button":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ko4I5Wu1C4JbR9jPhz/LJaVi8rVG/ZDe3EF6lyHRY+q/O0LMPXJFXQN3E7cV4voDnCrPr+UvGzyrLAbDV1aTzg==","shasum":"94d18c7ecec4a163b9f99993f9c823bad764c13f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.c89ecc63.0.tgz","fileCount":9,"unpackedSize":38831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2sCRA9TVsSAnZWagAA/ykP/3TvsXES77wZ3P/qOW/g\n393HFVW+iNQnGXMDArdr7zuS1B2W5z8KK/clCmb0lRhGTCtya4wZaSs2kcc8\nd10uInLS7nvFZMdG7NXjHa6dEqs9J8xkthvxbqVAXWYvw3SbZU3+8FWes7u6\ngWFKTEmb/qI/NvekmTCYrz0r+J5h3PJv86sZpSp16E8W6u7NWJSFBdZjHZze\nGfdibc9cIbYGBxumuARpwj6o6k7x9DgWQtbzSpIlZ1HYzh3PfSqkyu5fiYBQ\n5d8E0NIa2TA5Z9r0mJPWtCxKaHDF24mf8SuxpOfEpCkXcdSh9BX5iVe3CMyW\ndop1VsrNaolRon+GVcDOV/JBLhVqDV4hNhOz+mR1Pp4s6EKutwcNow+5GZIe\nc+XFXdWAfCY+uOMy6D7/Zo3q2GTfDPVziC4D84tLbCpCqSPYM0OUhhyXWM4v\nhvEWDATHT+ehTTRq+xAR3xA+d8bipGwTTnyE38vyMaS7yGavjE63zys9hFnK\nH86FV8xQPzg4HO44YEw7rNzFsAdKehF+xoKpwvcJSyoy0q/ftfaJvXS9gJNp\n4OeFnubqfbkpvzrEYsJZy+Dp6DBl81FJZ+9v6UFcw+pjdWEdEWxXVIRpakRy\nQF6iuDFUsLYSRhWhIh/gNj3p8oQTZRhlCh1pR+oWrxOR2RHCXVrdr2EfT5lE\nh2Gp\r\n=2DnQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGD1EQIIZjAF1RaOg/s67YqeFqhflkyow96wRU79rRwgIhALAKhihobPCXxMMOPbdhscK0pOErCKMoqFbpvdLvvU0m"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.c89ecc63.0_1629134251884_0.796759103757656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.59de86bd.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-icon-button":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HQkOgqKk/LtQ7E+tqVpCl2vcJQotEtMlE3WEd/Ofk8WDgCkHZG4uloG3fiYFXm8VBXF1VNzNsP9MzsIc8YvndA==","shasum":"610e7a38f2df3cd1058f8353cf7c3678b837da16","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.59de86bd.0.tgz","fileCount":9,"unpackedSize":38831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGS1CRA9TVsSAnZWagAAxr8P/itvPcJKagURutpKb2BD\n85kIllAW79R769qhpGGEpHVNxOEunpbFW7VcuPL4F7oPIBrvnzTNoTH/Vcgf\nx8bVWA1lHi9AH1biaVMozDPiu/rUuN+Ia9tAHU1iUSGJSxJ09HU/DtpcaTU1\nCSmWeDeiHxfAuWaWHBhCFvmZf2uIkZfy3RFOB813p24PJtBcle3sgkd2Ptrc\n01zvBPJmQggdL5nhnG+vrEEauU3SDsNSDzoW2nY6dOcbiWwjgd+omfBBAupg\nli+7jDt6Khk1SFgb1Qlv3Fha3tnwaLybJNfmntkWNJ8ZfHj0qFB6pbTbltyb\nE/oFjpJv7FbfKpNnuh3JZW1KFz9iOUYesI8MtfyPyRHpS1tJdpgCNA6rt8ra\n+5p/Ij3P5Q4ACyJmRt0MbL4bBdKkvdcWhlZZUIobG706EcVZ0a1WwPJ9pnTF\nIit9z13+Zp9LFzLE+y8ZDPcQ/kBs9wK6HbElwRaExUmu6YQTE/06v6BOofNQ\ng9nL+wNpN724rp7G0Wsdj7XARVsv3CTEul6F1ud2FAtFDgTE3zRUbTmLfzXa\nW3cCYhGQWyiKzErSZMSFNxUAARjg3yu9nZmYlAzL/X8pMf2FOFXo6t3C7usO\n0yxTUyZUnrpkHAnF6i5V/TvThO9D+Fqg6zYDpVQ/TTVew7PQGP+88tQ7blC+\nU4I0\r\n=Lhkp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOb/xeTHV5UHY8ZlHRRuWwOApXBobTjdbSaALp+CwYswIgWhIbFrVoe+V1pEDRh+U52P90N9MQ5OH8THCqMKIcH4U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.59de86bd.0_1629250740917_0.33679872275850675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.dcda879b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-icon-button":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JgVNT4Jr5U4ZfrVkow9B3ItA74WPphkg6e2aQho05KbuvuJY7Ur0iO3G1sLFirEnwm1ioCQQi22VlLx+bgz/5w==","shasum":"b899c153cc15113b3fdc6e5a8b4523e85b96e7dd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.dcda879b.0.tgz","fileCount":9,"unpackedSize":38831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYh3CRA9TVsSAnZWagAADNsP/1Iy9BfYXVXw7Bd+zrXk\nTtez0lFi2nEeoKfojhxgjmrcJ/dSSDjr8DOn+mwML9XbX2hp4Wz+QaHMB4RF\n8DVBJRhA0UpP16XFNafWUUmS9L8y357nP3ju00y0y2K3pFamddZW7t3caVS7\n/OGz2QmCcv7iuthV6xaRxUTBj0ta25Gi4+qDdyVkv6MrOwfzMRCcr3GxYBhE\n6ZIfdXeTTej8vqBx+YK/8iOJXYP+zPq3VbehFiDiozclf6cJlK5ZAnD5nmoL\nEZmz3NkUhRR6SUHBYzD0218p9+vuFeVh0xs73wjOdrimDTiYh/zghp4TyCxp\nls3laea+vRz7cVORk6kdt8L/fXqVN1HCBXLvQ9R2AhTHvXmsjnqLhSdhEqeb\nN0hNah4uHgbQKUgEtNE055v87RJoaY/bmFyCBP/lvqPwjEoeDt7JQqTScL+x\nALs5e2xK29RmF5U6+MrGBTSrwbv+nbKj0PhDpCZX35l1tx3aUi8B3SzNCdvj\n6nyzk7MLxqXF7pA/tsO6ZGh0iBJYB10FA3R9JvaLtZngK7eRprTomGa8Sxkk\nnrC/jUeHzBUaL5XwTkOX6uzAuiplucrjNhT1M7agcItSAq9eZZZBdhydm57b\n2fIJkB0jtiiwCVf1OzsXEY/wdxKs0L8v2bouknk3+gfcICD4eIBJxgTSk7HV\nt5Ax\r\n=7PNT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMtyVVEUqE7A2JNpIkdk6dYyULMgBCS/lTSTghdNElpAiEAyudyv2hvgj896D6wumvzEubRz8dJVCfDWE7eawe1vvc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.dcda879b.0_1629325431502_0.4780487636936155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.dbb8b366.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-icon-button":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-55qSIr2IP76rI1Njqn2668ZGPyA80fYw2wihja/2+mbccTIJ+Xy5uc2G+gwIILW1kL60/+Kc2LbmVhq+mYoiLg==","shasum":"86114b170d6006316dc7967cff7724ae2e066993","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.dbb8b366.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKmCRA9TVsSAnZWagAA8iQP/2tGp4Su5Z5pBAcfaBE8\ns8usn6PVMVRHW6Rdn/o9JcqTWNhJzaT+F7/t1oZp6cHmvG1m+V+yA7aaFHsb\nXBu9n1FH5ugDgnHYoKtWg2K6K4B3cA3gHV1zaWaxoeNzj4hYi8nP1wKt6CZU\nJmUxGM5CmqGpJx8kaz2qLahqiuP/3afLAHHFG4Mb6Y0XTRxVW62iHFP4b3bL\nuxt8nDJL51iz3WM9YdbzRkziQ0uTWHxkOUUt369sH4eEkMY0YpMrB+29XBbM\nEj/NAVCwCY9bWuxQwMmJe5wLYqEc17AQiH1atEQSx+Sub4N0Z1HM9VHT0RCR\nsIaZm5VbcmHgVMGgazJqAdB8g+83SErFvNU/C5C0YKwmVYf8p24auXig6rmw\nGnkHmjEyIZzbfjHawuGSa5K6vjVcmJwQ13lVC3596EIG1/mnoZRJVDEoiaP/\nhayuNcNsH0JF+EozsOKWwnrEg15ZsDA64dw7wtH+9mtp6klcxgpAnAm55cz3\nkh0tFrY7r4bk8h5nc3kT+LqRsfg1xyEkyCFrnsnA3bycKZaZ90hsnMKVrB5I\newdigkfGmo6uJi2l8isi9Qw0PhorTj70TzJluXdSWhhq6+edQRknNU8HhoRU\nRA/bfoRirziUADxxiFycAJCz/rBmST9BIFIkel2Dy4jv0TFj6ppPrch6LOcP\nKO7k\r\n=vJEk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxVsIQN10dYiKjveF869aZqLUMeFylB/PWMETwfqDGuwIhAPRlzCm0ihVvqfFeTZAy7w+nKXKDCS9A3xdmh2F/o/Zi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.dbb8b366.0_1629414054376_0.563156355767559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.c6e3060c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-icon-button":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QKlL2yCQWOfh1yEQ685HESSgtSR6FIJ2cfOAXsdCUk7afeCPsqIiR0G9Ks2v43xZX462/ONnMlm8PyiuQK88HA==","shasum":"cce946dbaa3c4ea25835117cbbaaaeabafeaba02","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.c6e3060c.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMVCRA9TVsSAnZWagAAZ4cP/Rao2dqvIoT0MYu6raIp\nn/K8IC7LpvM4/y+ytVTKy212NTQKg/sGtyDExZFbEkqAhJeii8fU9FAD8hBb\nR0NSjyZUvAHQq+mepKGBhVDGMuQ/qDk20XYm8QvELwJ7Z32CChGswb5Y0rF8\nJiWx2B/fSP4ef/EnuDiN/pmZFpksl2RVsJ/YZGrW/ZBZN2azuoXh2Qo528d+\nVoCLPEjT4t6sYXeTWGTthwtXRstqmiczQZmY/BAow7aCJkhnU5VfF8WvP5Xa\nz+0CSvv3EZBNBOudqKQ3vNF1L1rGZBpnRRybRGYY0xJUv8ump2vFP92IelYP\nUD5irK2UEoG9SXCaCPdSvRFRJ3GQ/wIUUYlLZ+klx3ZtjGu2MvidiOuiNyOs\nfRGEmgBqtbMu+EmXLlvHUqwsL6E0oBeH28VD+r9uWaLbyTgBP6yQmdoWz3bH\nEgH/Xs9MGUURax6/E/GwRnzy9vLA2AFMTV7iQxZ2YwLX0gX2nYScqImqL/uA\nkCU2qUQT2/sslrqAeQFIKPGt50U8aZcbmpb5niMXH6UiCsf8yq54JujqchDD\nXyb67ZS01ja4YyXkWF4wCkZhlWu6piGf9tuq1rGV04SqU9p/SWi/lgy0CDH0\nV3zkp9MHNjt2rPgSxPawaA7eSbw0YDiCgFdOwZ9awYA6FU8B+QM25aqlcm6h\nxwni\r\n=ZIhd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZl5/syMFG4CSLLPLOr4UebXopiF1XTQ8HrY4VFIKwsAiEAg2lbNJkaLPDE/x8v5fvR5oNDw3csqFOflfUR2zmzn68="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.c6e3060c.0_1629414165766_0.13304287065245135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.03120b7d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-icon-button":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x9CrioWGsf8txSCdZ2sKvMOmw01S067IaPSe6OI3spteKLBKzKKZiPgOktfLY0k4RgthzhEVsdHGEFCwgk3GGw==","shasum":"b1dc0ae369cfb1ffb7758a9487e308b42a637c2a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.03120b7d.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvcLCRA9TVsSAnZWagAAMBcP/3CEYOqMpqtW8vsOoGCd\nqVM5WGuwKHQpC4AN53yeqDe26Wkzc1r0o7KjvTMB62+OSFelGeV4egvE5lz8\nZB28TJ2Zi1kClsuBGKQtrfA3E7vAYR1Dfl3aWWDj7cY8ckSrO+7rAovQFwHp\n/hRFGBj99eCcsQxACc22RgBStxLaVW7rwnqWd3xlt7Ou88rfTb+onj6SOL+L\ndkNX1GnOK258lysfFzzrL9G7VRVjinmJZStH8NF4LEaGi+ogg+4AyaiGApSx\nDR64GMymcMCIU0SVqqXWl/NG4nJdGxz37RGmVitCOYxM5nKnffFCSRNG0ax8\nTB1xIkB6o0iHRik1Flo+JTtbpyFH2VDmqAzycjPAg10kxdKRtcZVKKEx2ZBL\nDY4bTOVGRlmLKsnDfkg5Wp8SOWJ/teYhNcpiVNVfjdOMSEoeuGrR4/uS/JUy\nRPvCRy+Vjt2dMS9ZcLdEJzvzW+cdnVo+4C9fFCigKzQbHHJsWXuKMgolHn6M\nOKDjR09PAI3Uo3k+gqqfLPMy7Ec0R1y0ZwKXDKQowF0oUKpCRCRZSNPGtHRs\nlqDn9bmgBKHTNc5Xm9YceEyk7Gjuq38Y5PRFSGC2SPeyZaLrJlFcpQ5BmkUp\nqdlaxLrLKK5bDLVkVHPMNlb0Oed5HX7CTOG4l4KRTpjO7hJnrifx3ZACE53X\nBQY2\r\n=AZAH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0YUSJqkF278lNIygviWVRI4PvCf+J+X8bbKc7LHUA/AiEA42B2UhjKDLTVapnLzq4KIC5zAlXx12/MFPPofjElS7U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.03120b7d.0_1629419275090_0.639676259674254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.d75a5f74.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-icon-button":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qI/AzaGiZmnSrtAKzHB6QvTPKpESAG3N4kUsdXqqSY4Swy5/P5hJK/M+sgxavcgzwH+/5+CeDRxMQrZspVOByQ==","shasum":"298a73463690daa2bf2a5841214c4260673cc57d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.d75a5f74.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BYCRA9TVsSAnZWagAARJwQAKFYoWCsSBG/0qu35q9X\nYXa40m6wW5cf3FqMmODcwctV+OsnhciqEGCiS+fs9fqdq+nu6XuKth4MCxD7\njsKI0vPUAryPXo8O/rBLb6ndSctutUs6YmYalOp2BfmXBmyFLQ9f/y2ui/Lu\nbDMvOnjFELjVoGhweioIZqHGqHsxX7srdMtkV5K0p2e4NAGJsJrGyOwA52fy\nlk35IwtosJ8XlRLeKQnG2cdEcH9XeE69vqFCz4hJG8tcE0ab0Fgn3uKoRfHG\nuKjI0ECLYMmHot4c+/reGevxQGn3+5BVRbVBuXlLlhqJG9d+JkYQs7lEgyDI\nG0pzk76GZWvHZZlZCO4GW0XwPBylt31nGm/8KBUOvGiWJSuVLnA44dmAv2nA\n4M5RiLJ8h/CCbGOBgbdWkRV2xzzflnBEJM+J+5ptyZt2m8LfbfquGJt0DqdC\nKTYltyq+VtyDCVTUZSBuwpsyd2zdDRCGglk1EUhnwobi+VSMrAQolhLypsdk\nZ7dzyHF89SbkUEF4OpS+OTTflDoKgjUvt5RRPpsHazsmynlQgiar1ES7T45C\nUMTNf1em4AbxFOT65RGHRewekhqpxoFtxjCefMVPsNf7tw4+LcQCR7wBMjEc\nNWaWGVLTWsJ8Hq87/fIicK/7tysBdlsIjDmSGUtGjM88fK6kq4nlV6QbSqfr\n87Ea\r\n=c3bX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtKdiTa0yTi25g9OPsMer3g0ZGMF8SA3S/DlKcKLZgEgIgchTptHqnONly2G8seDwdIAg3vvacRTJOWSKNCoMdTBU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.d75a5f74.0_1629446232140_0.2621588563490438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-icon-button":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/ErGtzMgQFoA/fhfMMa7v3pGEsxiCHdWVrmaqtQWYjdLae/5SQlgKbAWWVALEXOecxCMazo8ZC67aIhhIECWQg==","shasum":"cbc84bec8e9c43d9ef2c9aad0c3f46ba50349333","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.3d79ffe7.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+S7CRA9TVsSAnZWagAAxAIP/1ix3+CehMrShSwioExW\nI81L4tVRUSOZ9zfH/qJFCH1V54PG7v1KyviGDJNViiA76v0ZSZPBNrayn0hA\n5p9uSPy8zCit+mtCNNzuE7pEofK5xsF22q0r2ZWHJ1r3bXGf23IOxXD5EPco\ncY1gve739mMY+JVJBQV4b/N0lQE3hFeC8ZHyRLL/WdJKnJb2hE6OrlySBCer\nFm6bzsSXPVA4dKeNbu6+i0Q6wFzlFJLepcucQ8+RG5iVX2x9yarR2l+UE02h\nKYHbzQsAvK5lL682dK/nrEwdTgqsGNmqxBOMkklZanavJYaAvohgxQOciltB\np6dQ48m140nrbgYi7+GDV317E2j9PbOkdrU7KHQBHwcZ6MslUCQR/hg3PeFb\nEQ/gY0MpKw6L7LFlO33sBDZai+Samoq0hOzub9Orth4vBpVmlKyXxKAWHOjl\nIrcMVZBZXw4TeCEIZkqx2NfldszWR0ZhLKl/GlrJwR5l07pCpNR8grQxkRqi\n9VpW31Yz51zfFrxG5NsPdur5JqWMQ/N1Pc8VlV0Lje8qyJwvWl9uqAwZC8gD\nsu/RI1qt/WdfU9mB92Gp8ioWBj94H9xWpvLUMfgxqkad95SkepvRjOk0COZd\nCKfUQxBSOnG5oon7GnAvGXOVdURoflRIRKKdbTAMgZerjo6VEvdJvIwkjMPL\nSffM\r\n=SSjQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCIdnepWUAMyLtymVWIQjwiDLlSsEfzbiGAAe202OFRAIhAIHQ69jBW5dXCk/Q+EeyBWpZoslGVDEeYIal8Qy9BJtp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.3d79ffe7.0_1629480123357_0.053154360681151314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.02213ebe.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-icon-button":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E/onJmsIwtr4ys34YA9fPqkygrIqWSYBnKEgvqlJaaAmYoUM/TqC/vdPxzEo4w2sZLq/RkMzMU8raY8MHY2KMA==","shasum":"9903490c7b154cc39efae4dce9ce1dde60f1a122","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.02213ebe.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XYCRA9TVsSAnZWagAAI8MP/2CrkWV3h0+VlJbOB8jC\nT/Sk2RNbEsxgkQ7zSrCnesflDEr1qTwaeKq/2PbKfFy/dbBat78aTU2nqtUl\nsG9MgF1CbBAgD2Q2A3JSoKRCXadOfF3QPKGAW64zVNjOQiyQp7mZaTI2hmzW\nPoWIBdeCxqO+J5zPwWHYIUauTpIzPlwyy1cYOY+TkgjFnlBLcm4Nh/DqwrX5\nSH3awxNVhGtw+uOkVqBq3fHe/ls+6NQEPO2FtCqFb2JQj7JdJqL/DN01jgT1\nX1WbqQhF8oL96bPiQ+9ljZuX/CB/tLdm6sX3ZowKgODTF8Qv6/8wUtiID4F/\nNiudPEGlvyJlWXbPTfoMfFOuexkeqs340t95Eg/fkzy/z0YSUGLQcsMTZr2U\nY9ssoeDA8F2A1DZ9RsytPUPFBorEVgrjrObtP8iDgWoyz0Mt03Q6L3HAH7Pc\nF+ypv/9kR068HEK7tN+JK9ft0H4bdB39elZBKm5lrnOrM74w+//8YuZGnhOq\ngPsMAEvZTkiel5oZMZU0KLm9EqiWFA41VOv9FGHA8BcSde34iphVqyMLVkWt\nKBqzdndxI6gx8us21ms3tpzE9IXgzLeUIi+blvdLIQlie3httibIeGBTuXbA\n8WiLyU6K1GHL/3725qSTDR4pDjLG3rmEU+Ybz8EkXM6ICFMJ2r/cX3PeGwCF\nK9mH\r\n=SCQq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlsw9uwSLscEa7EoEvx6aKCNTjgQBQDnhlAB+TG0zQ6AiEA3JvfxRRZKwmti//oXL0DiNgKj2kwUVwm1rEABAjURVI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.02213ebe.0_1629480408582_0.18529227162064932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.90a999b9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-icon-button":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ax0t0YJiE5Z3gzFfDLaBrya4AK81gD0mMMZoh2C7Q3qRxuP367NjcBFC1fyOD/0tQBAHBWb7ugYKYvLRZGrjHA==","shasum":"1df2dd54c5884a90e42fea50b1d61d348db27b08","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.90a999b9.0.tgz","fileCount":9,"unpackedSize":38787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/fACRA9TVsSAnZWagAAZs0P/3xY8oYcKPycyr3DZ+2X\nCw/d8XHkwnKebFeaY7RgJA0+7EqatNapfwWiiSwtEIUzqa0hI6bpY9hSPwo8\n8bdV0czscoSkdW/33jLgNADZWJh1j5q86H3Vsp9h1LcsEARDA/46MI0byC42\nPqyIVP043Eg+xb0D6L2wUtNZbwDAS0F9oWSWAq4UfMPeoqhPOuuY9HvQVQjw\nVH0DxtNZejTYga0cvsZiQcmEOlral5i+FMpeb+7XqhA42Ao9u6SFM+ooolT5\nsLWLyFk0Bduzudvrwd1bKqn2CiAgJirl6qG6qd3epzozi6f8Ii/P2WgGElBe\nhPjSJjmYiqyTcoaBPuhEYfDnkSCt8TGMQQCL+1Vqem6LzwDDla1uTBvMecm/\nlUFVu2G5x/IdsSIZ0SHUKSAL/W/xMiEy0Sg+8B+fFNT8JIv/L07HHOIWBFTe\n8LITgaF1fxMHUASL09Ehr7YXoA4qWdLPA4YvkpZ3K0KQouO76PkR4pZZDGvl\njbsNHW4gowgDx+oRNY572F2nZlIQuOzkakTrXrOZLwdVA79yOVrdty7xaF4p\njIXapFnN6hou/e6/RruXk9JGiRtm/Wd16Wj/U/QOCsrMVED/3iuzEKCwzfKl\nT0yIY+EDD5AiYe732gGjqMqdxb1ARtfHkbB14p8KA1//w5kbpRWkGht1KQfT\nIl06\r\n=5N0C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI99YSo56Uet/KZu+0JDlqDh2WNhIndb3qGjm9+OMHDAIhAKpCkI8+rJFgk9qAtLbkEQbxLP810lf5ZHYUu5FCQmnH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.90a999b9.0_1629484992343_0.8744511936961152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.6db58716.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-icon-button":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IYRI6rtuW0ZLwwCGShieX/VyM/ciWpaUeJnZalOzPX8iQOEdg6Af4JiU+c3FSO9hBYP8Z1LJb+QgSGT+IfzlAQ==","shasum":"18688edf8cc5ca4b89650de47348f5e5bb93810d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.6db58716.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WYCRA9TVsSAnZWagAAT24P+QDYVFEPI7+pmb3EmpPG\n7PLwifv/4FhlWAH21ED71AUz0JIqixF6LU0Z5zYFtazVbG7he8/y0F391isX\nxsRdS8z8AvdIEhF36x8qBHpKkd3Q+Qg/lBcQI52AgVx6l44v0oKNbmMwPhEZ\nFwb/B/k6Pnm1mRYUG5s6gKgs2Bc/jgsCYcnexK6cj7Ugc4vZ10pxnGkOoJ4w\nvvl2SU2pqtppxzHZctnvOut0oNzKsY+CPxfjaErc34cG4lrb9IvKDAx17XO1\n9DPfuNXLAsjEARK4NnhOhMYzvsknIZDloX58RsThgOq2znviYUXsuu93HV0a\nQGXPDgxR5qaDqoMXXr24WNuYqineEqUI8Y6jel/CLvAelgrqXXPDI3Tf/aIh\nBDStJrOGhI7L163vBv7J3gfR6gYXD17GamQv0jkORS+e8hwtSN95e2iqrsKC\naCTfIKTht7oOtf4tW3WyQlVrWlSm+xEmWljNfR8qagZ6C2CsQu1UDrVM1poQ\noSqoq9tyeBlNZEqK7qfU9MHNK//9cV7jYMQE74tMsOM4Jhg5NKFF/UBEsMoY\nws+i6nQofL17KoRDogM8Mt6pi5xKrXALFA0VklLz+dwIyH2WeQPWGmIQNjd3\nRA67L3fjzDX3v7vuFmK1FYGWJUY26JdeS/URb0qMf1LGL/B5COBh8VCVnJvw\nyj8U\r\n=PfOf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXLGPKYiI4d+GT4RYtTJy3RvaVA1KSwEuq/hkNujbUrAiEA/kO+9QakUiSFzCsqU5f3tra0qbz7l8zEnFbnBLumILM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.6db58716.0_1629709720658_0.9233576586860213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-icon-button":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SiDsGBhhtt8sqUL6TwDlEvm1re5HYvvCKItfislI6+ChVC4Q/kJLOhWaRt4pbUDZJhib+NlwGAV9+kc4sw4lkg==","shasum":"22f10aff47e7e943180f93794784d4aac182b3f8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.9fb5bc35.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZTCRA9TVsSAnZWagAAH+sQAJ6vEvVPd+H93iKZMjWU\nG2WgZ0VC3mY+4FM1KufEG3QCMpczt9R9hDGyiDZkTMdhpcsrPvBYk5MeyKXp\ngeLz1P10eOna8cgCEEbIqhWFDvtHWJaiOXiP7M0YsMpLqneb2g44BspoKAXH\nv33k+n1Iht9LbLJ/6mp0dUUVfoomngVzH4JsmVxO7IKk8eQBXxvmq3iirbWA\njwGUl1rB7OzCPpSuPwnvNIwklvFRO1lUkSEauDluU2L20fVgPEmZhTAIGIND\nDO9Vr6k3uS026eieTsfrPHNyao2+4ilZ2X0AQBpm5ZrD2/aEwqeaIaFOJXRB\n8oR6OL0m4BIxsKAcj8pW6xi7S4gcOD3Ut4N/htTOIH83ykXqbQy3xTKqCb3W\ndS6sMvqD/4p4kA/jwAUJM+LeUeq5hnXcmva9ctM6BLZr66px+UHckH+Fc0a3\nZYXdxhp/YPSWdvdeMtY2JgZDAWKs1zxLDD+UT8wUzkaWo+APneaKm+LkJSLK\nvJlObqgEQZG3gTX5GTZ6J7lPJI8tpyPG+tGw35OGygCQul/i0BMNAgj9tOZG\nxO24EgeFuZdYomjiaV2juMiYD1hU83eL1Hc1sgFfOmElLYrAFr4p07qDrc10\nnzsnDPYybZ2kXAth46+asCXNvV3pEUoFsIJ+L46kR+e9OB47WwY85fwU2/jG\nFmyn\r\n=11p6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0tGZNzKA1fCEauLEVePxVLttEgZZJeP8Sv97TE+A+oAiBBv0CdirdwS0chzhbIEpISwUYXf4g/WWq9CjpwtfX1vw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.9fb5bc35.0_1629759059542_0.12639284292651976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-icon-button":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PsyJDnrUZt8hd83nELmPKvm0ZdBW2YB91hwQ/d+SRS5a324vNF8IL3HjJJWDj330B0M4DGz/nrnqIh445zB6tg==","shasum":"c53868ffe93a73975b6a923424f9fd162d0d05ef","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9xCRA9TVsSAnZWagAAbRwP/Ro4bU5IzUB4uky1k8oT\n3asfy7PHkNOCwbXC8GUVyKAD4gPJuTQpJyEQNR4ztktYLc1spKz7ktf7b4WK\njKJWVElLgsS0SiP0qrmgM25d8+PdaNzCrHd4bT+LS5pY7XTQ8KNflJb02Ay9\n4d+XdZ1+zQ9G0FhBWsY8qsVK17S5QNgHzWr6VhwR77T0btCS8p1Gdbg1rCNS\nwIKnbydQRgkPZVG5Jwt3YbPIFOHG7u1SGwCcSm/kzWEHmRJ+RzWHel4vy2GD\nKnzcaJi0UupAFPmUWX+5z/vTxwJh/qN08AkfHjwkCBcsQ84l1bJQk1N6gHZK\n2PWlXuj+/BERpoWGtjwVTyBIx0wpTMAwzy8o3Ee/N3k6q24reGo1M5x0Kz9O\nXa0d4IKlmZvAr6IcYmXg0Xs2emEEe7JNaM9aRXDQ+0Jv1wVnWBsWbb/twWwa\nNHn/dx86/zi67jf6zvBJ4atbIQMMMKI7JFOFWZp5QjvL20LF/RY5jhQPqonk\nGMn6K3L92vqBoLHfkJK3/17/8uEcy1fZ8qMZFJ/BFEyLe7mLdsEMfXSBZ8w1\nV1HGQxWU4Ato3aAR7QpSK5YDulDRskR3zI0+lmUS+BkLoLz+Dfi92UECCH3L\nW145P1+NwJsxpdGGzeWR04UwduBIu/NSjWnzOMzNAMNhoen2QWCEZ/FO5W2P\nF6Ua\r\n=52z1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf2feSZt/6e3KRtLoA1cUl2cEo/TT441KfB8ThNzQCxwIhAKza1spY/KBkat/X0VYSr6qNIsMcLEDeM6qK20DhyFh4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.ddaa5d8e.0_1629831025094_0.604384486638287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.756208fb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-icon-button":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kBPId6ZlejMaSjBxs0AUfpv4ubCDHUUIY5bHWbHv9zZoIR0968Uh0XS18v19NlPEnBai0PJq+7C6W1LrZStWvQ==","shasum":"8acea1a16fa7e2d300a7c8a3a180a096df90ca62","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.756208fb.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp82CRA9TVsSAnZWagAAVwgP/1aBDWcX3OlmZJFaAa80\nhZ4mNCRQeRfFdZz+z7lacmfyl/s0OOjjgYDXMFbhnoBEPFDaXOidC3bnTVOa\n0BKuaigwh/r/tZpIoA4u+jJXlwj6aMlCqIdbm1MKHo1dHAR01yFAukMlHkhH\nfefMnzR0xRzLSmMk6hVoEkLbFNoPDh35Swk9xrlhDHv/Z4BF+CIf6WbRSGH2\ncc8PpWUbKeLQv/fmuPgMPx6Q60OBngDOwZCbLB3o/QNwojOczDuoODN4/Idb\nXVIveeKajD3Va9q0VrbUh7XKhckPBkUMy3kPejv7j8jtFliA0RsWMxO913aK\nFN9XGGtPerqOQd89dWQlJUo92h/jlavEbHzM/E1hRK9eRCu8hqQPgix4f5TF\nAirDzqd4kKGzZOc1NyJdIPy7fazOckZdtzUCvew+mnVdlMNT/I2C0lPx6tIY\nnIsep2xyOrlzhKM81Dg5AzLvo43OnO6mQrlSzPoH/wCwrXDaTl+oy73uH7Gu\n0DQgOcbDt0Xgly7pmhtefWXNuhCluvTWpJzlSY+JLHaeuVmu9wb/gKWF5CSp\nUF2wmTE+VXaIcdN0vwiH8ui5oFs0qNX1mpTEYMe70yDIGYr3JG9SfDdXcF+P\nsjFA9V7raHsO5qco7M2hlav6eqp4GCGVN0ipSwXEMK8r0v7mHUG3iAsn+adl\nAo76\r\n=x5gs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtxUaOepv2Xdu7/D0UAYPovesu9eT6YfP8wPfzi+NjwAiBfudGo60gScn/M627eOQIxw2yBA7Nk+RdFyk2rmPZ3yA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.756208fb.0_1629921078677_0.15035766258286754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.9576dcd9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-icon-button":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GoQ+GAVCH9AaMpii2CO7azxITorXJPVJSvq8OKutDGgPJvLLUMV63EMboc2RyMCDpnxsiS6MKPrT1I6fIkTh8A==","shasum":"0d4edd956fbcf5b1731591bfc23a86be317f6d5d","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.9576dcd9.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrnACRA9TVsSAnZWagAAnyIP/AnRrDhvj24E4HBgOlgf\ngbRf7KVQ1kv45IZHgIiid/KyR4/F6BE9qfEt6JwW8odIq7Ne/sEGbYFSZs2q\nJnqcKMmtq1QB0OcAW5oqLINovc0Q7ywWE/Omr2VBO0r5OTk8j1LNoU9lN7yy\nh3gooa+tT6S9T7g7s83No0B2YgJibm6GVUcmeE3ZRPP37EsPf66z6DpEXMa2\nGL2sypg27yPHWBEzIlWxry9guVuN+Lfy3YYmqXo+TIpvja5F/tJLzKDLJgie\nBTqh0joM8/czpKmKe08qwwJPZDEjnLmlkAc9ufcXCjemmn+DuAxG3FqZKndr\nOrc7CKveaZba/Y+yPDnlbf+wxFsSwuEKITLf0Th8JYhifhovemT4sHidSlVD\n8cSdSlf7BY7ZyBWHaKXWzYRMPOZufYTngkajC+T/N2aLiWpCHtYBKbPjgCo3\n7uAKqyAgjFT0j9FL3b+/g7ub01WRsJUNI2KG8B6z1TlSOl2LeADatGTgD1lp\nNY9qMgJWDX6YhZkwkCPhMOPoJBLGtFpMRdSJyq95OfEGjB6LAxmH1eEDar0h\nIqlJ6YT90Gc50nKzvLBwKSxy+Ou5uR0khEnYX7KAJj6K8JkDUd4vnZa6JQgB\ndpmKWLu2DjM7lsAazI+mhwSs7VpTc0/3Bm8kl3v+7zrBLWSeEbaD5CbYyfoX\ntcWS\r\n=skA5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRGSPho6HfqrDH8XDvja4TS7BDotoafTgU0CyLwJBBYAIgIwrPPZu3VhDhinmNfrCxvmk0P5kDEKwUjUnjOJI68SA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.9576dcd9.0_1629927872432_0.06982801367952085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.7531cf97.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-icon-button":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-umsCdONApwr9L8vhN9L2zxVZfdOCPu0mdyaez9u/2/HTDEI/NzW5uHghLwgbYEDITu7xZYgpiqyj6bASQj4v/Q==","shasum":"e0cfd87ca59dd8a8ea07a60cb8342ac09d7d751e","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.7531cf97.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87YCRA9TVsSAnZWagAAiVsP/01ZnH+PLa5kgtY+Lw05\nCZkIdYfmsYMwnLNg3SiFeP09rveV2sYGYHH8vgmSJYeEqVeA5N4DCd10uNzM\ndVVuE0HcNFzl8YQAEQuv2G0HA928+XQS3mVdNs45ma/tsNAc+8L/8thTdqqS\nkPr6A2EvwMWLX+K1IGYGTTeHs39u7OL/EfcZZ2tdvXRaneZKVGddF4mCoyqI\nh4ihqDsCuDq5zGqqvUGvPJbleYXIQWDo79/vYZ5A/C+V5vwjK5NzzdRCgwXl\n5yd74cRgWS323Tzo7QkpKRm2Iz2HORW+KFGS1sHG5WaoyCCx/9PK9s7u2Jx9\nld244N0ck9n5p88piFxy03FIrn0CD3vCRhBM8dDcmKCPbtB3xqSlaGWh1RIA\n67LKBKo403sSrXtpDg3zk4O+fJv/TjTGNXaPeLsCHG/Yx+zc3nmrZVOyfia+\nlp8XaW6h7BASwHoc6/yWmWAfYaLM0XAcvhn2Ds7DSZE7POsnFYsElYrBWp4g\nBabh4xHDIa+My60hTZdab09yMkLZW+jtze3IKqxHT9UpcJelEaDVl2/IaNte\nbCgaczqhyxyoX0fqw5qHXs72/wovEKUUPj4u8zzM5YmB2XX6dDjzxeWz/Ae3\nZSlE92Wyd+bEAxm/iekIfjJPmFuvDNC2ioTzTW7ikajr98tYaqjDp9NgoInJ\n/lFE\r\n=zxz5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5VXOvAkroQE1M+0ibnqltptI4V2kNH+ZT4mBkkqwt3QIhAKFnliGOuUcgDq5JUqZYk6zd8UDs/D1NeP6QsOMZjB2F"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.7531cf97.0_1629998808450_0.1646543085297416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.3bab26b4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-icon-button":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W0hLtdlyNKug8py5Ecfebmr6YY8brrndZX1qWkpcNDLgALMaek2g+br/6lX8X2eeq3Dku/XujB2fARjc5om8yQ==","shasum":"df1670a817692f43564df19a695d8155f9f8b8d3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.3bab26b4.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAt3CRA9TVsSAnZWagAAcDAP/A5V7mUfVHK7u7LtEgRy\nSYA7+ErVrR7tPM0WXFkfDLcOX+fNbC2nld0I0LDKUHKqihZOlwScqfo3lOUh\n4EejJJJVXodPGh2B6GlCvv5tKhfghyFDB4nYM2dIXrbw37LE+kmgD4wASEmr\n93kyNVC94vd2RZC1LduTa2sDXjVYe9aSLChwBtSj1u9u5/Xgak9mi0xR8wmi\nKlUi4rZn2zZ23dYZNQZEYgT2eUVaSnennqlhDfhV3MrkkavNc42e0i7z8i84\neGj/wOAQdRWL6cx8D/zvrVul9za0nRsAhiGA6buPqE/xps1RLW6cxPj1vqq9\n1G4JTea0as8tkugBVyILNCcwqFouLPLTEk0MxRSHzuN3ZSvkQOGKdRDvzF65\nn6eioegaogNUdpdemwWkUsxqFc0qnPrm18x8fVCZz6JUAKsK0O+v65u7GoBm\n50ORfhza2tG0/A/n2pxj+7PaC4z+wbfZXal2d07QLCIbqsxq/z6OdBboftyi\n0EmdH0uWGGWll6UWG3U5Vy9V4BdSs72rHtkgwU9BWjDnTmF/m/N9w3KhtcKI\nIM/9ehhY85akxi82q7AykXpSyuJBIPQTRtBfoMmvugSEauCVYfcsfiUs8Dbs\n1ItQ/QJciv1ULEuwrgCquotwqrW1My7A6v8Xds9YMvMSlTWIShGZnWbzFayz\nm6Vm\r\n=oamV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+x1YmMhZ1uSFYR2crk6Y/XWE1jAd2BWqNRFbWCJLMGAiBnvYwinCbHf9COua7l9zRmRNlxwMw/kegZY/hoe9ER8g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.3bab26b4.0_1630014327089_0.6651048026268662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.fab48bee.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-icon-button":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0AMiA3tyKKCNsqR7NBZ6bw70FrI4UQyTldfwdEg4EkuxILUMk83Y6JLvI3qvcEPE+IzPTXLvkV7MeYdOqPVXdQ==","shasum":"7ad07f89424efeb117beab0e8535401478be2778","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.fab48bee.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDWCRA9TVsSAnZWagAAHQsQAJp0Vc29K0m48CIypS9U\nxp59IQSO8DAM67+51j+PGjIDitdAKcN/IoSmTgiFMeNbYgb+oaQl1cT5Q+l7\nm6zIXPJLC+CsP4OsKM103YfcOJIJ8lG/5op89xrbvD/TqmX6wMqqBVYNuBll\nQ3hRFNr5RhbBbpOpd7Po82exZgeHTKX1u2LSrrn70BLmtllCwZ12geRcKhC5\n9kWjtW1gKgDL4bHEL00jWGVqTp84TMDNl7LaB+dMvxcbmbITnOUS7SRf6Iqc\nme/eWK9bbCfcmXSSjr9IwlsSJqJtCguNP8zD6cs3quya6Hd8Qt0UW1r4vhz9\nqFXjkMqBKtkYDw+g6YGBUytdSbqT6UAvrrC1a2OKxOM+FITZSIwZ76CLMYdx\nlgixS0rM/90eDzDiPGa2WO/3TKZVaxOGzIK9dt6+kzudGne4+nyPdwM1JDRV\nKfja+Bu71akT6+itaOm+U4RC0XOXSv+ZpkkjANL7kQ1RC3Sjt/pHbYDG7n42\nqZsTGrI8Jscf/pA/VRIFUbzJ7U61lqMitbkF4E1TN4BtYVWaBSs5/tYL3Yp9\nKta0rNF7o8F0M6Vi05afo4uq8dVaQTAt11VX8ThcTPYRcf6fxZL+Qi8NnQX2\nflL6rjBIrX2zrPwAfrGvpOc7sO7xe9w4/aIjmhpZ6nhEiTpSXIMuqlPcl8rO\nbAE8\r\n=WPf2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeD3alfHWZuaCCqc6NfvZMMdM08EVmhBFnbiPkdHfFvAIhAK6lKDTcVJ/AEHJ/MAMRL5DmfEyjPa78lRNZw8M/Fha9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.fab48bee.0_1630015702696_0.28716355367811586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.dec18df7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-icon-button":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ngLWrZGiv1bgFpsDBlOWNR38KfVDNJtD8a+TlHI5nglItJ7I3JJcSL7kGBXTIKW2Qfo8C6urSuqdRJrImWu36Q==","shasum":"a05effe54744185e0d04872c2f89c9bfe594e733","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.dec18df7.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbxCRA9TVsSAnZWagAAlWsP/AjPxfbIe4MxzoFbJ71E\nvSaX/aTNgOJp5AiqjQo/Pd/jlOZ98jBcFH5uXIG9e6Uzd7tdE7+NffL5RPCe\nv2qjs94lhMM+xcmJU3s0H8ttlD+EuXgKie6OkyW4aHvpKZ4bTLqE22Z0ivC7\nFD7cltBqIB4k2I3M5o19HPRSsKEFRlimxi5TeXnQdWyRRb0WqUbnKg5Td5Du\nSRaMvuYibt8Su4qs/w9wGumokUv9Y8FQ/g3U+gcEqYhUDmYfRxRmdyAmlNj1\nb+26n3Ke1Zv5zyU3FHOWuMtH4XUKLSI8gAROIc2Iy43+ZIZOrsYR+Shqlq1G\n7Q+GUsje2p+oRA+hK1Bt1pR+8MaiFiAB35lBp29gyjwfDKbJy9xgh5FRNf9X\niHfgWqK+8FAG1XcbGXxBQB1l/zMv26JCEa0SVcDEKk4J/Ka2QB6tjblpYUfH\ndjD15QCKGEFwEP/noBANuoRtI9aAI4Ocl40ocMPb3ouGc1RNvLvPUWFYMfpG\nOWz8OqyQgnUiXOLmRUV124Z+/SFDxd+mzSCKu1qm89MLfc8RwyttpdqM3+6S\nM6ri9g1Swn6JKNDh8dZKNspovHb7/2pQniLUBDXmK76gDQUt8xPMdltB77OA\nOBe5ibTgfqTsOb8ygajVm6TZacCEhEPpfOX0ruxkOTtEmNIBjkcNi0R0+QA6\nJ1eD\r\n=fs8K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAMSRYgFTadeaqv44fahSjUwGE42hOyBmiIhLuz3cXqZAiEApt946dSguFf9SIxc1CcQmU3rCQqYrWyEcL8B/v6lzSE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.dec18df7.0_1630312177466_0.605651821336284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.61fe5b17.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-icon-button":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AtxoJTapoa49OGfwQ1AOnXymu4iVQMvrK8V0r/BDFB561MxkjNQSm4cUyi/WJOtKC+0bAVLFWcVhiY24U6dQTg==","shasum":"2451089fcf5826ffb3f3695761e0ddb2fc5584c4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.61fe5b17.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGRCRA9TVsSAnZWagAAm+cQAI+c3Q/b2HBB6alHSjir\nx9ovmuEBXuyEwOEGVXFyT03koyAqNcIutrjztQBWNOFpbRXWcxZbLK5vpo4I\ngVAeOkIvwAQpgEgEoC4DkFr4dkydVuhvxXyWaVn07huqG2c12BZlZcim/F80\nlBd8ITOYn3jW0UalWI7IwZjHkz3pGqbi5fhdOMAWsuSr3QY8Gev1mz40SFFf\nk2/NkmhRA2XxtdvuO2SqHC064X8EcXkw6YvzufTYTr1TlMOr7GIWJ9wYXSeZ\nwl0U5AsbAPiFiofIR4WKe26aT+DrkYUC8QDib2hEhKRPYP5Q0mRvn//jFvOp\nsU7oxdBCrtF29cQpSG2BmCrx5fLe5JGuELGKmkklRHEOm5UJ4D3gJ5ShzzJY\nLpxEWE1LbhyvIak7OPZXmiaR/QHh9CGwMRCCPKxNxRpGvCjNndY912bLSXV0\n/g3X7NaBe13LlN5mRI34X59sikJLRe2SoT6ktXO+i0QhmmdF8Q7tFHQsz4Jb\ntpZuKoNNfHst83ce1QgXGHnYdOaFsuB2l+niBAh/bmO9U22y/Cjd3R/HIznl\n2qrnyUXvtwdCc1XWJ7S/p5QmDVOitJ9EJKVBpdyT+7Z5TDvHu26fkKVA11T4\nHEvprenftFMew0Rh8+nfLhOG92hNNxICayYtoXYehamex+W3vKyA/z0G1sBX\nk/Ln\r\n=eOSV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEl5cUj7e+uhIUf6FxEoGkNG0vlcqgfsqtxzsVt1tIyRAiEAvwoztykw4I2s/oW2PPLUOpfmAy4aMm/Auh2twY+jbj8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.61fe5b17.0_1630351761225_0.6018733615820697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.a8c31f54.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-icon-button":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P6fLdNXkMIltPzWxCZIbt0xymQ7x2TdP5CRPRRlcZKuPkZKAmQ9xqI5J94rFj0e/RNtpypo+FwUJtZFOXbXudw==","shasum":"16b8f02d61666a681b90209b54f9b5b935f541f5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.a8c31f54.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUBJCRA9TVsSAnZWagAA6l4P/3km3oINMs/DYWJJO3rY\ncK/QNsrltpubBthfQUHtvVtrhkhiiEjDhWvRkajm7ZUWYx7WXujKBzlaJIry\nZXic6DG0D962CC8/Jf30pegQGG3af06w2MsWIHNRwbKH6BqSkmAQ7BAtNLuV\n6nR/M9xnHXqfRgfNsIQGfERjhfuRmjWV94nXpd03qKThV2pWXMdMO9j5VKKW\nkXaJ8vJySQTt4ANBe5jmG+SWIG2u36cRU5t0dkkF4PrXi4BMGZSD+qGrYlFe\nQFmgIE/jVNWbJxZObm3yfnGp5T6+ENwCPMsoOHKsYQP8l6oaZBvrWfeTvHRc\n18S0lcd0j8NJlPOrlAPUjpLnYtyEWxNKci2g1ksP14trtURgx/KZ9W+oGwlK\nIvHe/AW4CJ1t2VyEwfkg//md91FLEnQhGnxyZFmxv95CHhlfdQmRcAAwU19z\n6qgwfUQz6J06ag5h18apHu4sgd+isCAtm1mCCsfcr0g2Auwryh31eKARTNzU\nydzPJ4UcoOopd1YslVwFz/1vR+2LWQ7XArv8smUWorMYP7EwYLbsVIuixloA\niHaMPwDoS2by6Aeg6ZckAXZRJ870gqdOeEFC4IK8hRIN7B+mP/vjDUu4Pt+/\nQpd/h5vbqQhdfNZ/UHDpeqsnHFdiAwVKBIrdq6PYx9bEz7TId9CoTb9tPGpI\nI4r+\r\n=ffvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpuTUCHYkp/IVVB6HvXsDWmBPOCjDRFjLnKL6gdchJvAiEAq+B4GC29KCEt5VBPlhQM0kF/NPwhY+kdihyC08JsIak="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.a8c31f54.0_1630355529393_0.5124692440102732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.a096dba8.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-icon-button":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ItG66qD9NSyHlBUW8JIVHsTeKk5INN4Qrta8p8xCfmHyitg2R5KCuIBNxJo0TnhIYXxsKQ6DU42aFA9SEjr+Ww==","shasum":"e3829c137b4753b3fa67b100abc2b4d72fc7e65a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.a096dba8.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqr2CRA9TVsSAnZWagAAQYQQAIpXZEOatboO4LPUL4Me\n4ZWVllJUpCPHnbAOI46toZoXcA1ZHdmM7S7bMPKy9u+/XnsY4EstrNbw+KUR\n0iU0wzkhQKeCdw0Kv1BuXFsHyeo/lxeLWBtEFE4C+fRJps2mp0jsOoTCyYGA\nnoGGg+4tfFn1uRHe/Z1bpWXfzemtMKOn7A/qy6NC+O4m+9tuhfDduQP38ocS\n04qKZqGFjefD0JKeOspUujGgt8fXDeaRbS1wWQDyvX2QLqYJtgq44V4iingj\nVsk9oKRwEpPboO8bOCZmxSKyXi0kq7gufBYIOGHJNVnsgL+SG8Fv96iXcAk3\nnnLGdwUaXUb+ihRLMM0ywYN+SbFAY8GbyhJMEdlCet6Q/YXAtzUvx3lQmKO+\nKVI8iYrQSYMvaY3qmNcZ4mTrH+WhP6CJs6b0KUp5xrNkwWgwrXgGVVwsefoq\na7+DrwduEqzeOi/Lx2D+61A7VaicFR4YbU7qfXZn7yHWr8mTV66xhuJ6c8N0\nQ9HkBJgbRmX+nzw+YW7J4FZuzZIez6CvYu7AezGGxTCfJB6VBHlx0pe/Szvz\n48I0kKs3TBNsEK3lecdB/MmeN2iq02+RicrJyRSSRewcRvacV/Y0hT1KlyX9\ntsbqKD2h0Rqvs4hupFO9tL/zT0SYiNTe81QGLGW0CA2NpYxjwvSw0WnwXVen\nYLDX\r\n=oDhz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0+F3ArMUQRFm5priPXSphm1rz/Ag0IUe0NPKgz1hBZAiB3hP6tH7pFbFP/B+OwZxLNQpCFoWoepCQd6jR4Xdlb4g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.a096dba8.0_1630448374186_0.8118077944013231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.7ec04d47.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-icon-button":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9b2eGARgMl6XvHTCwVgJnbEd+y1aa2zeRfFEspiE/Gb4CZslIoXWOH3VmHub+5e07QjSjQ09N9x8f7ZZBh5yMQ==","shasum":"5df9028b7816950c2607e84ac230c51b2d5e1f6f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.7ec04d47.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV2LCRA9TVsSAnZWagAArMsP/R/dnOpYJeNlIWFF7z59\ntXpZRBb+DSseYRkXrUD0DiAPszX9/OEekdpYxRoWBQz9drkwKqVrH9w08rAD\nthp67d0glfFNM0h2kjvjBCpeOjzL3aVCUrvT2BO7Ji7LP9UHQ2JpguE/X0Th\n9yCrNjmGPHY+rv381VNIgJFiNlxEGxNWpxEojQsw4S01P6mOM/yDNHwvijpA\nNT88SyrO3gkVGnkaw42ldcMxeeMOfN/AUGr+4+iZRXi6TfRrrzim82yyeMXY\nirKwSXK5ETYrLuGShChBXlo1OgBoNCCFZWRf9tVCpmfcAH0zKXwvkcql7pzb\nu7g5TM35rY4sE5Ilk2YTRV2xBfjyUbo/8w/bvExxp9/k2Q8UW/MgCDMNIOgI\ndHerTgPXxnbG6xx7D7rVk0MANePnkMbesBpaeehtDTpvr/pOGUmrxJr8qkBk\n2NNUFATsKywjXl/ZB7HjyxDZw8IbkdH6QxBiBjadUXwdWJ9kkvGNi1RQosOx\nXXzPP16U+mK7WrnivSUiKu7pQ3OPj1MzLdJKE5GQ7WiXPzH1Sl9do5VNm6MC\nog1PFnmuFCFNsR+DIZUbrPM6SsQ5aIJIJ5ZE0Hcc29auTdiXcA6PCASrLV5l\nlghYPQDwEFvrXvM90v7a3mhE9/JnYrLMfFW8Ixt0zzr1GZzaqYBJ2JRzKq3O\nYJqg\r\n=ReYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5AE8DcaQCuOBe4j5AeLgM+swXoxBNK6smFv2ZNjq9+AiAy5+YbKsO1k1n8lA+toljpPDi3HXmSRI03mPNVdkMTgA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.7ec04d47.0_1630625162835_0.17123878532538717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.d00b098d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-icon-button":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s7SphwowuecrjIsARBJdUBjzOVoTnS+f/nqctPSvHI6SEKRROcleUkLIcmQ57heYwMRc9iKD0x9BKOCvgvFeIw==","shasum":"eb8628281aafbc0efce83d239a8b455ec6fcd331","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.d00b098d.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpM0CRA9TVsSAnZWagAAm+wP/3AkxLAW49c3f9eZcWNZ\nO/SFEY6xLe5yT3mq0UpuK9/SF0j2khrDBdtbF8eT12aj2szUc+znsXLcEt3S\nuUEF8QxtxNhEEOS6CmV2/YfmIWosaZJITOHsbVr8VJMBv+si8+aJu+yMjypy\nR03U1Ds/1KaYQ3PAl6diu+QHpnzAe8n3cvD4aobkKxshGf8KXrNcWt7idSOB\nE+zj/HGlU6sXt1YvLwL3J7KN44leHdeEajxEz1p9/zRGYEqLl7wIiw7FGqlz\nqLLGe+aIKGTvcMWlLtncc4OW33VMDqjudnTgNlR2zaylC8f4Xcwba4VYAoI4\nZBOiFEGMw8w8rtRULsRiGNxsuGusU63JyJLkp1arpvQw1sJmitY8668NvnWe\nuFGm53DkQ+vPDsNYVfrFrHgcl1yECXy2Dzsu4KBChu4Wc8QIOd6cwbWOoEtr\nmpLAFbubIj8mgwUA+hruyg1Db+2bmMhR604gsF+U98au2WyzXIm+tVCFGDBX\nBUDYnjYchwjvcmJMgAN9IeQW6tWzRqyUgMUuxO7koUO0Y3gLpwcTvHAsepiK\nXSBwsPa57F6TxfFIs1i2lp5H/+GOnx7NG0nD+JnQyk83YphNR/e2BCyDrKKt\n2WZnphugQwztRRqVFrlFV+G8KC+Q1nUtPkl25vEtQQ7NaaQajmrGEYyWlcTF\nV/Eo\r\n=0Ug3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJ3zTCMIzdoFS6E/4EsH2GN6j2DKWE/9oP9LchPR28VAiEA3XkqNWGudAQk3S6zNw4Ws0olwVjjye4cdZVcLsao5bQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.d00b098d.0_1630704436065_0.8363167841793402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.f29b3352.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-icon-button":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ERAu5qUuWxl7jirJHUc7Vt0RXxvnZnKTwbzdAv32M0pw3+yHJO5UDOTPAWvR1Ml0gI0HcxdnfR5SB21oaaDoqA==","shasum":"7063cef4cba47315a99c2da0ecadae9c7aaba194","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.f29b3352.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yOCRA9TVsSAnZWagAA/+8P/06P3f4B6NOSyLN4WvGF\nWlH5d30A3Jx42tfY2sGGRV/Uqr44c86sOqvOedgbH+Fj8wuF2A8mZBT2hxZy\nhoYVb38rhwSQvtmUJzNwPxWGnhRUwLBFwLoDkzn5wiAiNEnEyR4HrKQ0rQBO\n6MxAnZxFudf2/gDGL1/eQYNFuYurSeqLjInFViZnpKSB35BD225Oo+kKzc+f\ntBrNkxIX6j6hwAS6RdsZx89Iwf+kFBk8enwlgw/Aw4gsqaNBvYATBMl6A2Jq\nK44Hia6iR65AxZoLjPNXy0wh5fvnk7cfMwhBdKDlz6yFsjsVriU6feOvcI03\nEvvMs+rQ9lmf1UOsZwT7nuVNe3ule1Dt/UzsF14dJZZEjNJqXK7doznB2ycY\nXNb889alPgh/rvAR6EHR6FuGn3+MFcc7kPUuA6lDzR2P8XntOE2K9JWzAwsr\n/GS9UPlwjy0brt8LFjFVwiQaDvsrTCKcIm1MEeFEIBFowU2I2W11OJ4nUzOV\nhdUC4YuIzLV65Orzy9augJNYdjAX7BVtYf0YHvT0JtvTWlJCGWMOEid4O+Eh\nqk3f3WxB5t8/U5z7fijFN5HFyFAi+OvCcW8EzZAOb8yi39pbLJJJ8H1S03N9\nZbAeIbZf6iz23fBEMtzQVRRjfHg6Ihg2zmoMmJ/ZlhrHuMBqNxIFfSZUg+6W\nT43C\r\n=0N3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGroAr/VCHRGAOEI5NYQKHoZKgqTzdUt9mpnyMqKVmc0AiEAyf1LnqsDqHX8IebgGtVskqUR6z9u3p62Q7UKNXivWtA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.f29b3352.0_1631038606233_0.1214499218355467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.4962a163.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-icon-button":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZgR0TBDmUKmih2JBT7b71e+HT5QzCaYbhpXrjqW+RjWLOED3yd4DbzroeXxvoZ87lWayboP7YUccCWlO23Cvbg==","shasum":"1641889afb512bdbe6d7fc9cd82d480bf4e165a0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.4962a163.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uYCRA9TVsSAnZWagAAZmUP/R6Yf6IWXtXYrTxqunOq\nrk1tMWBqoOs3ki0cJ1l6y6vWzcVeoTL4FQYjgfC7dhghOhmTOhcojTai6fnP\nL+LkfKuIABDn4LFN4bDMX36sd42jPo8uC0bgyAerxZZSq6l7uNjj3EzTLohf\n6MLK1gS1haTJbfUCVJQ2fTCxzxQE9Pyo9XAgGotH2FkCgHa+pmeaAYOMeOic\nlpp6/zD0dA7qWh8NO8gvvOVoa0v4BRUtIxxfFJqybYQhJldPpQgLTNeUrBMl\n87cAxhtlLRxkJ6q+JgubfR3MQL0Yc44rdvct8EI7DskoB1flfxZk1SIHBJ6p\nyzSU7hL3Lco5rvcSJD6ZRZvl3He6PRjAKjKW4WPBVHCs/62sEyBSQ7C3y8IW\n95xr7xPYhMoA/+oJMJp6nnp4Fa2dRO0Ri68cM+pbHssDwc6ORbCmf2mrQA23\nBzTTpsCDhb4Yy6oMDhUWe8/YMUkQYWA06aX4z6ADtZMfa4qsYj4eSuy+X+um\n9vF08Gyu6e0YspFCDrwbLxt0RSXm6dzOYtabwDDBNeZgwRB2GY+U0h0m6qzD\ntLqVEU1pZgfmJ4fxQwgDloOvcKT4eW83Y84dICgdaIYUGVVQ3kZwy0LBM+Cd\nKIHCAkuR50Tbv5rt4DnjOvQXm9tfzkRGdt0ke/YpwYt3cFzMQ1xPoNzSf2xt\ncK7Y\r\n=dnak\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBa1NxjoLjNDPVBbZzm32WDq0Ey0sgG5/xXPEEEDf2evAiBdRspXFWzossvPk6YeMVLXZ7by3Za6bKeu8PTvBQcfOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.4962a163.0_1631058839928_0.6288626954748027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.33102bf4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-icon-button":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WwP6kyzgXFytsgd/pXv3c1D1GJigwaz/DGGHLCsA35Jngxr25ncdSRn5hewKOqGwvFyj22ftK3JRg2PWx/qbwg==","shasum":"5fd0c0cf0dc2adf0b18d01131475349954a6e4e5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.33102bf4.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABSCRA9TVsSAnZWagAAx0oP/jh0qVViCNTTjDR+cJ5j\ngGbq9e8XFQ17qa+w1AsCK+I7i2Zh6j3p3/uX3r78ltxComjGLTem1Gi7KfvK\nTRqQkKWD4EX1C5ev32W1PuZV2UbF6qIkewGSHMoVjJqJdIRxf2Lm1UWk59GJ\nypChM1WyoJaPxc8ItxoxgWgDElpV1oDnRo2Pwij3kh1UfKt/UF6jU/VGlhRF\nXniIC67dJ6lL94ej9X9YhVAyBitNDcpW3GUZQOLAIZhccOYta/2MD/0ub7/F\nFTr2rbZp3dE4oZTF7j4tv9y+GeTlw9XwmSWAGHMPzzmC07QVOWE1eWh6c+qP\nYmZolkcK5w4av+BfEaPA3AViH4iC4WftC9lDZXUygHfcCb5oOGVe7ykx/cmA\nhXr9b0unZbXRgvY83rT7YojbEJdp4IK4F3QIDVe8meVuJrnmh1QF08Rh+dxb\n2U71SSBzVm8/8i3kqhaRuLdWOLAbGAYqTUjyyBccGnvLCOqf8vu1aH3brGzL\nSzLa/ti4TqeiqyBrqg5TX+o3m6mJv5RLBYHobGIJV431ZTioGK0bgoQm4lnq\nyHjpg5mMf2R0+J8ghmnzEvrVLSLmdVZ2zr7rcbfx9GK8NrQt/yXmPGxR7vbD\nDIe3QgzioN4qJPPK19v8z4lG2kpQQhibCGBa9hQFjtJD2ksTkGzIXufaF24o\n47w7\r\n=JhY9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTdEa2tetkKgAKTHkhBCD16cirR0nBLPZlCOLS36aktwIgYmJb6OkKelqGvlcLxj1yQthdioD0EM6B2finRpgT5Vc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.33102bf4.0_1631060050540_0.8879165935976809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.76c68381.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-icon-button":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9FZCAuRVzRzNem/809XML9g+4TFCFHED8Qp+LTT7X+9uH/hwB9CpFnembmOceA7Jls5gFHe35gkKEUtt4dLhzg==","shasum":"4549db8d3581d5fa76ebc06ce175f33c7204e2b5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.76c68381.0.tgz","fileCount":9,"unpackedSize":38835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmcCRA9TVsSAnZWagAAVUQP/2S7yjXcyRsdVxunc8/O\nG2rTUHwZXlMMxsPMcRthEhrkMp9I2A8FquksgYZOqiJiK7DaGkqJZ5bNl+0E\nElaXn8YXWjWrD1nLAWxdIvvHRPyAYMzMVbgaHm9zcxGmFakBGdzPJc3KDfiS\neivGrszzhxmkUSxqZLipdGSyvx8BF5bnDxCaVRhWepz6Abq9trVLt1cBHICX\n0KPu1gKlSrzV3BwtS6S/DGqvrN/hqu4O/Yqsd9xN1uRJnMzmB1tM4p7gKA7B\n4Y8iruv3Raae5/FrdEHPNFXV4fILE4XPk5T6+Um2PviAo7tzAsL3X0TslHmm\nE7UVyvNQo07wOiQ1mo5eV4btRcfyJlwW8ffm706nIIRL//DrT5ogsPTFU/++\nQ1zu6oN4Gu8t6OAxjaOvG32rIoR+RriiaKOzxyTyZJbSA/wdT443mrJ9noKe\nUTpztM65Rw5BhqDatkOe3QsCbtLZwXJqSfgZKSQLL1qfCWYKX2VejpQDfC80\nk3iZwz8NMD7/c3liTRKPt1DnmL2NOkcufYvGDyaOv/9FCl0q06SUM/E1iAYH\na/lgAXZ+7a3W4S7dLckypuQ7FbO7ZU3bSW6GHyBBSvtFPVa2w1xWiybsvlhJ\n2+RoXzklwHFRmte4LGlEKghybmsqpN/ti3AUbYxtf6qvxKdO+ZBnPk45+gFL\n81IM\r\n=04RF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBTK0nKfx+4yIavG8oFqjzV2t24yiY9Ajye1izvVQSIAIhAPHT+QvxEMu+Fjo9CD8H7EGa+VI7ROMhSvaMEgoL62ZQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.76c68381.0_1631132059857_0.7706101188030503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.17d51f76.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-icon-button":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GKXZaBaVfHCD0g4hRAncOuuDLlPZ79LBM1swN6+t484qy/LnI1QZH9bY2XudOZ10fLIbHD4OcyGMuKqliwV7xg==","shasum":"9e88107fb989120feb8cf197ffb5c40df2f4f871","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.17d51f76.0.tgz","fileCount":9,"unpackedSize":38832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUa/CRA9TVsSAnZWagAAPtMP+gO0Ls+Adx3gVLfqhyxi\ndEY6XUchCqigDA2a/9RQJb/KzXNH+dw3s/PPIhlBacFMz63BahlBpFR++esu\neNhHHTfWbfzMFLOGenbDiivtUhCip/ptNYkij+HPjfbXtwhFUdR4hlyBs3UU\nmOMJLG5qTdBvecvgUA4l5FD11prXnyv7s/94MpqlCMZJcJnLXhjq/PkfaYpG\noApsFZ4PCnMy0Yur985bitUjx19bDk8Hf7EqGXfwniRO9lTEZ6Ye9LJi0d9D\nEJhpFxhLkxdgigJl+tx/ZNA/i/TfP+WhPlkVizw5iXP/bml8/3ohYfx4zec3\nm+toMs9SpBSRWxfxzwxDoVRcqVnDFSYm0FwTGNaZ5/ikvFbbRbHh3KL5BfPb\nlNEJiAjP3c0LDGN+RyAZsWwfAraoFqca4Lrv3Q8n8IWwiNcJ10xT9Y2PP8YE\nWHDutFwCZMbeMspE8OTqujv9WT/9IKXM7aHUGAjBJRMakxwDnuEwvjnMQzNb\nXSh9QBQQpRLLkqLZJXSLUaIwd4X/e2VvL0er5d96m6fhXBJv/1/+EFGaWtrc\nsPy+5n14XYuK1HKOfylhVzlRf5prGmatU+FTv6XCJlX+uedgNFGBkVnpxtRx\nsszy+qUAGF7eEg+G2mYC+I70aETDQ0bKShNMlmWwbLm4pmvEWyWlGDi9hg2F\nrejp\r\n=+6bS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1LcRj6APOnXOEgfyMnwXVEElnJNHspYL8N9Jr4nPnBgIgRX4m3OsUB2TmS8JTzqw2SwfVX3KfSzz/sjlNjpNJD+Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.17d51f76.0_1631143615269_0.6566719664691334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-icon-button":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SdrSi9e0jNO815d2jGOhBCpVIjPpGB8xOLloD8Z1db4L6i8jibmao0UyrjY7BNcd/sSJYJ7CO/Q32Y7H54A0sA==","shasum":"ee7993f32bc9bd8580b112051bae80c8566f487f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.3fae6c2d.0.tgz","fileCount":9,"unpackedSize":38832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6T9CRA9TVsSAnZWagAAweQQAJkOlhThx0DR4XtHLy0m\nEqnRmzt/U1OK1nGiBVsgjCqGgTbJCkoMrkat61BTxba/GvNKYpRX/kobpmqQ\nEd9C7Fx3IxoRbeerGylr6EgpgxOx0OBVo5nFEQxPmwM0CoKE+6j7gj8c38ty\nlnLf+rnrHAFSpOC+5zke+4iUnFz67dubMrKrOfKZ5ms2mEpvjiYVrg5W+yUK\nE81hbmfSBc2H/GwyyvLVJ8bW8nL6YBKrh/zJdmUBXDwo5urbeKI0wC1YU/e0\ndCRCowMjj+gRnDx/gkpwS2w53W950b9ZXu8F8iFLmngILj6nkBOkg72OwBpR\nxHo5zkijdDPFsxU9UF4fYq43V8Ni6gwu4tVpx6LnrKbp+4gRwQViESOkqYjg\nQ29wKqwyvjijymO2t4KPFVi60KqtyzQYDIiKHD9gY9kWtq7ukPw3zkj7Oc4k\nuUbCl38T6nlTazUb4wZj3y7astpyfBV/lBNLk+XykGMmSB+Feo3pOM+6mVpf\n6GPEenOXww8m3qqbzLg+fUCXSAGSUPJ4srE9kWG+/62pnxP2wXAzp2X8p32f\nvFqPB9n2uYHQnf7542vyY/wGXpL3AgHthojAgfbSp+BjtHDxMoAY/3vtph5l\naGMCiKFOSYiD5Cx1xz+XtLejwsQgGyMDf5wZhzmvoniJ/d/OxQO9QB0s6SIU\npJVQ\r\n=jde4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuyVo8G/1/vqBzNmmJ4LOIzWFi6P7eVGM3MdBoZISHrAiBuoh5ak0tg17kVW+doq7o6eJ5wRy9DZ+mloHdqg8qqwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.3fae6c2d.0_1631298812971_0.1584334769266471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.f1958c4b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-icon-button":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vyTClIORBuPVdMsZDnKAflbEJ/NPFbkV6V05PRP6b+wI2OVAyn4sHrqRc6OkY2TdKHOAM92y0jPolvY+naOM+Q==","shasum":"82fe0d415b6991f0d6710af5fda01dbbc233f7b4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.f1958c4b.0.tgz","fileCount":9,"unpackedSize":38832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SrCRA9TVsSAnZWagAAo+YP/iqPvYMs+9FV2nICTGkO\nMzjl6EyfKVpcD4aGirDduGzOs9eDXeit+R3x6uHm9Mrm2aToVFodZx7Ubq7d\n2v9cH7NrO5tb+XxJ5aIGLwai/pi8uCWb0hO2Kavt1/e3h7F3kaZ/bTvDTlKw\nii9c7jYUGoccFOz/JulcG5y+D5dXtQ16rGi4Ww4/k2wXkHDO55L01aLrk8tj\nlvE3bokYoUJn6QGqONehuGNub+AR3BKP/0aL6xWmNGITfbFzbxiMexFpDQHb\n/DyjgmFiai1CBDjOxlWI3LzNstUrnRV2cssECK4RpQyLbjevZFVNi/ugYsuG\nDZ4K/efjPsffNPla6iqNE9IOBUDIw1TfNVSnXsxFkVomBuBXNxJR/9OAouLu\nJP44IJsIeJidqrwUOth6H3TflfskFM+BghQ0Vy5A41WCZhH/yEp4CQzpLFB3\n6YenuRRk76y5l3sHV+fWQcg3soeRYNMvJ5yp8xOb7Z1ZxrLk1csLnCP3swpf\nYBqL+HSpA4ff+uGKoCb0h89JZjvca5oczs0G09pGGAoGFEW7ZozBvhn3xwhZ\niouxNNIt+ZblJJdo5DM4ywOLlg+fjM8s9QzwWXt0PuE2uP1Qg2QBiyKG/TSw\niwAlqsCmo3iWIb9ftJVeWQAqefcNYXWrOWocvBOGjpFHt4rPfpcsAbxUm6aZ\nS8SZ\r\n=s3Xj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8E/iMsZLdDRACK3+VpgRj54ffGSChRUIZX/icDYYSMAiEA+1NfY6UgMJlfkzlZ1jCtABF/irtSTmGGK95lQiQVh6o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.f1958c4b.0_1631560875593_0.1956660439578357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0-canary.78abbd59.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-icon-button":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N5zeNwWr7XpDNSZOoEeuSGZq5M31b+RimpvLgJbvxsPDC6KIX0C9QChOvPZl8/U226EOIcFXde+CDRbI2vxp+A==","shasum":"d77328e25c41a14668fe66d22882f18ec7d09d33","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0-canary.78abbd59.0.tgz","fileCount":9,"unpackedSize":38832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IgCRA9TVsSAnZWagAA0G4QAIg20cbWjGFh7j5f8FdV\njusLjqX4mGdK5YqVVXf3F0jUC+8zMQOPKl1Yr7herSLIfQZJzb9b39JcSBHY\nQDO182cpEHGESQa5o6dyQmSSWluRgqvQVQjNk6eyJifHF6MrmKsW6zBDGuuO\nObzDBmHmyP94gJPTYYCw1W2Ebu/9qF4bpM/UDM7UwL8It3CF5yCK6wkWHx4Q\ntdDJkFjOsXy+BnLKeLyFkoN5ZkBK/31104ZJ3ARdxuUFHf59xyxKZV3dIFqa\nAZb3P2b5FwXI0fQcMYzQlpaBnOfiIn28FNwHoTC9+KJZTRlCR3IBjhILegiG\niHC64c9tFqaqGADWC6zXX61/jRxyCuz4XoGCJ4d/YasQiUVT+P+9LFf3OkIg\n9JQuf5G8Jl/F6AtSDNKLJlRF5PEV0bYXJ44HAjfwFzCsO18HHvZE3ku7P6eH\nuP1W5RfGsYyo0UsZCeAw3G+8QzgRUDjXnrw0OwXgZWXvnIFUwedvklsHHTDG\ncm89O3FDigyB5EfMS9naoBI9ap+QXyX8UJaNL1OUkHobaFHiV45U2jDvUsVC\neOcJTDOyVwIQkJBZ1p9DQCfswK5VUiTCl3ZpkVvsGkOUfpEbc4M3VQPEwQin\npYcX3SR1rIFk8LON6I5mKzAsiqnGhkjgxnXuW2H0v6Tz3jZxNRnu8iDYXTq/\nAz8P\r\n=LDRh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg1qgnptrJ2wGo4I8AFZhExgFLMEEsXPZp68ciGC51+gIhAOQWczPmw5tGdnkFY8QgskpkLS5r5o84X8mDnZpPtgm9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0-canary.78abbd59.0_1631568416607_0.2919522608110636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-icon-button-toggle","version":"0.23.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/mwc-icon-button":"^0.23.0","@material/mwc-ripple":"^0.23.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-mfIMgtj4DuGQjsuJ458rEhE4dM4zHdLTF4VwDoWnMkFIcq9XgnVC9wgTqxpLZFI1pTuN1N+cpyF2lqYaOBNxuw==","shasum":"e2bda75a860d0c26d872caf8ed77fc5bb4e21b5c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.23.0.tgz","fileCount":9,"unpackedSize":38763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q6CRA9TVsSAnZWagAARJwQAJx3EZC3IZBWMVwdTRbq\nGAFk8EXMoy6nIMjN1N3/vliZC23Q+39WBFpIw3SBukGLuvTcfuZ3Ya+dS3C4\nvX3j4lRm8LdGUsoqaBiHCqDw6ZEfps42VenBlS+9C/4ErFjwC1XUGzujBrWY\nLL4RN5hgWP97g5VlqmZPoy+prBJqBBDU7cnAYk/3aUHUNoUUyiyXJjyFJdG0\nDzM44qg6/cyvxAwFojDaTGqM6Ii0bFLulAQ9sQskD+l+dyxBiieAQ9JjDSsn\n3SpP7NmoiQs1NziMiKz6W6GKSTbMDhm+m0cMQpLNe4u8jpTSDtB2jSmov/vs\nJNJChVCfCjPAyXGl8nRL0aS9/COOykOU7ZlfHhYbdReuLybtsFlQTtG8tvNd\n6LqkC2juz690Z6QYNW66lqc7drOypKEwuG5H2qV7uc4V9q21t6t2baJ/ly64\nyiXo0esvJNnHwlvDC86Ayxy8x5uPi3T2EiGDnFJWz7WdvS9HzcasxafYud/P\nCJFcgXCmUrJK478an7U6IX3hyGZSSE7hzHtayK7GdTN5wdikquAv2zHRUDj0\ngO2vtDrnvOv6r3wbZBiqyu6qNufPGfy+NPR4hMRaH63zZtfmJxplXAV9cI8J\nU7kzfUOsTobqUMBEtivnsvNv/GiT6FNYK+bwe7IDGQYZ3LrusHkKv5byh6bE\nA9OM\r\n=f9Pg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9eFzoJcSNqQX9GP0Df+cKKcLm4Ju20xoW0q78bNm5iAiEAj3+kODmVDBVC+dKoooCoEsOuiJZz8DGfx8qzUz5pe40="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.23.0_1631568953896_0.4446026730761905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.9830d665.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-icon-button":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NZ3M9/Z5gg2NE5fjyYfHUJJu0XCbiFScFHk+EOSA6PcwobXxIiBoF2rTe2zDcYKscGYBGBnzPvmwq8+nwIOz5A==","shasum":"3f383f20c56cef2eefa4d025ff9c62cb84435729","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.9830d665.0.tgz","fileCount":9,"unpackedSize":38832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SjCRA9TVsSAnZWagAAPCQP/RBkuPzPCK8s65+aj9Yo\n/bHy8Pd3Q77EkHh1Zu7dIVutkaLBFvn0O2PY3qOWtlCFXnSsuy5c06yX2mOQ\nTWgS+AQq5G7pmOn431hXvqDyH0kIB0j2S00s5pO1DpyyVBnEiZNIw0yEK6L2\nYE7ILJAqELPTLZfQnVZleM46ofDMcIzRr5ijIqimbisLDacH/+SKskcRVaxp\n8IVilPs4GsO0J5V8sqfV4Cfa5gSATtuTHQuu/stoJd77fHWntfJY2BqHz4K4\nkfcE+ZqyyjoJwWsA4INiY9SFUBzASZ4JEIMz6wCRrmcS2UM0aobr1+25dlH4\njHG3igS2G/MOCuVYu/4YqIfyhgZ5PjqbI70YP19TZGudT/ErhrRsqB0I7gYM\nrCz5JWKlYe+Kh7BK5kkZ1tfsHBk+WMZWagB9fIfbWJI8gkF4Zq8AkccIqWLX\nFvDuAOeMuWkfcUZ6KjrhdWGztl/ML7kRMpii+F44eHa44qd6gtgVF8aN/znf\nzg4pDui51N+8m6CoDG91TAYjFwJlkbDHtu8L/SL3MW51XJaeijuf9IqtTGk2\nrUej6p8TV8NfN8n9CfyrHaJebd2wZLV4vQHRVMzMiuFt/BncuJBEL1S4gHYD\n7SZ1lXNmQGf7n0hvgiprNtHosHECnrJ1ZnGXBUZBqy08kMCv99lXeXLwiCab\nAKqG\r\n=E4CE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEzGHoQftm4svWM6wviy+hzfVymHy7yM7zkpQsxvTc5wIhAJLOyYjyXZj29JtBJws31vUw7d6vgLFsqALmRcIDaSZQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.9830d665.0_1631569059030_0.6915304673281228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.20e2081c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-icon-button":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Fu0MVOR0hBk0s+2tu4YOXQiShO16qVIVFNOraGnoGIj9YPBuV+dSuke3TV6tzmHvkvWjxGhlE5JJj6zlyh5UFA==","shasum":"783499e87bc6d1a113a1e902a75bcef7f9fd0bc5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.20e2081c.0.tgz","fileCount":9,"unpackedSize":38840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+dCRA9TVsSAnZWagAAwXsQAJ/MyR2acjLj5DfNcRtJ\n9txVuzYU/EodlIwckTZ/DfyR1KoijxskYEOdPdXMYmsejtskDSwTZI4eYUAd\nHYjlpvRUfQL6dPbQrpJXoW5kxbgkP3nqY1kkbeZ6DyT7bc2nIOzK1K0iqcNa\n8H9lOfspy4HYa+ttz3gplKgCd9DfthPj3d4o7N8vCKE6Rzgzb9EfLk/QPV9E\nWTPx8DHqfjv8jwBpX6smXzzOXdltTkiySbHWqT4q7h9K5XqSD7M7Yk5un6Yc\n7dcNqcBX4TD2ntRd0GIm5sF3u/C1bD98zNgq/lrsw4KhIdPgt09jxwKwSwdf\njdgKg0AwYwp1k4mYSmLh4dRxyhFlH+xh/RSaBFYKV0IloQ9HReyhTxDfKsG0\nkN6mPl4DWme8LdCRzrQITNXEDdGie96uezsrQzt2m1Dlrk/j8G3F48sxXYPr\n8Itnn6ainXxbdTZZMZ8T2jIUf9eW+d7rXT7DyuPiMJdPJH/g+Ub4Sst9Hzpw\ns/sgnoNPLuJrh7q3iSfMTk/Ox7lMR7m9ad0my/ZNpdoiWt2JZWb7rxEiFac2\nJZvjKzP6Zjq2MpHcb2BQ/BKnpsM4cWJhX7X8sY3KDGWw32j2RGmfETpIf+96\naTxUKT2iTguZrBcEaAcQD4F/1n7vvJ7P2Hh/DkCer6WFJ9pbgqn/ota2fKYW\nB941\r\n=8TOT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9anlxHYnwYFUjbExc4Sq7aY3vLHJEVtUTBG2AgOImRgIgfO9nv/VqrWL6qwSazym4jp/837DGV7dp1eKQzksviXc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.20e2081c.0_1631575965224_0.9077266216123832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.583613a9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-icon-button":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hHPcS+J/4G2nINXU5L7ZRO5wf3WqjhME14Ld2mn/8nnG/8UdmAEZRtCVcuNZnBXc+oEBpFRxYFyHfRWZtRUr+Q==","shasum":"98033b54ce76fbdc28bab07c38e9de5893577320","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.583613a9.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQYCRA9TVsSAnZWagAATm8P/iUlIgstfScty+N51mNW\nbE6VSx6zRXMA/2d6++fAyIqrZWRU9veZiNoJ+fuL4zIddMVg+ov7niSwqnpp\nkl2OgmLS6Lsdr0WeMzgGAS962I8J9dQDSNCB+9V0JdBPgcvEYdCEzC0IhjhL\nVh2KMWTLN+kSowQ6aEsAB/7TzB/OndOALta8mnGCvUb5wHF4Ypz9Bkydl++U\n7JnSlGoRf/4c/mru1p4zIeFZGLykMpMxNk3N/wzTxQ3WaZfXNPAdthQf5d4i\nFKxPNsQ95ehdZn/aSJVsdN/buUnVUcbABWCe8lLSMPe6uZzUxDpBjvy5qQim\n2DRo42hvS+8SrbFEkYIcj/UgBa+Iro6puMxzuNklPmxEImb23k7jsBhfJCAd\n1A1IUiK2Md0uFOR8sbV1Mztz+JFGCCfVAfiB8nQ8SMTEbhGEGjey5VdzYFX2\nXtOXRr+G81SJzN3Ni7bgTCZ5FdJ5hbVElSfW/YqngjXakjMQE/ZqGSAPmppC\n50Y1rYzS9Ps3KcFaquOxm7I1BneW11CLC8ILWOAHqxP1ZXj938YarBG5naJ6\nYoM4Aow9ZKlhIikzbemVMQyia9Zz6PXFSHPTi06YiyDEx8Lrz8GqzYKOaSss\nD82chQNOSMF/KOHsXzbhpYNMHMAWdFDF+qo3AaPNATzAoZClN4duzBVe/MQk\nGHcn\r\n=Rvas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEEoFz7QLdKqZ62i8kFEgxyX0UOStQ4ba5QIc6J4qiJAiAGMMuRCMoPoBEgr7i0Etp5KxYiAVf9iI8rfoBGSnITVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.583613a9.0_1631638551902_0.40511141051688293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-icon-button":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JuNJ9b+x3YtacJkaklor64rL1Bl3t1cUM/T6aL1K9MOF85WkCf5QhYAIiflMZaO5AnHtjiW/mlj6L43XeJyhCQ==","shasum":"b38a43ae36cfb44f2c780902ec24eede5e0632cc","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.0e1bd56f.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNzGCRA9TVsSAnZWagAAzH8P/jIYLwz4/LRRQgaCWEmB\nI4Rp5m+5GeSGaHWiIA5sAJum4fISZ2qqgOoDdm6O1I/VosSrGJHxTLviy565\nGNvDoBy+eVhIboHbBfghz6enHcLyQpuuX8GQ0alxUTm2bcqD6r15Ke7yHBnb\nkY3jl3HF/CzFhf/vYRkwC7OMEIOKxQCadoQ56m4SMahaRxmkrLBUNHkZA47b\nJaayohA7haMa/Gq8Kj+LJ4Egh20K/70LFotc4TDn4VBgIhjSSmw2LVnTzSYm\nEn7BOer1FHfzrUskc6s7pExr/JSEMyV0PYbEIpQyI8xKVt7Ckduzs6zHORUP\nYPbMxTtG3+/S02ATbnVvxS/FjdrY3SJ7QHDCWqNYxSSewGbdEn84V2vSntNz\nVfgKHf8HUOZyDZW59JiKZRdyYPit/0kyoKguT0ciB63DwHDSHlRe6d3GLO7Y\n+gQGig7wHTzoi+t+N6u5jP/rEwio3kAQHCzwMXW/+60ppp+Cyjde4LNYGk4S\n7ZpD5V5NTXOd7YOaKrOtR/ahTAoTO75wOepq6tYbVCfUb8D6R5SPJ87P0rXm\nbYbsDjuB4UuoJpGe8hZVcioB5Yt1GD9u1CnCdUCQCETmDWkIsa/j1YFUV3S+\nRioDEUZ23kzza0MXKsqQcK6AO/baihYsLERMZitTULdEGyF4vr6dF4N51dAF\nzZ5e\r\n=4thG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGA4OzVPGlI8oab3Tf9F8M2hLEvbh30qtglsVCiEnClUAiEAqyym2EM1yOITXLnlY4q1ruMJhQjhvdm3WPgvYtn4T+w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.0e1bd56f.0_1631640774091_0.6732880170613975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.7bb1818e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-icon-button":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TkBKmsnydsFbFr8UttYVGzYVfv4X415EZrreoawhmv7Dyd/T1OyLUzyoClp42PHS+G4tUquU52JWIRB/R0uzGw==","shasum":"9416c1a6a5390a18a39884103f4b2a4e6c1a12ba","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.7bb1818e.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQUAMCRA9TVsSAnZWagAAV0QP/1gAuP0wM0Xj2YFW1okd\nz+FWtPul5NLGxXtBFCTP7MXbW4KQnpi6oufEZDE/Yt8xWb1rYsfdITv1LQAH\n1zqY/3y10uT9CdY9cb9DEkZoBKVRI1ZyVrWZDJ8U/x3iKqk5gTfck1nCje7z\nAeR/wd2KRhjiJiImdqM8Ic5IfS7Kw4I7jAI+VXo9DfTsqkzSqCzA3wOxJM45\nwNHpHUQDINfk01P6rNDpFVn8i80E0Kj5PCNdG8BcjED6MuGqf+qF60IxSgyp\nzUy0o66d2QccsqyufrPWwkdFdnGhIgmlWaHYOf6xpaxnIHqoyz/sjLxGeyEL\ngRJ+OR//cidMImrCT1cAdLK2b2Owl365UE4Y3Gw/IWhm+a5VxRd3lUPqaA+Z\nmmsQ3Bo1Cv6nBj34VfBMbE9WDZnGXM2KTAT62YIRhaQutyUI42WlQhumCgs5\nE9PA0fHV49XhMoQWoEQ5VGt7HV1f1VknYEBB5AN/m5CisoB222DqPv+oPhOL\nllsqWu9dcpV6K6H1Bz/WjsG4iye2rlxjXr5y+l090K8ehhoveLbQ6zVi3yDW\nqiaHWkhzfCvBoYfe2YCSDW5alWwJDLX6V3geRGiHcmikDloNrfcdnGT0Fi5t\nCzKZLWxeujnmUNhAGpuHcWL7il9q84ACrR7lG1WJx/bsae0YseX7WDzoRm0N\nl+yq\r\n=NEXZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD06Ucp57KDKHurCEJBMxcG0/y7mBqzXpxTFMXMiVWYhgIgRYLKEefna7L9MiLaELIc6vtaskNr8MEp4UHcOrnWWds="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.7bb1818e.0_1631666188401_0.539513814854687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.b5e665a9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-icon-button":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ELQmhz5eFKzxtQH21Av7BrRYGQrU3Qf467TIN7pIsvSW/5JteT24KxtLdhsJKuiQ12w34dTXZQhVaGqieeMI9A==","shasum":"c962523628aa67315286db7bd353d5ac83cd9f63","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.b5e665a9.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfZCRA9TVsSAnZWagAA09EP/0X6HhW3Gyj37nO56ZIy\nSdcrQjaIDqjJNoM7BWKLakw9gGZxE6LZQno3VVQkebdEi/j0JKDIjrIBwhFa\njaSFcKQhV1/+SbKCPGAAEFRhuOZe4UhFDHTbNUT8v3fxMxqh5TgMcffzRBVH\na9o7/dlKjJndNUiOpoCLzWYzhsQPL/UHDfQrsxr1pMeaem4yrhTmuWtsXQo9\nW7BJ9X6u1F7pMq+cSge9bLoAeJnuLbm5RKQ/EWeZd2TKKnBagB3lTAY+CrVQ\npzN8lMiRNLib8/Etm4nkTu+fP2Od941JR8kLZFi2B4jWYFY4bzsVmUkGpgfH\nFagyqeN0iAvDtKLACp4AMtwwb/U/W+R6r1cFhesF/KL6Isf7ulaecr54SAIN\nUx9hDZ7eCc/4c+vrpCFKJ4v7jWxkRGf4fgVPTOvjDdThmvRRaJE5kTeoxWJL\nWY20GZcFqysOf1QAOOQ9jMa4v0UcaKDc8Dx6k4ZyunBjTZ+yny2vTXtOQ+r3\n2NVo+fN3rblEL+CYMjk9VjR+U/w9d8wx5CFZMY6QGzGQcTkJq2sRBq1vR/WI\nAVFVq+1CieRE/9xUQGJhikzd0+E381zDlgEsLNgRWKDeHNUF1XORjY2D2qQG\nkIXktmNkQg2sV6T9bIwkCDu7ERab6NWI9zwG6Lm8kqICv02vIdd0ymocuQOS\n5Ker\r\n=ict6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV7RxWsbA6vc/5tjhpqVvtaqNBaTjNVgFB33SqJQz8KQIhAJGZF6n9U8b16b8MDzZD62A37ZA5i/js/gQGpgW8esur"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.b5e665a9.0_1631729624962_0.7057719772745277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.ab1e177c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-icon-button":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BWGfcan4BnEFEWLP97X8wJA41lH6BvDclgkOkZE5qFKmI6MR2HySek/mr2/y2IvfLlP38q4MAPdy12k7s/PNHg==","shasum":"67a80f20597291257e5e217a2918268584160eb5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.ab1e177c.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj9JCRA9TVsSAnZWagAAF/8P/2DtUB//DJE3EztWq19O\nqRVBnRZa0+hlVF9InVM5TDd1z+85RqdsmrFhD0W9ZDdOeBWL8PzRi++VQW4x\nim0aw+DygwIZiFqxXQXtOZhwhZwaLm2dCh3DltDka9a34wczWhPys2Cn1tW8\ndiHCurOX5imyKIo8pjxdYp6fJUftgwS2lhuX2BMnY5fW+eLwzNN3vlvMg4Xu\nksBk0ExRpW55I8vDPHMWE0pKhnt6otd9DX5X4h5UOkqB1PplnhSumY/bUR0I\n77eMr9U4XYp82Ylynutt+Wrjw18hUjLbEAOXPPkZ4LBV4geT/Rexu07fJ9lz\nEPYMnRK3wEsN0Wpwap232cBCKqbImroA+Nc/98JoYhnJe0/E5U4qbSPEFDRg\nMohiiKxlBT699+LlfyoGHMJLINdwt9OzeOQV3mJLlWB4G7RlAM2qv3hKGSbD\nO2O/XsA1aFnfX7O1jw3borY7VWV7ou7T7S19owpNsRh00Ajune6lRI76EB6I\nMDd4HU5HcPxpSsSqu+Up9xWX7nweZR4yJuK/WYaZtO+UHSJHdlIEXyibCILW\n7kGKE/iSsAy/uaUjUxJkT8cKBoU+2QNPvTlmcJ3uipFVT4S6AbW7r7iV/Huj\nddm3TBJMEY6ahnYdb9qw9iTgBbkT5zLu6MNnvA9n+x8nFHfCXP0Us3ttGF8j\n13uc\r\n=EKl7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqDWmWMLA5Qa8VM2iZQ5eqMy1eUx6Ne6VpM/tDb+fQyAiBFQp0blWNe0djM6Fx7tvZ1L1F6NfnmSpJBYfVd3718OQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.ab1e177c.0_1631731529034_0.12894104691366004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.8dff8894.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-icon-button":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-edgIRI1+U/OqBO7JXNeukbWgvrheNi/CWEn0cn8HPLJKGIZ+fubTtshTXs/C7JNcTLyffXg66K/jcWVZICTEOQ==","shasum":"b879a036c59733d77b96f9db2165c13352ea8afd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.8dff8894.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTWCRA9TVsSAnZWagAAwqYP/2EJXOm4JIcFriXdzlQM\nNDOjzjp2tZBOT4BWIQsRR877da87arYWJe0x7wtcHC+DohPkKa8rV7KifF0/\nYxB6Yh/165FWgEsYtRF+HOTgiVjHPI0M+i+X+fJB/LSmbrAGUV6aQaqacYbo\ni1/Y2301MG7IcTHvEF1BlFV/6lNQ/rsBEopSL+rDEbA6uA2+rLnVAsO2RC83\nWLVYgYkGODa24M4nY53BGN6TYzxNC97rYbN8LuHVp0E/YXhIqT0iCb8pY195\nfRuXiMQtFnHhBU3y2af3Fi0u4fFLiLv5V55SskG2aUgXsjhWSLETQc+8w2Mt\neenSD/yYwL+pW7d4TvtHEoYKffm/zySEFQnltjD3Me+4tL3BbT/juTYsA1mf\nbNElKYZaEc8q53tkxN7TWDJdpcq9JqkPBZ591OmOzOBlR+Lk4WW3EWzfOoDb\nsQsnVgJBJyg1LFShlYzorHJJZX9cNLA30PQGiEyonGRkConC6ofAOI1OBMt0\n4QcO51Mi5jfGBdX7Za3rqm2gISMW/l5eZAqO3+dYTqsWbwPjxRhGmAhOOtUh\nNBGjWIb3IQ8unc6iVnA/6LHPbEOFq3i/wPMaS8Sfg+3QobfmUq7+FckLV+8o\np5/GBZKnvuYwfWML9VQVnhOVX8LTfYj9x8MwgdOXa/AqiTzbZUxxvYDd4Z6Q\na+vW\r\n=cdkc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHRhjrnsAxSFpvilZ8axZ7MqhqkmSms8IgKVe+V85yovAiEAnptiFR0RtLEsUgeS6R4TRbSy0+Hcq5eQ6xp1RPgC+7o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.8dff8894.0_1631732950481_0.6001340575312737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.9cd7e927.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-icon-button":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sBLC22PdzMbBOP2qdUGQ94XkoIP1VJE6VJMP15K9Kg7RMPCsOJC8N28tc/9tGC2hUYn7dvbMf4fI5U5T/bwIkw==","shasum":"8bb8bb7782fcc9bf5eef4f41773d5760e79b665c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.9cd7e927.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhvCRA9TVsSAnZWagAAjiMQAJk6AaXjQ7YAggFBx2Tn\nOYAGE9IGqIoGoTOGvZSEsicp6UYxK9slGpyThp9slR594/3WvR3mfzhZA9qM\nkS0LZv1o4UkJ+RQ/QfatBkBXkWPyEuE6OCmdhxwa0YhtI/vwFAXO4/aePvY2\nIrEPFRDpyyzV/xVS4zZg2SkNjZ1jTzZAPeQuVaUkeQuFd8Zj78q0uZVJbpAi\n+SddlnTuYjKGB0xqAYPvtvBpBmSo/i8mlde9ia/av0jTVmUp/0SYi+s5oWqm\nptJzKTjtpdci4uzirE/6s/J2TjG+sHRjf7sxaTHQEXTbScaEqWB/XBOkOpOy\newr4YkeDVuZPz6NU//Gp5ajqk+wXx5b4e5HZhraC3tOzyhME+pbPsaoEt3eD\njTyOsjSRj8BwIG4NQfNG0Lg2K38KNEhXICOTYk9zKDu4Ccr5E/2zN9Zra0lN\n/eqPwoEd21+CIsyAUzrp6wrdvVQPNKcIt6YFBwmHqj9D+CK08mG4cjoxu7x+\nvCUyTKVSpNiZug708CmHmxSxHjQBglk3i7bi8PrZzUn8DqcwutqicKJDlKYy\n5hSakoc8mlxT+WY6AqDntMoemss9edPFrn75D+yUvCbXdIwo6zxUFFw5yx3M\n/BT9JDujMSvAFKc7RZBDoderEYsl+puSDWjH4VyTIzAFTe7ucvyq8iS6Xehn\nwtyn\r\n=ydbU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNvyu2QCJYnkL0ukaTfB22uO2kFuSiY7ULrT0HE3M8+wIhAJ0lujTkH+AyPh649Ptcli+LY/cPMdyDRE2lVf0QDpB3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.9cd7e927.0_1631737967553_0.29439513124039474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.a7132082.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-icon-button":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+Hq6YpfQmpwY4+l1/4t0XgKWvosQtqOC9MSN9KnJq1O1aoUYK8VG6yaXZH8K7miEXhuwQ012I9yu2uJY7Rt+qg==","shasum":"8517217fc1fa566332b1680e23b4acb283df8478","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.a7132082.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmvCRA9TVsSAnZWagAApi4QAJO2xg4MzhmJahjk4BjL\nps9A/pxVMu+22IvIlwF79HVC24tli1YLeV/Ryu/eltckaeP+zu0+Ln/N54+3\nS3aTh5XdlUTIFxzRrwLLJtS9L+zjXR96QVRx4sICFvP7aj35A2O/Hu336hT1\nnqn31EqnnKe4D8/O1IAZJAtxsfeUqsClSzgyAMD/yJWMDpcBQlV+Sol5dBcf\nPc9TCkiqXsdFWmzmp+VFYxRAGzWE4KSJeKRdybKTs+IHTcOsKUuQzunix1dW\nBcYCw4bFtnVMnx+XUAQO/4Ow1yqv9du8DXczN3vufQZCobIFfiaEnoKIDFaQ\nYJAjtf9YZMfYoTco6FVgAChVsuzHFBJUmCEkFjrh05VAThcMQoaZO8YWpL4S\nZC3cBrJnOscnRrmaTanpiaA1NUesO9op2VnCKa0wfCEqFCbhvlAC+/ov8akv\nS2RyPoFN/7oKYBtyRbWWnYaoPqd8TNqrVLtXtx4nPX/bVTuYLcjZAQSg27e+\nzxRxHgK5pnaVnz7G+iyhc0e8z0uZx3bMu1foNt/aUBT3kOuCeNoVMOZ2+LId\n087Ez8hTDpwvUhVg7AU5x5QM0M42nrTpKdfhVBnrZe7FDHVYMiYnG9uCFOHZ\n5aFfhZEFoU/bWkSNMbqLy5VgeCJTu1E/SK4Mf0FPhDOcyiZyTZGp+v1qrWfm\nMW9t\r\n=6lU4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2E/xD/8Y8kf1wxHITctHJUXv5TyQqLm4nhPnOA1IsFQIhAKM9gZLLGZtfjU8M1nIVzYT0Uet3sLW6fTepeCXr0pwF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.a7132082.0_1631742383349_0.5404705209426683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.cd9110cd.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-icon-button":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DyUEdvimfsv8ymTI6HgSYOeUV0uRGArMaSAhstbQnviino9F7OaVHJzw7j2xU/alvR5gqApizX8IWPhz+f5JZA==","shasum":"d042e4f4beeb08b09dc7d4061c1ddb680121d720","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.cd9110cd.0.tgz","fileCount":9,"unpackedSize":38852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LiCRA9TVsSAnZWagAAv6kP/AmxODSW6puqF/0tEiKC\nxSSXvMDKeATQzJ5Dp1GeRgNnPLZt+Dhzn7YrUJ/MnLZ3TFHsZ+Q9685hou6f\neVqfse88BR4g2+FLYb9U18RI3NbYzYc5XEseHwVsg8RaX6Jrbh0Q+EaDG3jL\nHSyZ3ZVUokslQD83QpYzEV4zixXfrIWRvUEoN5Dfg7DA77+mRdCBP2EoHwH7\nvzADRpPV3YC80rThnfHzoFhmrZrWt2D/6vHoDOyE5z6B7XGlUfimNordUzi5\nlFvv3l1H5VVMGcsGB9HBpPFApdjrLvLeJViPN2Jg1hrE8eGCWLvKn10sPg3r\nxTBCxnVYaSolT5oPfPpnZpyM5uNzP6n/H64eoUe1jnIT4SDyPMyJyg0TeNid\nRZBpN1IhDs9jy65Y8HWzo+WsCI9B2uz3cJhWtai50E1YkIM1SFAi1UwsGbYe\n+CXKyRXJGQiSFooItGFnDJMQPttKyAch+yxkSe6u0ezrmOiOakNW3AjV6tDs\nKZ9MQq03mLo3mI7tQPBVIQRoYO/rdpi5kH7cR65GuCiftzNnfq0mmDD04WWm\ncb5pkOrRhyNbM0RW+47YLbCDLhJQjT2UsXNa7+KgJugnbY0yVfRUuNwLmWi1\niVk22nG/kZ9nqNpDssAo1v3ETX9YsPZ9u0d6DRtX4qrFZXcLKVWIfKEL61u1\nfvQ2\r\n=9sQF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6ySrDKZesSvs1GlOuKIx+mojob6Kmh8gN3EZb+A1a/QIgD5EfGvuhZ3D71icgIZo4CGmtkjsbuS/cZikoemkqutc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.cd9110cd.0_1631814370378_0.12608401105805545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.1e5a9883.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-icon-button":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/XcPYs8Ow3lgkYGyGVcUsJ5Y0Jvzvy8Uryz+qH9DVlLG0XpVUaSrEeid6TJhvQBRztq7jOlL7VyUwT8hH/H8WA==","shasum":"5746c8f65ba1b0d0855bcc7079036d806c51c43f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.1e5a9883.0.tgz","fileCount":9,"unpackedSize":38852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaTQYKtalNtcP0N12AzJh5cxUAg5Nv9W4ucWAVEM0+AgIhAIc9GTsJIoj15BOzii/+np+WCkeDXds6rt0ARLl/HTqY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.1e5a9883.0_1631911168487_0.8344714604297372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.32c830ee.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-icon-button":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MuiwcJEUDaNhyIWGLtSpUkO8dvERe8ZWaxhlwCgw5WZ+Js9nsbys832mVAN3KK5Fc2ihQ8w3nWdm5Fn5khOOJQ==","shasum":"4d2dd4a27c515ce471795f4b3ebe51c8488442d4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.32c830ee.0.tgz","fileCount":9,"unpackedSize":38852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp6MtGbIw36DeAhNupvpOPIf5up/X8lKwumfGSl4/6ogIgBrwrZufVyfRQjHTpKQBXQpjKpX8JIOl6XTwTizXhZLs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.32c830ee.0_1631920148105_0.5278405781312161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.1de87bb7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-icon-button":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-26UkJwrva3aPo/JdQglG3cOqXPt61Ubzky1n3z6TtGV5AeYdHClrGzsuAdvW046v1oTAu4DChdZDobIFWFGcoA==","shasum":"3dac5ce50b5442cb19a1b477f748397766948ea9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.1de87bb7.0.tgz","fileCount":9,"unpackedSize":38852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN0zapLb0gfGHjcikUzF8zCVW5rj0yi5pH+KElyTgQPQIhANjaJK+RrI/oIrjLhOWAmaaLrv1sTgOd4+RVAS9Hnr3j"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.1de87bb7.0_1631991150764_0.1345061649277608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-icon-button":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-oDsW/GlvbFeimpdIdXK1vFi9brFuLsoz7CMt54RCWYO07y14YnVOFcVHpinAl7y1DNmO8kBc+lmThZzVxTt9hg==","shasum":"506870da04ae97feaa38147dfb1a1f336c9455ed","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.f2ea80c4.0.tgz","fileCount":9,"unpackedSize":38852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQjQTf3QkbecSWqQn9009fEl0tKLY+znAefQRQrk0WcQIgbQAtZmYAp0w2I8eIJZXvTu1eIlNNX30fm8aEPYdf1iQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.f2ea80c4.0_1632160516256_0.0654659184970221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.569d739f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-icon-button":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-eYsUaXi/tvvWLdcgPiMbkaAJhi10rt1S2IksPNIsFpgVEATKphdTPerumB5wTciwTtq+7jw4VBdzSJvzMQMAsg==","shasum":"d974561487ffef379cb29fd311f8c84a34ec84d3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.569d739f.0.tgz","fileCount":9,"unpackedSize":38852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCY1RiSZMTEF9yo5nZ48Vjd2l2ec2dR1iQc9Kvcm46vtgIhAPQi/dK+NlJTRoRFGtL1qaDlrcyBCPEjWSJSzLzwkivt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.569d739f.0_1632173056127_0.2325248391968775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-icon-button-toggle","version":"0.24.0-canary.5a434a50.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-icon-button":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-mzyDoPsQ9cn6mBEIUSXLr0jnBbFvUivZIcnkKAFM69HQwhVwYtLCJs5jxkXMvK9OhB68Bjrx3Gy9799nAUwVlw==","shasum":"d9c822dbdf0ca93af5e2cf9956c5dca52f48d1dd","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.24.0-canary.5a434a50.0.tgz","fileCount":9,"unpackedSize":38844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8+0rA8IC+kz0yKmC33G1JEqEQjQtHEmBamWK6yqZQTwIhAJfg9u1l/AZdQ+a8tgT7IlRYcGJW9IhPy3oshGHPQH13"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.24.0-canary.5a434a50.0_1632189672397_0.33873402200623604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-icon-button":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CZUewWCFdsQLfVz60PDV5COtyrTlKnFCofmTkvHohmmBz6AoElYpguox0eFdPIeCoqm3bcFgv4uL3ftMK8BwpA==","shasum":"09fea3926dd73c8a9ee6f33ff9828ec415f1867f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.b1c1ab52.0.tgz","fileCount":9,"unpackedSize":38844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzDUUrEghOvGni4A6XyxXgXJjzsVdIAzTvp8fOBnhCnQIhAKsmCAoyCTfdbhBreuhCFlx91rP4RhJHtO0V/VK79t31"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.b1c1ab52.0_1632193952254_0.25051298051088167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-icon-button-toggle","version":"0.25.1","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/mwc-icon-button":"^0.25.1","@material/mwc-ripple":"^0.25.1","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-ZFc48KS2Ichkz6I/XpLGokx/UaSR5sx4KplqZUWE+4YvYD6VMgp1S+tmh0lhcdJiQLIWAOCblp5D64DPp9rbbw==","shasum":"2a2184cde4f1c830fa65d5da8ab82121af384fb6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.25.1.tgz","fileCount":9,"unpackedSize":38775,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjGPp84FpjHbjiEfjj4/Da768bD8XoSk8Ny+YwshPpdwIhALiScLm4CRvBOF1MVy32Trf5fiimosQ+hkEqKZOoZt1s"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.25.1_1632193966563_0.31835330868667855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.ae060177.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-icon-button":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0sy+MBHVcWdSkUCp6VolVEIDB8K54G0FvWsL1nMy1fzXiQYickuazqN8KrRzaExRHy2DACTcaWu7VZQ3LClPYA==","shasum":"8a88377e62da1c1ce95d0a8f9875c8492598c96c","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.ae060177.0.tgz","fileCount":9,"unpackedSize":38912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8u82hwwHo9wbYyDrGwz5FyHYYSHLmeFZVYU7UVpAlzAiBotqc0JJIiWOS0Y2xu/CLl/v9c60Wv1Ki2sZenHFh9wA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.ae060177.0_1632235109968_0.11238234235617073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-icon-button":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-XwPwmUpWJo/ONFh1huGex+hAWnvN0L+YsDBvxN9cfxQgHH5P9+ay56sc0Lb6JmsUQVPpEow96ppT8E3SkiE8yg==","shasum":"ec14a1c19d17c30926e0cd966a70130bb6e1c286","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.b6fe2a12.0.tgz","fileCount":9,"unpackedSize":38912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmhntjzsYALa4oFMkOxQ+ieUA9Dg/go3YffJ5qNZkIvAiEAlpMmo0PjM4GcIoIJBwZ6SikSVcUbLtyfzJiWy6XShjU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.b6fe2a12.0_1632341799806_0.3813245347623657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.07e91417.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-icon-button":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CJNQF3jjJLlWDXisAnb5OlUZL89Q4N6F/+g61BH60BAfyssY3ALx3P2ddx8gugJigkx8jOrVX9U34JJlX56PGg==","shasum":"ee43948b7ea38c501068610ec4a5a5bddd6f6df8","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.07e91417.0.tgz","fileCount":9,"unpackedSize":38912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwRrjnLfVSftFKgJVex7xjkjPz/Nl+b6dK9PgGgm9fXAiByTyIvODSMKBc4j6AvuG+5YXt7JloRY6gvX4cz3VL6Lw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.07e91417.0_1632344770686_0.8785921743840932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.e2203ffa.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-icon-button":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-2q7E1TayU8D/SFalf9AO6VeIaKExwjUYsx9zIkP6QtY9pHz8GR3zkWb+USjkznL/4igAFYf+DoQBfcCq9P4wbA==","shasum":"c9ff4a2c81ed1b07c16b26147cca1e228d1a1741","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.e2203ffa.0.tgz","fileCount":9,"unpackedSize":38912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHJcXR4uSQOuJROwOMdXbUAQCY6nDxjeeri62xtOWuaAIgEwO1edCQckXYLUFgLZp663swClW+Y3K+t0ImfqJbyOw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.e2203ffa.0_1632421680144_0.5214357035678694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.4abe237e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-icon-button":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-u9xLUEaPq0TwqrOeCnS2/1GTFmhhyE3xdgjOl+A2wEMUX2KzGcjocOKCgaz0FMBuJ/VyCXeJguFrSh2NSxv3Dg==","shasum":"da7678af632e2ad682efa7da588af269a876923a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.4abe237e.0.tgz","fileCount":9,"unpackedSize":38912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDIDced16LnlUN1IAiq57i6JITEuSkSWhQZ2GQtFKDigIhAIhg7WLFIVpFGSPK+B9gunFR3bAHCPuCXvU6M3oZUHzT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.4abe237e.0_1632504690849_0.387363305385398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.6278ee5d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-icon-button":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vnGkHW3ZTjUESTsNIZb//n7XAS+/z8a1JqV1/m+rtQ+EFDEGIixxhD03c6eTF+xU3lE0CGxcYyJ5nLMaqtcv2g==","shasum":"ac3b93925b16277057eff87d970fd17a16137437","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.6278ee5d.0.tgz","fileCount":9,"unpackedSize":38946,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCpNrvzzY0Btw/EaJxnJWCTTeYclnyJhsUIXW9Z7wqgAiEA+/eRiaoPMsFoSv4gG4yIgMylMJF1hmL5yDbUJHZ7hHM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.6278ee5d.0_1632767504120_0.7116042603738097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-icon-button":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-70SOSZeLpObfzB3f3t0FABU4UuCVIXDYqImJzXoMLudpYaxM9xDK8/H4ddSvVGJh4dCA3HU8YArAMOFK7xfArw==","shasum":"60844adca7ebefdd13ae81ff101b523f17d1e239","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.3a5d5f34.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu5c4NCFCMmTo7gR8B8vaK5xKBRCBvgjG59prAuoRJjgIgcV+RU2euwGsdwmYiSSuuF3MG9nhA06UgcNJRVkW511Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.3a5d5f34.0_1632782513012_0.02691345638548648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.143ed3c8.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-icon-button":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-8inrxTJ6mG4HpxRM9GU3CXd80K1G70PDhXyi9iv58hnyu0Fpcy2TWQ4r1UTZ25Z/7gL0JMCvcTwIz7+CC1S+yQ==","shasum":"cbdb5cfbfbf39723d937a069c43c9c1ea48d19ff","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.143ed3c8.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8fd9B6ViJY6mWYr8M7Rhw6w0WkvunCMzxRKJYMsyO6QIhAKjRObFwo7a9yyBVJyVjGZlenR6DLK94SLmNk/F3JyJ5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.143ed3c8.0_1632880272493_0.005943020492682249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.e5923d68.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-icon-button":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-QerPDMndRY93J1b5ZhRxj2eNZrYNgvr2WqBnVlTJhM9LdPjVsyqpmsGbN2Os4Fs3gZkNHUXuG9XpjVp9EM07tw==","shasum":"7c5fcf2f345ce66e5ffa59c2007d5f6041773a22","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.e5923d68.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqIXP0nFRmcdkATX4ZC5Ga/bjzrnRtWM/9UCUBfX6pEAiEA6qcTPDfRA5VQamCTjS5QZIDfv+oGMYm9scvuJSiVlvw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.e5923d68.0_1632960372761_0.8525386696668553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.d8ed5109.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-icon-button":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-rtzYx/crfWv7ScbSRoBsojVxFGWCoPCs6GU2hxCywSn2S2CV+q1UA8qR4kbXTy7d4KxhXwURd4eLzO0ana0anA==","shasum":"2be25ae98fab468e096ba94cf1eda3e84015fb56","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.d8ed5109.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSx/9Ik8EiKt19lPH2inQWKpbKVlSarr7A0TFs8ah76gIgX+f83LmaXini8Izf1SyRNeO4/bB2K6fs8oQHru+WZMI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.d8ed5109.0_1633044855230_0.09784689019272563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-icon-button":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-kDt1ASj/fN8No4BUNhSeP1igon3GENPnH6oJ0G4nA4aaAuYRE5kle9eyUBZ1fYGdnYj2lMFI/HUy+jN2ew93jw==","shasum":"a580304b14fe4e5af680f617d1f020b30e528878","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.0efb9c2c.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCdmK4N99V/0njIB0szdjesTWA6/l6V1AT0iGGVdgkHQIgIX79dRpjCCYOGQzxxbbdWHFEgvgeMNFFSI1lGDSIRQk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.0efb9c2c.0_1633140517608_0.30348314340369975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-icon-button":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-4gpbjSbxCqTQcyDToECvrpU4LRweG1AR5zNI1KIUb+8YO9+bBOWhmsssXt2tjYmCRkMGsxe7HrJmMcXLXWMiJg==","shasum":"54c8f049a6746dbb386d3df1172d568d946012f5","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.1c9adcb3.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFY96MnPb+VR5YzXlL8DrDcSQgSefb7S9kII+CxZa0xjAiEAhYf5uLGK+EBiQuh13BwBI5l96gbC9rbXU28sGWDKJjE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.1c9adcb3.0_1633368836584_0.5035538965240562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.dfc00d60.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-icon-button":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Ltr9U1f+9nzvQM48qAmTJcnnyOf2N36nR9VUATg9cazztalgN9hGmPWbPoNkKuNWqzcOg8u+OB83kumTNQx6lg==","shasum":"f451bf3d51e596d65334c700f0c1398481792bcb","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.dfc00d60.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgzydj1jEFNfSDgHFuIoTDaN7HtWJ5Sf0DlS7lH6QEEQIhAJZdNLOlDejW6YwplJ6/EodNSPpLHkrCbIhen0PHqEdN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.dfc00d60.0_1633741061224_0.8381714885749372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.c3aa844c.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-icon-button":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Pf3j685P86sEk0+AceDAg9bK+55zeUbGVmbQmWz45SR5ASysefx3onFe1QNdwzFcETM/Whk5sqlsqvlpnwq+VQ==","shasum":"ed284d89603a1b07f6d6b9401e06e65712766127","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.c3aa844c.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChGXz8NXglJhqwggcPlc2Ob1KX6Sb32GnsW+kQEi1w7AIhAN4h1g4q7sa+PG4AVxF4LvoFhTJJHMr3GsfmJ014kBBg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.c3aa844c.0_1633994082596_0.5267488593470107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-icon-button-toggle","version":"0.25.2","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/mwc-icon-button":"^0.25.2","@material/mwc-ripple":"^0.25.2","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-6hgCjLqdJ8PIBkDeoU+Qtb3865Xwh0OEa33xM1nQlJMHDviixep3Cy1SV4AFi9iYFNU6La34gPMllU8Lkc8WCg==","shasum":"bc7a44623ab5a3c9ffda70f0b36f135afa35064a","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.25.2.tgz","fileCount":9,"unpackedSize":38875,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEF/FOSIKBxIRLZ5P+ciZWr/mhoLod75IaqXXzRbb5P8AiBv+W/DtNFzl1OpZ/ESf7F9YZ2tpnxwpSVw1GmVMdbmlA=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.25.2_1633994317184_0.604754085038208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.406d6fe1.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-icon-button":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-59iFmbFDLMqbIYLKYasuIZPQWJDjWwU2GHOvcGQ71626ALUuw2EqlTOpExqW5Uudm9mKnogfxqwa1FDDzHK5gQ==","shasum":"656274a6b4bca5698db7e827057b0a8251a33ca7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.406d6fe1.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDti0pxTnA2aqRAt9XW/cf13hIGNTd117WvgS/q8s9qXgIgVECUs6w3UqhuVqiaq95MFvw4MLm9//Z3okH1lnGYka4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.406d6fe1.0_1634158792282_0.9235570694056812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.ca0a674f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-icon-button":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-fyDnDtFK8hWsqK34ulocwvZTfWw1j3/0RsX4pdZZU8wUlLe7PTPPTneCY7hWN/yrzISW21i8jvS3CUN3z8tLEQ==","shasum":"e493466254c15d421cf497d834cac5d29513ddca","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.ca0a674f.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/OeJaOWHk5tweXCOVwm1y+NpwNmS7oPZouvOnAXQ14AIgfCGYi4w3JsiIUnwLA8EfnfFEGIEBnzIzDy3EVZskxZs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.ca0a674f.0_1634593038033_0.5460892423883341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.eefcf660.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-icon-button":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Y3k2mRc5oK2+tZW44FWlVbkl4r+4lz7t3TmPxdQWbDsqaAdF4VLH1/80MwMMc92wkiPBtE9+3cOwu2gISxrRjQ==","shasum":"1eb8537b94dd10eb9b0bd09674d6e1bd05615f57","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.eefcf660.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9wLiDMP1C8F53VADIhaPWOAFd4ryDihmJGmG1GDnnuwIgT7c4qdw/lI9l6uX2kA+961cw7JkNsBkTONfKoElwNRc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.eefcf660.0_1634765037923_0.6323829054902834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.d21acc8f.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-icon-button":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-29H8z5V8An4/dwO/xjM5MbSGPWMibsMlGgiGa71JeuYuxPXYECTc9Zz6rBBOe/oLbx4wTfu/j+rWPYV6vS2QUA==","shasum":"f6e7f13889ca5fdd2001b61109170db7be8c2815","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.d21acc8f.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLGwti7fdpCnQtCDKviCWc8hJ/wyumcTOx3Mup1PTxWgIhAIrzYsIVqnMpz28dyEI75HCk7QzxA5ETxe9RsAXTl5de"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.d21acc8f.0_1634769171624_0.41605486200566255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-icon-button-toggle","version":"0.25.3","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/mwc-icon-button":"^0.25.3","@material/mwc-ripple":"^0.25.3","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-H3eMHHZWyqO2Dd3FXiDOArmegUBpXB3vatZLPDHVFKABdZlt0M4qusgvV7IIo53urLqqcVo6u8FMjtv9VGnXpQ==","shasum":"f1f3e82c9f7d1c6c925b2c4e65c4add944d5c97b","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.25.3.tgz","fileCount":9,"unpackedSize":38875,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRE+8Zou+zc121a3qH1odyhBPUiaczWiAXvJgETqhkkgIgTpiPXbqmQMG+oeXYG8ZeZ6Bg6h+3l+QxKWgursF1XgQ="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.25.3_1634838949687_0.19085600764069843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.60449b7b.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-icon-button":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-YAo/VQdpD3TgBk+WtboNsHG4VKPIXNT4iYU9Ss9g5BginlWR799PPWxHeG5xvUQ0kk7NuFag4PQHYpxNHh6o5A==","shasum":"b280b8fd3111d0d67dfd0e37f9eb797d027ca4f6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.60449b7b.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1AeorP1lRqTOyxeE75ogImS6V0K2nQJS6BUkbV8L0bQIgdNBdy4xNSxeB/aL0kll2+cWbNYxJ0zbqhdWaiB9qWtU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.60449b7b.0_1634840272550_0.11146018985958461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.0d8084ed.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-icon-button":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-lE0cHwoC7kGdG/YE4OISJO0EcxXseTnTbjXNnDCywBshV/VyfaW1XsZ98iI4i/fZP2ZMJ1T8uAFVCfUgKGv5bQ==","shasum":"3c0f4a48a12a73c51df47e26b78862d49534f6b4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.0d8084ed.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvXIFmbGlDRytj9bLYh0VzmHPYB6aisEQBID/A5lweKwIgGMGPSnkuv2j+ofGqNbEbH/SgBuS+1GOtzQG7AMjRGNQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.0d8084ed.0_1635443117624_0.3744604701302001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.232327ee.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-icon-button":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-0UBB5qHZhbYm+YjJSuHdzGX2k/fUy3FS3374lS0eeKPp+IbHtD7ODGG6yqDKQePX6sCufAdeasZqxga5o2W+pw==","shasum":"ee6647088a196cc9ed12a76d873e71640a79da83","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.232327ee.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICo94Qkoj6lXtK1H7BLI+N+OmdioKLuRiq/jEV+GMlF0AiEAopXFsJki8BzNypjZP9a1VBwviALpD+AjwGh6wSNLzEw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.232327ee.0_1635797769970_0.9994912942299337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.0a492ae8.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-icon-button":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Rx5pSGlEcLoJ+eKBj+f5iM+D9tY19xLR7wbXkan0prtuFUuwRZzMV/okjBFVO1PvNfng6rSrC42CjP/giiLxjA==","shasum":"1d9d8cf999d9557b833abe09650b8b3f48e50a55","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.0a492ae8.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcRnlMYLm/KUyRqwoC2Sd1TwmEnnB7VycbFzt2KmuLLAiAQvaYtx5nr8VMpqbVORkK7aTUvvnW3v0kpCJkHmF0Lyg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.0a492ae8.0_1635847251717_0.5864498759976784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.0aa18745.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-icon-button":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ovuwT8fyD9v8gMAj4eSjf+k68qf0Cf5Vs5f3kNREkoG6IOAhqhShwhTFqF2AEO8wOphFaGzNDVr5uP5ed64ffw==","shasum":"89f44f06e556e20f3f5a48da17b37f2eb5e9ab89","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.0aa18745.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbNKcL9pKq6AmUiobOqpcSQ5iaPC2WJVB8+fZUdceCCAIgFluqvbH52DVntqI1aynX4UYcQqt/7gQNVOgmFzvLPcU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.0aa18745.0_1635876495055_0.6239389943410469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.f3e28323.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-icon-button":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-w2z9i4w704NoRuZMokzPWc/oiFemP36j9QcLkS4GqEFRYK6zkXA7F9BsIYoUEm+fF7C+cPn4WE2EcLJwsvVkIA==","shasum":"f35078fe85734b70701cdbe1edece4eb68066de3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.f3e28323.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvo5up/5KYXM3EarIgpvx76Vq7ODEbspTfRd3OXBugWAIgQKUSA1v6UMeDW5WqAqK7f/IFtPGD24VVrshPypSGDcI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.f3e28323.0_1635879596400_0.7428129222036339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.27e05c5d.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-icon-button":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Q5bJU76ftsTiOJxRyrW05A71mZA68Zb9cUo3VWXGoKmvN8mmF7YpcLiQn7zZpjj2g6vj+oUj9cf+Ek3nHuj9ug==","shasum":"116f7c6f5b8f37d0cf85387e83d85ea17e73e8f2","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.27e05c5d.0.tgz","fileCount":9,"unpackedSize":38944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/RHr9TSaiae3NxB7xaRqfS1TOXPe4VHOxo48bT6usiAiEAmNESEm0bnyo5wZbX/t7MG76K6zBUEZYPiEuB/Wepl4Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.27e05c5d.0_1635965122770_0.8105945078215511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.b9e44af7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-icon-button":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-p7webCkPAQ+zpR5YwtIbF+dcVyltZME3hXIpi0YPbw+ytH1vFp2vB0d/kc/V7mWJCjjvBLJPD81mWBBgYtaR5w==","shasum":"ec7d99320e1b563c8cc0bbf9eeb8d4c3a14e926f","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.b9e44af7.0.tgz","fileCount":9,"unpackedSize":38952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH851Y+cAaehdJB9Ewn/7emQdF8QgD9n+SCcpfIANrtuAiAQNPhhr37zlxwwHAenoPIiUgcFsZVOWNjMVN3ngQGelw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.b9e44af7.0_1635966264002_0.13605126079711338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.448f6cb9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-icon-button":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-TAgoCWNjXnHei75ChCNoPzaROcwCCjoG69qNTOWxRe+2FNYEvqwLw78UrpmMwMcY0wARYWLgF1Ha9K3+Wg3jSg==","shasum":"346d7e66e7893806d1772ddfe2dc65569b1cd871","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.448f6cb9.0.tgz","fileCount":9,"unpackedSize":38952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9gQqfJsJR6FlxNt37KYN83xboyWgtjIdpaK64wJEU/gIhAPQrHW1sMov7KzXiG4rtMDT4kDr2ufVPxh4OlBL9W46/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.448f6cb9.0_1636049296776_0.018778071839387733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.8067ce28.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-icon-button":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-dJ92SzOYGFb3j0Y6tdzVVmsVx/B6sv0j7cwTnFE4J4o85Q+8jzcaZ1FfIa/nct+kd07lyTGf/VsLW709vafqag==","shasum":"ebb882c52c7eed9ccbb4c760239ee40dc15afc48","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.8067ce28.0.tgz","fileCount":9,"unpackedSize":38952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRYtPRe26O7iVqGLk/PHHY7Rgwm8s3UC09In4CO4QrKAiEAkkdfn7k4yhwY6xF33qRla6Oi3Vv2FQ6zUh1Easivdmw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.8067ce28.0_1636064569165_0.7648585296591324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.345c2bb9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-icon-button":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yWtS3nTPY9VZrvCLpNUYXidUbPU4NsLbHSBgCEGLL8Y6u6RhBEp6LLht/VGxP+vUfGatA+O/+46iyl3paiEZlg==","shasum":"7ef34ace0e49db958ba602045119839fc55fd9f3","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.345c2bb9.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4UCRA9TVsSAnZWagAAVOsP/R7IyPsyzF/ZjeoTvCvN\nWIig0x3RfNFMrvfjcS7f1Y9AWfRCfOl+HVXeVswNczqj2+Zb4KfgR50Wnobj\nXIGAvOUJJAXvYWvpMox8h/XnbDT8WsVKPoTEtSnhbL5BTeUaB2suTWE2S3gj\nF9WoMm+UBJ75Q93ksL2FdSIT7F3uUC4XjmTp4CMKiW1TlwnYUEbbBMNS6r9Q\nrTH1gX+B4UnTir6VH9baz+Qm1hTne3qBCrEEoRiaQKKMRNj+G/bweG5JuIg3\nALxxi8VNTJgnrtsgVYeJhoKxVeqPdElSwRQ/4CH10GR3h8H4baO6lLGMsVqp\neAw0IRVQjz6IfrTxgN8hU428t9p6Zc5kielscSfvL3Ebu2rKvWToZcyowFKF\nWRsp/o+P0uL9379/8ulV5oFrYZu86JV6pTrh1lUzTTVnVYbnmgb0uDqMVLdH\nQI9Sr81HZ3NzYqTMAcnTKskoUuSA8ZI636YAUwqZtW+qzkviKbuXMQgJx+tL\n6lTjN6+dJXn110S35U67dESjPQ/XzJX+g0gO4XmFLpx9ebBcqU5vo8bc0Pgb\nNw0wCuEjIA+73+Uako1VZ+uelfnqD3iBcHM0zzBFXGCVB+rnxErW7SGtiE8j\nYEcvKtLjYvZJBjn0E2TwcnAzRGx1IDR6D2fWiCpx9YtIAoJyYtYrvUFvKQ8g\nePST\r\n=pw5+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcrylOLubFZcvQVWk3jqCC7mu2pn5wou7bYuKTVg+5dQIgJ9fsKXHuvLJAhzD3DBWyma+9VPBIsqjB5pvcQbW0dO4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.345c2bb9.0_1638465044453_0.8052792430122786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.0547aeeb.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-icon-button":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-2NlCZY2Gi3gqKy6RjL8EBF0o0F9nqu05CNBaw/KpwlGnH0Iu4+5p0oQ4cmi/P4x8QwzNvH+yrqICaa3FinCVRg==","shasum":"b05d6b9661bae0ff07559a6f4209aaf85642e032","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.0547aeeb.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwdCRA9TVsSAnZWagAAeLEP/3PVMXQIk1RrshczAGVs\nNq0r4LOHW9yVbtymzkzTuoK8NT+0ZPOlIqeSc5OFz/hhZYjLjmjOOdLTKqKR\nl7cmL8Q+Qq6trKau+KKo/VGRPQ2u6kUb09iK3lQrYd/s+QL3MWSyKUiP3y6h\nr2UKKZjdL42uoOb9BTbRRJKcaMCE4n6UXEs4XXpELp2846QtYio5Uy3U3DYM\n0K7HtaueUf13ZKX3uQQ3nIiOh6IUg6ms2vf66j4ghLN7wVvR+6usQgoxToRx\njyJDuqwJ+14W9r+4XjHM6KqaEyuvKH/SZ9vpUvudj58aR7h0ui6IOeZByo40\nADDoSg4gTEdLXAeGawehboDvHNfEMdNTihFBRUa7Ojm2hq8ZsAYZX7FD1nX5\nsgaDS6YKCORTHGSSwHIx0KCKxAw6bW/tvxgXZoCabdJOUQM8duwOVlMEqvbQ\nnNkXVayp/pDVnQQC43XjB5QdduCh0C1PWNioAT6Y1izBarI6lAKcEJNe46Oc\noPEyyNTw/dK+zdQRIsKJkcF+Di7ar5Bkw14LUk4njMinIobbz3pHSmjP1V50\nVBK8Bk7Xqxd21L+BIsw/xxr6dRvGg4oHu3h5vkTCkejSVTgrEo6J4NAVS9A8\nSnJqx1XEsea/577xUinD11u6PmuKnuQg72/VTsGoWbWFOzqbdHg+N0Yu0MRv\nAOey\r\n=DtXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpcqk1kGZ1YigXKeT8ORZjj7Mer7ZuS9LbDhl2IgwUKAIhAN3HI6EEVTlZ7+8bmQrLv+vj7tx8d/Tec+cuDrZV5SML"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.0547aeeb.0_1638808604966_0.4773836743491562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.3b2452cc.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-icon-button":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-MzrzNtdTgC86ChDbnCVvgBNQIKcWtvObin/2IGziHer9aV9gCavLcC2wb6/BOTWTwvgz4V8A2kS6E6vvgONIYA==","shasum":"4405fa78084b87b9f83593892f1e8fcd1e19d8a0","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.3b2452cc.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUh3CRA9TVsSAnZWagAAuL4P/1s2R44NSXAQ3ewA3e2e\nI8DKn2u7DBnQ5aYdfbQ9gSAing7XqLpRTOpIFiPHxP3fxRvUDsHxnCYx4kUz\ngiYK7w7hiqDu981iGVAtXRy3ysqWvF5jCLx9LGaAeZ7T5c6nGIzGjuYkhyeC\nv4nOnNs3rYy5onUoolr91tN8NMvdXY5Wt4BwCiGQMNeeEtdX4Qd5mTLBOgzj\n0fxFRyuqjMFjDPgKCpyqbIicXB9RNp/cWfBjW7FnsZG5ZHsC7B+2sVrD0gNC\nnHrIIWFZUSq/xlQ+gXMpzBVoZp9/9pqBofEqIYC8UMWlPlH0s38YS40CCMBg\nhVMIKfQV/5UGQco0qbd2eubmGSC5P4WPpUilBawISRVMKmFr02NfpfPd9Oy5\nbbHXWoXOtq8LvapgACHioLhbzNg+tfLXNFrSQMG7E/Vqk4f1OZZIFkH0RCTT\ndGQ329gQbjK0N31QNXh0Hl1FwL+oBhy3TvwFvMPp1zAMJqLVNe8qv2Qp7xm9\nPE7SCCK54YXjUNDWlJ6pTW/s/cJxRWhBPtEEV/dqWrbCgp/u2r9HStbdTcAW\nykn+8YhbLZ3s0KnCOI7WkpaR3eW7/QV5ED8vnRXxvsv5rhA07UnhRaNr6HH+\nlDTvmrl6wPUGJRJF9uxepvUc1Xu45/vmlsdhjF34diqAlaR2qBniaF23ZPFS\nagMR\r\n=SfSd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdLg6WZ7JEFLtb8QxHwmaURFDubIJHdcuxbePWR4s3HgIhANWnD3SrOuJ9YJ7UEfrqRhxss1JEJyzzAWFKrSV0HWK+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.3b2452cc.0_1639008375501_0.31910816616955295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-icon-button":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-OTd/nmICZV4O+d0BAPfhOp0qh/BM/Ibc3rdmk0zticgNbyI5Qn4Gb2Kg/mRuStHy4sEqI8esXajKjQOE0R00/g==","shasum":"d9b14fd1a3a50a15633d3318a898710f2f90d7a4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6V0CRA9TVsSAnZWagAAMzwP/RBV90Pk+6ou71ULawCY\nh/lYKCgZxNvU3ITrowRGJoHcIdUWOYqcWFGSyCJ/leB281BZaNaFFCV+2xMV\njRll+4G+toUBwF9zIT2e7OZ1H8ZlMTWQ31zsq8O1f2q/l63F6pdLIWkSmyCH\nhVYUooRluj/BG6gcmxF2n9N9WhmyN+yyI5YjyH9yOd0ejwFDkuiWJ9ZyXPTb\ncBessD8Ihl/3aKToNOM7SnrbhtRtEkBK02fO+7Ry/adX/n4ygzgD4Q9hxuCc\nBvKtx2P+vMvF8OkdXugeuH4FM1mm7ZFmwJXvQDG1DoJCMFlzpddNFsQsmruR\nLDp6BNGvOqNRfYIRS4HSqJjXih/PLrnqoCFcaalfLhQi6lujhgvuqLhcmdVM\nh0ZkhHYlUZB/ckGYwEyEuxv1wp+ojYu/CXIu4uxI0wHw//0SkjNnQIKU0cK2\nKtL2a633xupf1DydIbS0TB2UVJybvhGh2+tPsAeOLAIfuhRvgAwgssK4mf4l\nXG7hMhJsFfyPe/HFZcuNBrPt1HsPn6naPcrOVSXHdLXpn2m0eaDlgXSqwYT+\nvgFwL8KaUpOneUN15VN1Lw+6UiVlkOt+Eha3XZBk2dSib7IO9P982vHQcabd\nTnl4yZDbzWpaQAENJE3ws3vsXcIKC66Rzd5yWS0shPpRxqpNweh72v6RLCaQ\nKxjp\r\n=8mbB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjucTW1EnmCqWSBI7yaY65uIafYDk99/u9GAP6lf2b+AiEAn7D5vdHU1b9vJA7Wc+Fedoac7YhHf1mG4A/vvN0xwls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.cf7ba5a9.0_1639163252107_0.9203258719369649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-icon-button":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-+7Dhnmmfrpyhaok4mfw6RY4etRWOPsLMvCKh8MjO85THL2QWeclWNqId9pI96NjNpn+cIgbrPyapLSVdGDH2yw==","shasum":"0400b50903ad8c43e360b81595725a0da0e94d64","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.e1bcf14e.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eRCRA9TVsSAnZWagAAygcP/ibfaXpMoehHik1BTehw\n4DdjvCmHVErY1/TdWWkI19HUrJs801ZZjCSqGDZysqppVdFWiCHq4yWiDjuz\nQZKZLDhnmprNg3Km6gMi604QAwucWeNvIWlbpskr+7HnU+O4mQWKIpopEh+6\nf9hui48O6nVWob3+2Zl8TgCfqKRf112bwIh/fbdiI6vC2hk9QmDxGD+7B8KV\nPau2aat3+U1CYq4koo+xTeBSnj31pjMFROj8qjSleqnHvjPwVWV3OSwaRdxi\n4wqIRLWyVfPosyUSJKT6kjE5RsKArY65TazoOcyt9JrbLwDsBCB5zpR7iP1u\njX4IFUtGBm6za79mXIh5bgq/3JQU6DyQAVCsvhyKonWw3eCURlCcPeuoJP/G\ngfTR8EMGeABakBgO6FKUvK1rZVTzorWNY87X/7JnbrZmYPSd+EOzTkP93Z9b\n1WwumvG3XOaQdtU+2lagU9N4IlHmgQmqGcT3VQ8Q4GQzVdMPDm5YYKnxSMUU\n3GgTPLXlTlQSwrS3MRRKdBxTA3C1KYYs4UDlreCV/NIPnuNCJeFeZR9PRCVQ\n9kXkoQxOCXjP3NFaXMv0ublM8gMdZ08fc55szbTChz0z66oB+219Mpvm+K2w\n9QIkjqdHQ82/kdCfqw4Iu1X18+wQAngT57AyInVHvJGH1lRm7fTwsRHaFocP\nHBmJ\r\n=HnoH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBis0QjE+P6wMqg1GUibwGlyQ43XeLklVLOSm6QW1lm3AiANYXCg0Bluan6XyBh80aFiEfQnqmApCPpwir07aa3nNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.e1bcf14e.0_1640724369126_0.21778984736469953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.b9d35b69.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-icon-button":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-zYN9NNzigZpNamjMGGdrsYxGxDjrKyqsxjsxSyK2d6gtw1UWNeDiy4Wkm7ho9MCiJFKnm0lL2W1BRI5101kHww==","shasum":"86704d3a8a11e91650f9429a0e1a1980b27f14e6","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.b9d35b69.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMiCRA9TVsSAnZWagAAtnkP/1p778gQ2ESLNkqO+aHZ\nSHh8z41SbXDLSFPxYEmwNcKDYHYXEwnbsCLtp0uyATrW2/9fB+0KjMRawSUg\n2OP7mnqI1iDl0LyUxaTPb2zHIU6GDoN7KN/UQ6G0hT4FPIkglEdWuBxq8DJK\nD4HOxC0oz6UHe3jQa7oDGdwqyKpeqZN6tt19rHPGRTMAkXT1bjeTgzy5qyJz\ncIS4e6tG7MIJ6JU2mZeH3ljNZ1uv7CvOG+92PgG0zSiGoEAts1IdTUc2REug\nZRahLHvQYG82O8+vGV6y1FW2stWV2KFk00qH7K8oGrn/B4YSkxQDDrj8mmBL\n51czrmqmh5jKlbtSDERhVdcwqWOxeccnMeRQmF1lDK76U38syp/Pl+nU1mGZ\n3gNT8vFAshHh/Y1s71sl8ZmB5Civ6FXh9eBHz8o8OMTfAzW9Cxmioj3OfPik\n0q8AbRPwpj6QkSJKPuGYKJZIPBhnfYD95z+edEywdhcgaC5P8PL6ZFQmc2Q/\n3mH2DaF4dU44sy83smzlJ2zJ3U5msvmEKKUPcKR27NR1/KMwNS/7T51q7F3e\np1RFAiLzTGaXsNmfF8GfGOn9Slo/DXOXZQ/ul81RVNPG8WbEPS3VM8w99RsF\n8xKmmJSZaDgARxD8VGUUENZfceZOf8kn1uyU303XX2xZdteJ/ACseWiQZHUa\nxLe7\r\n=Tgws\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc4sDDaYZt1Uvc1OjGKXBnai1pKifUfxS4mClWwJFy8wIgAbfzomfAUHfujJUwRUnlVlKiK/pHZqOL03uKFdMcZ0w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.b9d35b69.0_1641407266058_0.652078039730928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.2afff08e.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-icon-button":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-YvCX1ojlmifIh3NhdM3JaF9Z9+Kc0NBkE36CZZN1xwUIK7rvOXi7phX0ys3m5gg6og84WkZVLU+sNjV296clfA==","shasum":"4343c9c6d9cd43f8927afb6f9b69473fba5d79f9","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.2afff08e.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vdCRA9TVsSAnZWagAAwfIP/jhT6pefKOwaUQK1jYk/\n/XEsnVutNi3/2P4G8XA4IkzK8zqj9oxjH8jeexkXw+I1Ek0tzEJYLpskYMnK\nFAleU9SagbCYINQR2OISa3g2hlooMgHdNN3j6Aq4NpzT6lgzlmhpuArebHwP\ngdNj5AnWKPdr3iHuqQvDoH69Dsz4njekdJHPtAX9LX8GP/VkyN1QGOgzz4B5\nOwcTkQFVJcZdawKa9U71G/+R7ljXzSVGpgIGZovrl/NfzEh7UTt3jQOnTZe+\ngR+BzpXaAFkrcYtty8ByANRPxIFPOrXHfGwyFYOAuBCO74BrHv85aYju/JPz\nS58AxvdF5WQQj4TUd1PnNOso/hrj6fdXJOAxEQBAUJDZZOoaR8dhnu2Ab7jm\n2uYqzB89dE5xGENyMOpaHGGfk1JIC+jJsqWT2v1MYfkliTD+0dfRqXD//8tM\njW0LC+n0y5W0B4K6p2NCjRtIIL687eXaIVquZIU/5W7IbCoIKzhACMvxmiMd\nJXs8O4IzfQ0GtSI6o6SK5PmDvwPZoqLnONcvRuo0X5y8quEZy/9oK5GxkbHr\nXdpmQZOoV7HrNdVh26JKZwYg+ID9ilozZDbbfigdURHpAxoDcCtLE57+5U9v\nrTi0OaoTFXgQSVhw6l6OBI6cJmZln4FZUB8uzKnVzkQUTibsUV9Nyc0FHaU5\n+uol\r\n=jJAm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQB8lDm9ym0q1b/z5yJ3xFuqkTh04Jzamwv9de2AfrngIgFSlKV8QxVj7rgkjPuQSFyIxAiC73IrLvtJMvNUraInc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.2afff08e.0_1641507804927_0.04152796886556365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.893fc857.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-icon-button":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-UYK9DPEA4f9YW2nWQiZcNEHMW/u92rn+eifhBO8MrCtDFrPu2HlGl4mbrHlXMK+pK4FVM5m9V8FqA/FkHqC44A==","shasum":"c019778559643fd84ea8c4dc313f8128924552a7","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.893fc857.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxlCRA9TVsSAnZWagAAYZYP/19cwmFcY3fWDcCn6PcZ\nEo4KnsV9pXky7iD6A0KglvTiENO9hBCwfBkvFaCc/AJ4akd52bb5FYn7UfiR\nC3gd733r9ET/bC6HpEA7cy1cK+6auSnHSmDJnkym5bS1lY3G610m7i1D4k+1\nRCRDrsRdXjrh2ac98pdIGSSSg5rH8ttiLN93S0SFQy724PBNa+uHVO7NSO/j\nLv3zS8MVlGU5KPgGM42pcryZPm6ysb3w/g220K5ftBQnTgeFH4y4Cj+hx952\n8/IqX03ovK3fDLJSURgWL9HkcFIJRA5S+N4REDJqfQxEFcl3rpr0wm1mI9As\n6TUSySkJtWyGPxsQ9oT4aaXouGPH1k8fG7Q3vlvqlzmoVdejgkQiewBK+5QX\n8Ofa2zR0eogEfP5JEFIBX5naQaC/Gbqvz2VYZahaENmX5F4DaS97EQHSYhZ1\nDW91YezA9p/prwIhKBTKfYcZylC17XiwEtiaGOP/gHk07dBcPtuKpFGFszWu\nuD+uyGullP7DQxKa9geiezKctBbSs/vAQxQ+YAevfbos/IomMFqaQXgSYiWG\njUxF5pr4g+YFVurt/wi5D5mLTdkS2pJtQ5eZ2W0OTtcw031sMOmJC2U3I73I\nyhuCEqVFAgaPEzM0Hba/tMYEEjCnBn3yDyl2V7FcSKwCo8rWa9StdKLwAnDG\n0l0T\r\n=1aE6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/b6MQjfdG09bemRLxPGTDb6HlvOjHP7iKZWupY8+ofAiBdNPdJAlwwb7KKq+NxSjJYn2TqxiZWeFymo0br2tf17w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.893fc857.0_1641581669068_0.7176998347455581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.69ba13b7.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-icon-button":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-5Q9g9karzNXgZsgBIOCb3h/eUGozax+YF6bYlxqc2xkKIu4r04V/3qQa0MGuYU24jHMHTCwth5j39PAzaNYeZg==","shasum":"0ec620cc1b10194acbaa60673572534aaa8c9b82","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.69ba13b7.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+YCRA9TVsSAnZWagAAoskP/AwzVKOdGcuxYhvs0EHB\nfFrK7pbjnSqOI1y98KK5C+Mbb+YwAjLVtR1ajvnCqfwKowsMHF+saeIZr5Ik\nQ98FAucaCAs1AFLenI5KlDbyD6mFXSg9VI3eBgn3zQ8miri47Z3Ap59O7t3q\nVDZohq+2XKoNL6GF7HPAPpVLHxEH6G2sK2pXKDWerScsntmwXgDVSYKAIl61\nxKAAYqvEgoz7THcL7/eS3J7TPONwUBJaE6UxkxzUbR7JNXnI+Eial6C2UFLi\n9SdEPsklm+I+pJ+7IQoK9pyOA0R1QEcQRtiMT6zPK8j1ppCrufJXt2cEtAMP\nznxhuis1gP33u2pJSCFblBJP0T3bca8V7cAEwrvjTtbE3Oy+yVyTJ8G6MF+P\nYVp/QQ5HAuQvN4AHw6Vt77OyAdzFT8NDzysKQe+WudXTrLTPXwRjMY0aGCFn\n0Lp+hNvPIWXlxzA0R61pGZXkb2XdA8vTH4sUJyxD7LAkjaVuR83WmvGEJhKP\nYsxR0ql46CvKGB/0emDH2L47RTG+op8tAVeh+hPzdAel19Jrx/KlNxM/85Qo\n/kvE3g59Ee18hL7QkXHd2C1TbzMtXS8lTidt2frSjbPBA6pupZ1IJ7E54ayt\nZB39M6D9jb7gvePs9ddTBDvwIuIYuzcYDXbSUIAUJh6vEn2/ZjJH5y/cxxyy\n/Nf5\r\n=/mMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+jbq/FPYw1TBwB38koHYhFY6i1BKx96VLXUWy6ZOvpgIgaY28MmDu7Vs9vpKkIAmzK4yXEgEpfoXalAyOa2ETuUY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.69ba13b7.0_1642631064009_0.40855015510949433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0-canary.0af8ade5.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-icon-button":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-1drMUrDxv2D8RIuNlhawhd5L1Vfkqk+m9xg0tTyt5f3QdVdVpUJdMVLk9mDqyk/6Q3ZmGjGv3+I9vOvnevTMCg==","shasum":"473ed75ba6a93765ef955704388add63de2c6dd4","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0-canary.0af8ade5.0.tgz","fileCount":9,"unpackedSize":38952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZe3CRA9TVsSAnZWagAALzoP+wXyqrZJtnzSBvXvzUxE\nZnqHhwNuTrhq+/gB8h7PrAgdBAnbSaj/xBwqRGbJ+fUBSFI3Lkr4kXz5s/bV\nogRP41I16xL9VP/YF3e7rrFVL/b/VbvPvArOrB/LhjhM2nMEoXAULhBEZsih\nhIG6BUOYwulfLDMy6gTTls53tT62RvXDOA8QRdh6E94iPxferE/+eTcqn3QC\nvTGKoecoZ9bmZ4frapc2UxFfvh2BbbB5zquL5fiFOxKNwi2yfj+QL6S1z8v1\nKaHZ3jHJXaZxjvVolvPAoH6mDpwGQudzMYfn082vg5ezdk6BWnxAbm8Z2soQ\n21l1iBcJSOkSv29sURdCh4wJ2Tw02ZmSPgze5CySPdkeH9JnetX7X7uNRSjr\ngf2RIUfW6KUaPiWr26ZjT3x/yZFbt1UVNyeB8jN+ElNDshmbWn2qdpLfikC0\nayv624fUnk54PF6q4Z1oe96kflAZi9+WKBNdVscSeufmmrPZH4LDZlQY4Njh\n88usYz22rTCpwmYP9amMxKrrh6QK5JF94gn3V+GiENPRyLSCY/Ax6EToUZ77\n0e8iLKlK2laRlgCb/gioRxKpdka7mkeq+U6Swc/q5iJm0unbWHilVW0IsTgR\nRyIIFYbbdwlo93MbNPzC4oNBLVH01J0RIPjV2P2TtHxqm/923I8bClVKMR8b\nH+As\r\n=EYUl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkK3o/v16z4A+JFsoq75gE/Vc8Uah1PtDGdsKN0KGyOAiBwPA/TpLc5hJZbY4zM+whplNT1HcFt97DLrdxefbv0XQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0-canary.0af8ade5.0_1644271542892_0.19968647697515474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-icon-button-toggle","version":"0.26.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/mwc-icon-button":"^0.26.0","@material/mwc-ripple":"^0.26.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-FX4yZLh7Zr7I3bbTztFxlNpHXSmlJfCfwRi1ZsJIWRxgN+4nve+6zw5ZNZu/alSSpo/Ge1q4k4UCqPmC1ZoiLg==","shasum":"38a8b51f671301f8b5f5705c880a6d2e986c5049","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.0.tgz","fileCount":9,"unpackedSize":38861,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqjB1Z88cfkeslbTYhsiiPlSZuaM1diAe6sD3gco2s9AIgHe6Ds6cF83P5pfqu3mYj7lXsGOC8h3uzJVEhgAvY2DM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQhxAAimF19QNARKZ8gktE5pYJBbRjLQ411JkLL275SGPuZimo5Nvq\r\nLqvURqJQtiNuf4t+vRSSWRUKpkN0fviduTD38epPDQ+ntUH6H7Wa0RgGaW9G\r\ncz2TQEPPsXV4/QV1ulWQlQEaoaSXcMODr160ZDKrtz9H4Yawa3CBr/7YEwXZ\r\nmlVvVgbnLPtfZJ5LdP3QTLbR/H/rxCUJVEBRsGJtZRR1GWdu2Gt8KshmzeVg\r\n7o+EtGKneHoZa3Ww9ur+s1BvLx4pLW2WcyaX62FiuOi2LwnlZAlJikOKMhm+\r\naxCxLO6ZJt4eWHuAH6I245+EYiYr4fh+bGrJMz6zY4zjizrgP8gcpQDePG71\r\nWYA8qHV++Bf3deTCiQwOl6tQZmbFPaWMdgRxDw1B3D3w1iIbdQfwZa0i9Ktt\r\nKnvO9Tjeccmo3h51EFkGDtOn1spa1kSGsY7ON95AMiNq71olVeYZXA5K1SUw\r\nYa/G/lyiOrSMmrdWnMgIIiAxeb2T1AHI7+79eokY8cbRoFwfXaWJgc8uZ7us\r\nhcjyZt2zx1PxccJG0ckUpruNdec8OqxLLoTQoUccM7SnCwdIK+htZuHgP4HZ\r\nmU/wuQWJ8Mo8vc0GRPC6qPReA4VuwVxALdfljrJ6RnE4mV23zMcDPzh+gLBc\r\nS3n6/UryhRv2+xSI3w5vWNPMXM78Xx3IzK4=\r\n=DLQY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.0_1651599037551_0.5132887199500193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-icon-button-toggle","version":"0.26.1","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/mwc-icon-button":"^0.26.1","@material/mwc-ripple":"^0.26.1","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-M7U1GQUzqhqipHs7ODRdLkoe8oiZWk2AAFIvfrPVWvn/7o4mCjbZdafOlAnOR5iTg2RTie7g8oJHMqESlq3ziw==","shasum":"f981efa7280b0d9afb7730eface532483fbf19ac","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.26.1.tgz","fileCount":9,"unpackedSize":38930,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIqnxG3OIZKL4lueaXZTj7QYgbDSMkOVcL2ZjZetuRbAiEAgaCQAgrEz68gkon9gq7pqvwBVoMlcbN76Hs5qJQvbBA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpszQ//ZNpj9E53L3RhKeA+zVSGsgVGMtYz1DyCbyeooxcj55dTpudH\r\nH9s7nVeSVJ/+AB+vbUGc65uCAuwiBvNv/Fnm786oCOSHhCVqifxt0YIlx9we\r\nClcFf7LZzwEzlJw8mhAq7B6OyhDu4uHr+Cjup8Y+dcDdJW6lOIS7tRBUdCDQ\r\nmjtFLXkrT399/6Tk9b8m6QWHgFYajNKyPIsJ2RpOcYNDLgzJUJQJEFTTyk/6\r\nwDD4nBVD9UdLJbrj3PyKMSx+iC8k21PABt0f4GeM3cZkXgR4eNj4nDaHnz7X\r\nBI9u1fkKSUQQNjgndSXUCpveW4gQgNwh1cIDCXhmspTY3Eg2jLM+M0L1Jiym\r\nQp4/Vjfc0cdaddbARV8bC5oIzH92QD1istUReffDvA4UbuYTSj9OkZO9i9+u\r\nGfPWD1h/FksYvaQowsnE3asnv8g2p2ttroGDc7/BGFR1St/PbIDdXAf2G44C\r\nHqDaNW6nl+P+xWww0u6tg3gk5JHmvtoleuFTyvSQPh9aEwD2h+VjcJameK6/\r\nCSO8JrLuk9xLZG3sA1COGXZsF26aTHwMmMRvVxjSHCLzbV1E/5j822xiddQF\r\nkQGgM7+5Ys32K4IOhBkAJEIy4l9h1iHp5LuLbD0hBpzRVwpE39vADiFMoTGe\r\nXrB1p6XB3ZfdMaEcl1i3D/aYQtB8moOfgjk=\r\n=qvbe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.26.1_1652128316859_0.4183756500647393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-icon-button-toggle","version":"0.27.0","description":"Material Design icon button toggle","keywords":["material design","web components","icon button toggle"],"main":"mwc-icon-button-toggle.js","module":"mwc-icon-button-toggle.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/mwc-icon-button":"^0.27.0","@material/mwc-ripple":"^0.27.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-icon-button-toggle@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-PLozOm8m96vfPqTvugdCSC6V+sd337rdm/H2ZpnMbV+8gllfIkm1J02hv7rQ1O51ThrpMt4hd0URitIiEeuATg==","shasum":"1cbd3c59800f8fa0bb03a4efcf9f926c36b28012","tarball":"https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.27.0.tgz","fileCount":9,"unpackedSize":38930,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKcfX8lor0PsjCoFyBXivwntEk07ZpP4vT+dOtBOh1lAIhAJdu6C7D41gR4iE/G0TRy8bowSfiTueSzUNVngKR/D5N"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt5w/9FVyHRKsL/tXKwDzApgu0gIKrRhZ5C0s7/MVfSqnP8ridz1or\r\nJtpewq1yCuV8/nGJ5qKnnWBjKzY5AewIx8RjvnMAjt4lwUse/AP6yd6UIwyz\r\nQ+YX693wehoIk8ZiRp2SiF3dzqEJt4TX+d6eCDIoHvZoC2uzYouEQFWCLGM1\r\nKf41N3NQ9oXDAGF3Sz8SKOdYIUyx1KDU/RYNRIzA2sp60CJWeniRRliE0sd8\r\nFj4xPM3pRSMXL8Ddd5MWVmf/GjLGYPrCxAaM3jeKigGOtOM/P3K3Ibq0TizZ\r\nDDYgTuBSzM98sSCJ6mEu0XAAi+XACny4SN5Nsm04ndllGm2aHzskW1TqfxeP\r\n3sspxMJqdqw0Ve6FHM3lJNd6OMjTgiRklqKEzBC5+X2iozBpRWMYtc0OhIYP\r\n3K235iM5Jk8KK/OBSzJRwRt9+vwSDY98pd0/S60qBFAVw7A0fs9mazpDR6Ix\r\nz5ugYyjZBOEe7fHKIVgRx8pdSqfCXhOIWIjBSdT2rc0Tjpab9KbsG7dFCEEi\r\nCBGO6GrbGAlYnyDx6uLQ50si2pb3+F0Q+4lID6bAZjUihAsyCQClChphU7iO\r\niBdDmDjAotQZ90+rps847SkgPEldyr4QMf00R/ZK/rxrRCGXM5UJGfAp+3pu\r\nRemIaiHnLa5rywDhFwpyH8vnbzyNAye/Phs=\r\n=uA/H\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-icon-button-toggle_0.27.0_1660331533419_0.6779756126006931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-08-27T21:23:55.936Z","0.7.0":"2019-08-27T21:23:56.337Z","modified":"2024-04-04T18:50:08.053Z","0.7.1":"2019-08-28T02:54:31.380Z","0.8.0":"2019-09-04T00:04:55.383Z","0.9.0":"2019-09-27T01:36:21.212Z","0.9.1":"2019-09-30T21:05:24.609Z","0.10.0":"2019-10-11T23:28:25.687Z","0.11.0":"2019-11-26T21:49:42.259Z","0.11.1":"2019-11-27T00:26:48.013Z","0.12.0":"2019-12-17T23:48:04.170Z","0.13.0":"2020-02-04T04:46:44.278Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:39.366Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:18.655Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:40.112Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:09:05.336Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:23.705Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:57:03.287Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:19.331Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:07.730Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:11:02.778Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:32.740Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:53.394Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:45.853Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:32.151Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:37.677Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:37.008Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:54.816Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:08.396Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:41.446Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:13.750Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:49.095Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:20:05.111Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:18.390Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:11.653Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:31.351Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:41.590Z","0.14.0-canary.306cabed.0":"2020-03-17T21:18:01.998Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:10.195Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:20:02.835Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:41.338Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:36.034Z","0.14.0":"2020-03-19T21:28:47.902Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:12.732Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:29.271Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:12.408Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:46.944Z","0.14.1":"2020-03-23T17:57:49.096Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:12.117Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:55.908Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:24.088Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:17.861Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:24.818Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:50.033Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:35.702Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:47.525Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:36.173Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:26.145Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:12.485Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:30:04.833Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:29.032Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:28.708Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:30:06.457Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:08.906Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:24.593Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:43.268Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:51.461Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:58.297Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:51.941Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:26.829Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:09.061Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:57.320Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:39:02.707Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:39.072Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:18.963Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:25.797Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:46.785Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:34.966Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:27.877Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:36.459Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:46.698Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:24.731Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:47.144Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:37.120Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:30.931Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:35.839Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:58.161Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:15.658Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:38:00.493Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:12.652Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:17.250Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:20.153Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:21.538Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:39.189Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:39.454Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:57.387Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:43:03.320Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:13:01.686Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:56:04.716Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:21.807Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:31.025Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:46.110Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:41.933Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:15:05.960Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:21.942Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:13.213Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:55.080Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:31.534Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:34:01.141Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:49.376Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:13.408Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:30.774Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:28.087Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:14:05.236Z","0.15.0":"2020-05-05T22:36:21.937Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:48.365Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:15:06.641Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:33.256Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:49.559Z","0.16.0-canary.588062d7.0":"2020-05-08T21:24:08.708Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:25.091Z","0.16.0-canary.2772c509.0":"2020-05-11T18:37:02.320Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:44.301Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:07.602Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:34.399Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:17.616Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:33.821Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:47.244Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:56.255Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:28.967Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:37.908Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:29.065Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:13.231Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:48.865Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:58.601Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:55.156Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:14.271Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:44.146Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:43.651Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:39:12.768Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:33.162Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:18.618Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:42.719Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:35.765Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:08:00.069Z","0.16.0-canary.17d33745.0":"2020-05-26T16:14:09.996Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:43:08.117Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:26.327Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:38.845Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:33.561Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:31.335Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:47.563Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:18.654Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:55.799Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:29.445Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:37:03.968Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:50:05.911Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:49.019Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:29:12.868Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:33.321Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:58.788Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:46:10.653Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:18.439Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:42.525Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:13.549Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:29.420Z","0.16.0-canary.2e269285.0":"2020-06-10T01:36:01.513Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:28.463Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:59:06.376Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:58:10.374Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:57.592Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:59.662Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:08.365Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:57.318Z","0.16.0-canary.e7649968.0":"2020-06-19T21:41:00.824Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:59.145Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:13:00.929Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:25.527Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:35.102Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:40.773Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:15.483Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:32.814Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:38.149Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:24.202Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:33.862Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:43.953Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:10:06.357Z","0.16.1":"2020-06-30T21:14:57.553Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:28.363Z","0.17.0":"2020-07-01T19:44:33.223Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:48.738Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:48.124Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:51.026Z","0.17.2":"2020-07-02T05:58:27.336Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:40.615Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:57.358Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:36.096Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:47.222Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:38:00.190Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:26:04.673Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:50.648Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:38.593Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:41.829Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:24.332Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:33:08.063Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:54.476Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:18.449Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:44.677Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:18.550Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:55:06.186Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:22.611Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:53.008Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:10.493Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:44:22.860Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:51.240Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:13.202Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:15.688Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:01:02.680Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:03:02.102Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:17.716Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:43.269Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:50.396Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:12.550Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:31.349Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:38.710Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:52.177Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:10.418Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:33.417Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:47.069Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:55.350Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:59.709Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:52.379Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:11.574Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:34.621Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:37.659Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:57.380Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:13.175Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:55.481Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:29.583Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:52.467Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:41:09.342Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:33.029Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:47:09.042Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:51:00.614Z","0.18.0-canary.21c55569.0":"2020-08-03T19:57:06.074Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:50.389Z","0.18.0":"2020-08-03T21:24:34.058Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:17.655Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:32.749Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:12.791Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:24.254Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:49.734Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:53.760Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:11.405Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:48.409Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:15.159Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:26.843Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:56.772Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:47.981Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:23.361Z","0.19.0-canary.1583e263.0":"2020-08-11T23:11:09.322Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:33.422Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:50.057Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:55.797Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:42.972Z","0.19.0-canary.758635ed.0":"2020-08-14T17:17:12.100Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:28.035Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:16:03.373Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:03:04.853Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:28.569Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:17:04.191Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:34.084Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:31.148Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:20.030Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:25.908Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:23.596Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:52.006Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:42.301Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:24:06.114Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:37.976Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:18.709Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:32.230Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:52.112Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:35.549Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:31.748Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:47.406Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:46.181Z","0.19.0-canary.606642ec.0":"2020-09-02T21:36:07.248Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:34.928Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:45.963Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:58:04.935Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:32:00.904Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:20.276Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:08:05.148Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:32.796Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:41.696Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:53.366Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:44.330Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:32:03.265Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:41.748Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:46.621Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:49.489Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:58.549Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:46.505Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:14.242Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:19.096Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:47.613Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:27.711Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:27:03.382Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:09:06.582Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:59.408Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:13.330Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:35.073Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:56.729Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:52.234Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:13:00.330Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:50.037Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:43.011Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:43.905Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:35.438Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:52.209Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:24.832Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:32.381Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:51.607Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:12.025Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:57.365Z","0.19.0":"2020-10-07T22:33:37.312Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:54:09.691Z","0.19.1":"2020-10-08T23:06:02.757Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:43.359Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:44.582Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:43.015Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:46.402Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:19.075Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:58.941Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:55.142Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:40.304Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:30.104Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:45.646Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:26.892Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:28.851Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:39.790Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:32.929Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:51:06.051Z","0.20.0-canary.124beb49.0":"2020-10-31T00:07:02.212Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:21.222Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:16.373Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:15.476Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:21.349Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:35.532Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:33.438Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:35.933Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:16.632Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:52.944Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:37.369Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:47.226Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:26.198Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:45.043Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:17:11.067Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:41.974Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:22.745Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:31:05.933Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:58.612Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:16.818Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:37.966Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:49.033Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:46.754Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:42.469Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:21.459Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:56.472Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:45.735Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:48.051Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:19.968Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:37.762Z","0.20.0":"2020-12-03T22:28:57.397Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:17.375Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:35.878Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:26.694Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:27.362Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:24.735Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:41.145Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:15.151Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:03:05.467Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:50:02.584Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:46.848Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:39.380Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:34.512Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:46:00.772Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:28.895Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:48.652Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:44.390Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:05:03.232Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:50.391Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:50.700Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:51.858Z","0.21.0-canary.2899691d.0":"2021-01-16T01:45:03.854Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:50.569Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:46.296Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:26.336Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:57.005Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:38:09.250Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:37:03.145Z","0.21.0-canary.664a2927.0":"2021-01-21T19:19:03.145Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:48:04.008Z","0.21.0-canary.027365eb.0":"2021-01-22T21:08:03.200Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:57.887Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:13.949Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:25.441Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:40.625Z","0.21.0-canary.946f5563.0":"2021-01-23T00:44:00.075Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:37.826Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:44.415Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:58.150Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:36.330Z","0.21.0-canary.5a328336.0":"2021-01-28T19:55:09.586Z","0.21.0-canary.533b1251.0":"2021-01-29T15:12:10.908Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:54.417Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:18.296Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:34.953Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:44.379Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:15.553Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:40.233Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:37.226Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:27.589Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:36.041Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:51.650Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:20.730Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:32.985Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:47.535Z","0.21.0-canary.c525f471.0":"2021-02-17T20:54:05.090Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:29.707Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:36.423Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:46.456Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:55.309Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:35.807Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:44.832Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:37.145Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:56.809Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:15.355Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:31.381Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:42.941Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:52:11.981Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:56.015Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:37.901Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:24:01.871Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:25:12.257Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:28:01.648Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:43.815Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:52:08.432Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:28.468Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:16.309Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:47.490Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:24:24.168Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:47:10.398Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:30:08.006Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:25.644Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:14.789Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:27.847Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:59.156Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:56.991Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:26.567Z","0.21.0-canary.7033124d.0":"2021-03-16T18:38:14.408Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:37.003Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:17.589Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:47.505Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:38.297Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:27.382Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:54.548Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:26.416Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:09:07.259Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:56.262Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:18.494Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:47.313Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:15:10.924Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:38.544Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:40.666Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:52.244Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:35.245Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:34.087Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:57.998Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:22.217Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:24.945Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:28.452Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:12:08.009Z","0.21.0-canary.e142c144.0":"2021-04-12T14:51:11.625Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:06:02.175Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:36.817Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:24.730Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:44.494Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:28.504Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:49.823Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:29.482Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:35.682Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:47:04.970Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:41.544Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:56.932Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:46.819Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:55.530Z","0.21.0":"2021-04-30T23:58:14.982Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:42.708Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:41.998Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:34:08.486Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:11:06.429Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:25.193Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:54.719Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:53.961Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:29.535Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:20.813Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:46.820Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:44.474Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:35:00.082Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:35:04.189Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:46.489Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:35.046Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:52:06.370Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:01:07.879Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:50.452Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:49.737Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:43.038Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:51.869Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:19.724Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:53.461Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:29.526Z","0.22.0-canary.2212691a.0":"2021-05-17T23:53:08.027Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:23:00.436Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:22.777Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:42.082Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:31.542Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:30.507Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:52.536Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:17.660Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:49.375Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:51.519Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:52.851Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:58.381Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:31.024Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:58.356Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:46.739Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:35.509Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:44.102Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:47.294Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:35.112Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:42.103Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:58.807Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:41.447Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:37:06.413Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:28.250Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:45.610Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:22.312Z","0.22.0-canary.573d8913.0":"2021-06-18T23:27:11.625Z","0.22.0-canary.21dba001.0":"2021-06-21T21:41:06.241Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:32.220Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:38.799Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:27.950Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:45.689Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:18.826Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:31.393Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:48.982Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:55.398Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:43.893Z","0.22.0-canary.2226489a.0":"2021-07-08T18:02:02.542Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:14.163Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:19.574Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:38:09.898Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:32.518Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:19:07.663Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:27:13.267Z","0.22.1":"2021-07-14T22:52:58.089Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:37.162Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:40:00.222Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:14.877Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:23:05.361Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:30.566Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:17.313Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:30.043Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:42.050Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:12.771Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:34.790Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:07:01.960Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:32.656Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:08:11.276Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:11.763Z","0.23.0-canary.104debd5.0":"2021-07-19T22:54:03.155Z","0.23.0-canary.4612705d.0":"2021-07-20T16:05:10.229Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:35:07.015Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:24.647Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:20.930Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:30.482Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:40.009Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:41.670Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:14.701Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:29.572Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:35.379Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:39.498Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:23:09.111Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:53.484Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:43.245Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:23.763Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:22.766Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:17.530Z","0.23.0-canary.21918905.0":"2021-08-03T21:15:01.094Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:14.781Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:26.254Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:48:02.506Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:25.114Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:11:05.246Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:26.388Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:32.771Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:11.470Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:35.522Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:46.951Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:32.242Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:39:01.053Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:51.641Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:54.530Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:45.893Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:55.229Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:57:12.367Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:22:03.510Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:48.723Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:12.514Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:40.853Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:59.680Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:25.373Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:18.833Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:32.573Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:48.616Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:27.221Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:22.873Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:37.631Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:21.403Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:32:09.548Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:34.394Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:26:03.019Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:16.199Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:46.409Z","0.23.0-canary.4962a163.0":"2021-09-07T23:54:00.086Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:14:10.666Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:20.142Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:55.440Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:33.126Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:15.742Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:56.851Z","0.23.0":"2021-09-13T21:35:54.042Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:39.180Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:45.348Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:52.050Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:54.279Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:28.605Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:45.118Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:29.190Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:09:10.639Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:47.713Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:23.535Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:46:10.725Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:28.689Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:08.253Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:30.938Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:16.451Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:16.311Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:12.534Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:32.447Z","0.25.1":"2021-09-21T03:12:46.700Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:30.196Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:39.969Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:10.860Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:28:00.336Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:30.991Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:44.269Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:53.142Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:12.695Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:12.948Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:15.342Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:37.727Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:56.761Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:41.395Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:42.837Z","0.25.2":"2021-10-11T23:18:37.300Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:52.452Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:18.205Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:58.098Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:51.833Z","0.25.3":"2021-10-21T17:55:49.899Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:52.738Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:17.805Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:10.201Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:51.849Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:15.204Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:56.677Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:22.949Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:24.222Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:16.957Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:49.340Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:44.621Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:45.100Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:15.670Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:32.263Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:46:09.327Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:46.197Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:25.140Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:29.292Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:24.266Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:43.088Z","0.26.0":"2022-05-03T17:30:37.739Z","0.26.1":"2022-05-09T20:31:57.072Z","0.27.0":"2022-08-12T19:12:13.685Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design icon button toggle","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/icon-button-toggle"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon-button-toggle.svg)](https://www.npmjs.com/package/@material/mwc-icon-button-toggle)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nToggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor the non-toggling version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/icon-button)\n\n[Material Design Guidelines: Toggle Button](https://material.io/design/components/buttons.html#toggle-button)\n\n[Demo](https://material-components.github.io/material-web/demos/icon-button-toggle/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-icon-button-toggle\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/standard_off.png)\n\n```html\n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/standard_on.png)\n\n```html\n\n```\n\n### SVG\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/svg_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/svg_on.png)\n\n```html\n\n \n \n\n```\n\n### Image\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/image_off.png)\n\n```html\n\n \n \n\n```\n\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/image_on.png)\n```html\n\n \n \n\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/disabled.png)\n\n```html\n\n```\n\n### With toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `ariaLabelOn` and `ariaLabelOff` properties and\nomit the `aria-label` attribute.\n\n```html\n\n```\n\n### Customize colors\n\n#### `on = false`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/custom_color_off.png)\n#### `on = true`\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon-button-toggle/images/custom_color_on.png)\n\n```css\nmwc-icon-button-toggle {\n color: tomato;\n}\n```\n\n## Fonts\n\nMost users should include the following in their application HTML when using\nicons:\n\n```html\n\n```\n\nThis loads the *Material Icons* font, which is required to render icons, and is\n*not* loaded automatically. If you see plain text instead of an icon, then the\nmost likely cause is that the Material Icons font is not loaded.\n\nTo see all icons that are available in the Material Icons font, see\n[Material Icons](https://material.io/resources/icons/).\n\nFor technical details about the Material Icons font, see the\n[Material Icons Developer Guide](https://google.github.io/material-design-icons/).\n\n## API\n\n### Slots\n\n| Name | Description\n| --------- | -----------\n| `onIcon` | Optional `` or `` to display instead of using an icon font for the `onIcon` property.\n| `offIcon` | Optional `` or `` to display instead of using an icon font for the `offIcon` property.\n\n### Properties / Attributes\n\n| Name | Type | Default | Description\n| -------------- | --------- | ----------- | -----------\n| `aria-label` | `string` | `''` | Accessible label for the button.\n| `on` | `boolean` | `false` | Whether the toggle is activated.\n| `onIcon` | `string` | `''` | Icon to display when `on` is `true`.\n| `offIcon` | `string` | `''` | Icon to display when `on` is `false`.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `ariaLabelOn` | `string` | `undefined` | `aria-label` of the button when `on` is true. If set, `ariaLabelOff` must also be set.\n| `ariaLabelOff` | `string` | `undefined` | `aria-label` of the button when `on` is false. If set, `ariaLabelOn` must also be set.\n\n### Methods\n\n*None*\n\n### Events\n\n| Name | Detail | Description\n| --------------------------- | ----------------- | -----------\n| `icon-button-toggle-change` | `{isOn: boolean}` | Indicates the button has been toggled. `isOn` indicates the `on` value of the toggle button.\n\n### CSS custom properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-ripple`](https://github.com/material-components/material-web/tree/master/packages/ripple)\n\n#### Global custom properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font` | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).\n| `--mdc-theme-text-disabled-on-light` | Color of icon when `disabled` is `true`.\n\n## Additional references\n\n- [MDC Web: Icon Buttons](https://material.io/develop/web/components/buttons/icon-buttons/)\n","readmeFilename":"README.md","keywords":["material design","web components","icon button toggle"]}